When embedding an interactive map on a webpage, users may experience unexpected scrolling behavior. The Smart Overlay feature prevents this by giving users full control over how they interact with your map—whether to scroll the page or pan and zoom the map.
Why You Might Need the Smart Overlay
- On desktops: Scrolling with a mouse wheel over a map may unintentionally zoom in or out.
- On touch devices: Swiping can either pan the map or scroll the entire page.
The Smart Overlay helps avoid these issues, ensuring a smoother and more intuitive browsing experience.
Default Behavior with the Overlay Enabled
- By default: Users can scroll the page without interacting with the map.
- To zoom or pan, users simply click or tap the overlay to activate map interactions.
When to Enable the Overlay
- Recommended: When your map is a secondary element on the page with other content above or below it.
- Not recommended: When the map is the main focus and fills most of the page—interaction should remain immediate.
Note: The overlay only appears when your map is embedded on a webpage. It does not show when viewing the map directly via its public link.
How the Smart Overlay Works
On Desktop
- The overlay appears when a user scrolls over the map.
- Clicking the overlay activates map controls (zoom and pan).
- After a few seconds of inactivity, the overlay automatically reactivates to prevent unwanted scrolling.
On Mobile Devices
- The overlay appears during the first interaction with the map.
- Tapping the map enables zooming and panning.
- After a short period of inactivity, the overlay reappears during the next interaction.
Important: The overlay feature requires an additional JavaScript snippet for compatibility with Safari. This script is automatically included when you enable the overlay. If you enable the overlay after embedding your map, make sure to update your embed code.
How to Enable and Customize the Smart Overlay
- Open the “Share” menu in the Mapme editor.
- Select “Smart Scroll Overlay” and enable the feature.
- Adjust your overlay settings as needed.
Customizing Overlay Text
- Edit the default overlay text for both desktop and mobile views.
- If your map uses a different language, translate the overlay text accordingly.
Preview the Overlay
- Use the “Demo Overlay in Preview” button to see how the overlay will appear on your embedded map.
Advanced Customization with CSS
- You can further customize the overlay’s look and feel using custom CSS—for example, by adjusting opacity or text size.
- See custom CSS examples here.
Try Out the Smart Overlay
- On desktop: Use your mouse scroll wheel over the map to test the overlay.
- On mobile: Tap or swipe the map to see how the overlay activates.