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: Drag a corner handle to resize the image.
• Rotate: Use the rotation handle to rotate the image and align it with the map.

Resize Mode

Use Resize Mode to choose how the image can be resized and aligned with the map.

• Keep Proportions (default): Resize the image while preserving its original proportions.
• Free Transform: Move each corner independently to precisely align the image with features on the map. This is useful for floor plans, site plans, historic maps, aerial imagery, and other images that need precise positioning.

Free Transform Options

When you select Free Transform, choose the option that best matches the viewing angle of your image:

• Top-down (default): Best for images viewed from directly above, such as floor plans, site plans, illustrations, scanned maps, and top-down aerial imagery. This mode provides flexible corner-by-corner alignment.
• Angled: Best for images captured at an angle or with visible perspective, such as oblique drone or aerial imagery. This mode preserves perspective while you adjust the image corners.

As a general rule, use Top-down for flat or overhead images and Angled when the image has noticeable perspective or pitch.

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

Image Name Display

By default, layer names are hidden. You can display the image layer name as a label in one of the following ways:

• On Hover: Display the label when users hover over any building in the layer.
• Always: Keep the label visible at all times.
• Zoom-Level Visibility: Display the label only within a specific zoom range.

On touch devices, press and hold a building to display the label.

Label Location

Use the Position Label Location button to choose where the label appears. Drag the map to position the label in the ideal location for the selected drawings.

Label Color

By default, the label background is white with black text. This provides a consistent appearance when multiple labels are visible at the same time.

You can also fully customize the label’s appearance using custom CSS, including the font, text size, background color, and text color.

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.