Add an image layer to a map

This article shows you how you can overlay an image to fixed set of coordinates on the map. There are many scenarios in which overlaying an image on the map is done. Here are few examples of the type of images often overlaid on maps;

  • Images captured from drones.
  • Building floorplans.
  • Historical or other specialized map images.
  • Blueprints of job sites.
  • Weather radar images.

Tip

An ImageLayer is a quick an easy way to overlay an image on a map. However, if the image is large, the browser may struggle to load it. In this case, consider breaking your image up into tiles and loading them into the map as a TileLayer.

Add an image layer

This sample shows how to overlay an image of a map of Newark New Jersey from 1922 on the map.


In the code above, the first block of code constructs a Map object. You can see create a map for instructions.

In the second block of code, an ImageLayer is created by passing a URL to an image and coordinates for the four corners in the format [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner].

Import a KML ground overlay

This sample shows how to overlay KML Ground Overlay information as an image layer on the map. KML ground overlays provide north, south, east, and west coordinates and a counter-clockwise rotation, where as the image layer expects coordinates for each corner of the image. The KML ground overlay in this sample is of the Chartres cathedral and sourced from Wikimedia.


The above code uses the static getCoordinatesFromEdges function of the ImageLayer class to calculate the four corners of the image from the north, south, east, west and rotation information from the KML ground overlay.

Customize an image layer

The Image layer has many styling options. Here is a tool to try them out.


Next steps

Learn more about the classes and methods used in this article:

See the following articles for more code samples to add to your maps: