Maps Scroll Wheel Repair

< img src="" class=" ff-og-image-inserted" > This post by Steve Fenton discovered my feeds recently. I ‘d never ever become aware of HERE maps in the past, however obviously they are embeddable in some way, like Google Maps. The issue is that you zoom and out of HERE maps with the scrollwheel. Envision you’re scrolling down a page, your cursor (or finger) ends up on the HERE map, and now you can’t continue scrolling down the page since that scrolling occasion is recorded by the map and turns into map zooming.

Steve’s option: put a “coverer” << div > over the map when a scroll occasion begins on the window, and eliminate it after a brief hold-up (when scrolling "stops"). That service resonates with me, as not just have I coded options like that in the past for ingrained maps, we have a service like that in location on CodePen today. On CodePen, you can resize the "sneak peek" window, which is an << iframe > of the code you compose. If you drag too quickly, your mouse cursor (or touch occasion) may activate motion off of the draggable aspect, possible onto the << iframe > itself. If that takes place, the << iframe > will swallow the occasion, and the resizing you are attempting to do quiting working properly. To avoid this, we put a "covered" << div > over leading the << iframe > while you are dragging, and eliminate it when you stop dragging.

Thinking about maps however, it advises me Brad Frost's Adaptive Maps concept recorded back in 2012. The concept is that embedding a map on a little screen mobile phone simply isn't an excellent concept. Area is confined, they can decrease page load, and, like Steve experienced almost a years later on, they can tinker users scrolling through the page. Brads option is to serve a picture of a map (which can still be API-driven) conditionally for little screens with a "View Map" link that takes them to a full-screen map experience, most likely within the map native app itself. Big screens can still have the interactive map, although, I may argue that having the image-that-links-to-map-service may be a clever pattern for any internet browser with less technical financial obligation.

Direct Link →

Leave a Reply

Your email address will not be published. Required fields are marked *