Add Image Overlay

Try It Out

Zoom in to the marker and notice the opacity of the overlay image

Code

          var lyrFloor1;
          lyrFloor1 = L.imageOverlay('images/floorplan.png', 
              [
              [54.1772967493766, -6.337912380695343], 
              [54.17763269390858, -6.337487250566482]
              ]).addTo(map);
          lyrFloor1.setOpacity(0.9);
        

View the source of this page to see fully how the map is created. In this example notice:

• Layer for the floor plan
• imageOverlay used to specify a raster image as the source
• imageOverlay accepts co-ordinates to position the image. Bottom-left coordinates and top-right coordinates
• Transparency of the layer is set to 10% (0.9)

Next Example Previous