How to Create Map Backgrounds

Transparent maps with image and video backgrounds can create interesting geographical context on interactive maps. These background effects are achieved by placing a video or image behind a map and adjusting the opacity of the map - so that the video or image can be seen through the map.

Earlier this year Muxlabs released a Map on Video effect. This is just one effect in their Map Effects 100 collection of cool user interactions for Leaflet maps. In the demo of Map on Video a map of Las Vegas is overlaid on top of a video driving down Las Vegas Boulevard. An animated car marker shows the position of the car moving on the map as it drives down the street, while, in the background, you can actually watch as the video plays.

Codrops has now created a similar map effect which uses static images rather than a video. Simple Interactive Points Effect creates a static map with a number of map markers. As the user hovers over the marker the map becomes partly transparent and a photo of the marked location can be see through the map. When the user clicks on the marker the map becomes completely opaque and all you can see is the background image.

In effect a background page element replaces the usual marker information window or marker pop-up. When the map user clicks on a map marker instead of content being displayed in a marker pop-up it is displayed in place of the actual map.

The codrops effect uses a static map but this effect could easily be reproduced with an interactive map. Essentially all you need to do is create two page elements - one positioned exactly on top of the other. The page element for the map should be on top (use z-index on your page elements) and should have an opacity of '1'.

You can then adjust the opacity of the map by using event listeners on your map markers. When a user mouse-overs a marker you can adjust the opacity of the map element to '0.5' - so that the background image can be seen through the map. When the user clicks on the marker you can use the event listener to adjust the opacity of the map holding element to '0' - so that the map is now completely transparent and all the user sees is the image background.