Book Image

Leaflet.js Essentials

By : Paul Crickard III, Paul Crickard
Book Image

Leaflet.js Essentials

By: Paul Crickard III, Paul Crickard

Overview of this book

Table of Contents (13 chapters)
Leaflet.js Essentials
About the Author
About the Reviewers

Multiple tile layers

In the previous example, you added a WMS layer and set the transparency to true. The reason you need to do this is because you can add multiple tile layers on top of each other, and with the transparency set to true, you will be able to see them all at the same time. In this example, you need to add the National Weather Service (NWS) radar mosaic WMS on top of the USGS satellite imagery.


The National Oceanic and Atmospheric Administration (NOAA) provides a list of several WMS layers; they are available at the following link:

The adding of extra WMS layers follows the same format as the previous example, but with a different URL, layer name, and attribution. Add the following code after the code for the satellite imagery in LeafletEssentials.html:

Varnexrad = L.tileLayer.wms("", {
format: 'image/png',
transparent: true,
attribution: "NOAA/NWS"

This code adds the NOAA WMS layer for the NWS radar mosaic. Note that the URL and layer have changed and the attribution is set to NOAA/NWS. The RAS_RIDGE_NEXRAD layer is a grid that displays values when they begin to exist. The name of the layer can be found on the NOAA website; you are not expected to remember that RAS_RIDGE_NEXRAD is the weather radar layer. There are large portions of the map with no data, and since we set the transparency to true, these blank spaces allow the satellite imagery to become visible. Your map should now show the satellite imagery with the radar mosaic overlaid, as in the following screenshot:

If you set the transparency to false, you allow the layer to draw on the entire map. Areas with no data are displayed as white squares and cover the satellite imagery underneath, as shown in the following screenshot:

WMS layers do not need to serve as base layers only; they can be used as additional data. This was shown in the previous example where you overlaid the radar on the satellite imagery. In this example, you used a satellite image. You can also use the OpenStreetMap tile layer from the first map. Again, just set the transparency to true. WMS layers can be added just like points, lines, and polygons, which is discussed in the following sections.