Intro to Leaflet  |  Adding Basemaps (Tile Layers)

Basemaps are an important feature to most maps. Here we are using the raster OpenStreetMap HOT basemap. The Leaflet Providers plugin provides a great resource for available tile layers. Understand however that some tile layers require a key or have strict usage guidelines. This same method can be used to add WMS layers. Once we add the tile layer, we can then add it to the layer control we defined in step one.

 /*Easily add basemaps or baselayers with L.tileLayer wms layers can also be added with L.tileLayer.wms */

  var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team'
  }).addTo(map);

  layerControl.addBaseLayer(OpenStreetMap_HOT, "Streets");
« Basic Leaflet Map Adding Data via Omnivore »

Full Map Code

      
var map = L.map("map");

map.setView([40.3,-96.6], 5);

L.hash(map);

L.control.scale().addTo(map);

var layerControl = new L.control.layers(null, null).addTo(map);

/*Easily add basemaps or baselayers with L.tileLayer wms layers can also be added with L.tileLayer.wms */

var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);

layerControl.addBaseLayer(OpenStreetMap_HOT, "Streets");