A lot of government agencies and other institutions make map layers available through ArcGIS Server map services. The United States Geological Survey’s National Map Program, for example, makes services available for adding basemap, topography, weather and other layers. These map layers can often be a useful addition to your own online maps and a relatively new JavaScript library from ESRI makes adding these layers to maps using Leaflet very easy.

Adding ArcGIS map services to your map

The first step to adding layers would be to download the JavaScript library at ESRI’s GitHub account here (the file is esri-leaflet.js in the dist folder). With this piece in hand, adding layers is easy.

Using the National Map as an example: browse to this link where you can see the different layers available. You can see that they offer several types of layers including tiled and dynamic map layers (feature layers will be covered in a future post). Tiled layers are static layers that have been pre-generated and dynamic layers, as you might guess, are generated dynamically. Adding both types of layers uses the same basic syntax:

L.esri.dynamicMapLayer(URL, {
  opacity : 1
}).addTo(map);

Where URL would be copied and pasted from the National Atlas web page. For our simple example we will add the Topo Base Map tiled layer and the NEXRAD weather dynamic layer from the National Atlas. And for no reason other than we like the way it looks, we will add a layer on coastal chlorophyll (2002) from the National Socio-Environmental Synthesis Center (at this link). The final map and code are below: