How to Add Image Overlays to Your Interactive Map

Image Overlays allow you to place custom images directly on top of your map. This is useful for adding floor plans, historical maps, site plans, event layouts, custom illustrations, and other visual references that need to align with a specific geographic area.

Image overlays are managed as Overlay Layers and can be found under Layers > Overlay in the map editor. To learn more about layers in Mapme, see our Understanding Layers guide.

Key Features

• Move images: Position the image precisely on the map.
• Resize images: Drag the image corners to adjust its size and scale.
• Rotate images: Rotate the image to match the orientation of your map or floor plan.
• Opacity control: Adjust the image transparency to blend it with the underlying map.
• Layer management: Show, hide, duplicate, and reorder image overlay layers.

Examples of Image Overlays

• Floor plans for campuses, malls, and buildings
• Festival and event site maps
• Historical maps aligned with modern geography
• Architectural and development plans
• Custom illustrations and branded graphics

Adding an Image Overlay

To add an image overlay:

1. Go to Layers > Overlay in the left menu.
2. Click Add Overlay and select Image.
3. Enter a name for the image layer.
4. Upload an image from your computer.
5. The image will appear on the map and can be positioned and adjusted as needed.

Positioning and Editing the Image

Once the image has been added, you can adjust its placement directly on the map.

• Move: Drag the image to reposition it.
• Resize: In Keep Proportions mode (default), drag any corner handle to resize the image while preserving its original proportions.
• Rotate: Use the rotation handle to rotate the image and align it with the map.
• Free Transform: Switch the Resize Mode to Free Transform to move each corner independently. This lets you precisely align floor plans, historic maps, drone imagery, and other images with the underlying map without requiring external georeferencing tools in most cases.

Note: Switching back from Free Transform to Keep Proportions resets all corner adjustments and restores the image to its original shape.

Adjusting Image Opacity

Adjust the image opacity to control how much of the underlying map is visible.

Lowering the opacity makes it easier to align the image with roads, buildings, and other map features, helping you position it more accurately.

Once the image is correctly aligned, you can increase the opacity to the desired level for the final result.

Visibility

You can control when an image layer is displayed based on user interactions or the current zoom level.

Visibility Rules

Visibility rules determine when an Image layer appears on the map. For example, an Image layer can be displayed:

• Always: The default setting; the Image layer is always visible.
• Map Home Only: Display the Image layer only when viewing the map home.
• Location Selected: Display the Image layer when specific locations are selected.
• Category Selected: Display the Image layer when one or more categories are selected.
• Any Location in Category Selected: Display the Image layer when any location in the selected category is selected.

You can combine multiple visibility rules to create dynamic map experiences.

Zoom-Level Visibility

Use Zoom-Level Visibility to display image layers only within a specific zoom range.

For example, you can display an aerial image when users are zoomed out, then automatically switch to a detailed floorplan as they zoom in. This helps present the right level of detail at every zoom level.

Interactivity

You can control how users interact with an Image Layer by configuring the Manage Interactivity settings.

Click and Tap Actions

Choose what happens when users click or tap an Image.

Available actions include:

1. Open Map Home
2. Open a Location to display its details
3. Open a Category to display its locations
4. Open an External Link
5. Do Nothing

When opening an external link, you can choose whether it opens:

• In a new tab
• In the same tab
• In a modal window

Managing Image Overlay Layers

From the layer list, you can:

• Show or hide a layer
• Zoom to the image overlay
• Edit layer settings
• Duplicate a layer
• Delete a layer
• Reorder layers to control how overlays are stacked on the map

Demo Map

Explore this interactive demo showcasing how image overlay layers can be used for a real estate development project.

Click the Phase 1 or Phase 2 overlay to open the corresponding category and view a more detailed site plan for that phase.

Each detailed view combines multiple image overlays to highlight different project elements, such as landscaping, dog parks, walking paths, and other planned amenities.

Frequently Asked Questions

Can I add multiple images to the same layer?

No. Each image overlay layer currently supports one image. To add additional images, create multiple image overlay layers.

Can I make an image partially transparent?

Yes. Use the opacity setting to control the transparency of the image.

Can I rotate and resize the image after uploading it?

Yes. Images can be moved, resized, and rotated at any time.

What types of images can I use?

You can upload common image formats such as PNG and JPG.

What are image overlays commonly used for?

Image overlays are commonly used for floor plans, event maps, historical maps, construction plans, and custom visualizations that need to be displayed on top of an interactive map.