Adding a Web Mapping Service tile layer

Another type of tile layer that can be added to a Leaflet map is a Web Mapping Service (WMS) tile layer. WMS is a way to request and transfer map images over the Web through HTTP. It is an Open Geospatial Consortium (OGC) specification.

Tip

For detailed technical information on the WMS specification, see the OGC website: http://www.opengeospatial.org/standards/wms.

With an understanding of how to add tile layers, and having seen several examples, you may have noticed that none of the examples were of satellite imagery. The first WMS layer you will add to your map is the United States Geological Survey (USGS) Imagery Topo.

Like the L.tileLayer() function that we used previously, the L.tileLayer.wms() function takes a URL and a set of options as parameters. The following code adds the WMS layer to your map:

varusgs = L.tileLayer.wms("http://basemap.nationalmap.gov/ArcGIS/services/USGSImageryTopo/MapServer/WMSServer", {
layers:'0',
format: 'image/png',
transparent: true,
attribution: "USGS"
}).addTo(map);

The URL for the WMS was taken from the USGS website. You can find other WMS layers at http://basemap.nationalmap.gov/arcgis/rest/services. The options specified are the layer name, the format, the transparency, and the attribution. The layer name will be provided on the information page of the service you are connecting to. The format is an image, and the transparency is set to true. Since this layer covers the globe, and we are not putting any other layers underneath it, the transparency could be set to false. In the next example, you will see how setting the transparency to true allows another layer to become visible. Lastly, there is an attribution set to USGS. When you assign an attribution to a layer, Leaflet adds the text value in the lower-right corner of the map. It is important to use an attribution as it is similar to citing a source in text. If it is not your data, it is accepted practice to give credit where credit is due. Many times, it is also required by copyright. Since this layer is from the USGS, it is accredited in the attribution property of the layer.

Note

The attribution value can contain hyperlinks, as shown in the following code:

attribution: "<a href='http://basemap.nationalmap.gov/arcgis/rest/services'>USGS</a>"

Insert the WMS layer code into LeafletEssentials.html, and you should now have a map with satellite imagery. The following screenshot shows the satellite imagery loaded into Leaflet: