Intro to Leaflet  |  Adding Data via Omnivore

Leaflet accepts GeoJSON data natively, and it can be loaded in a variety of ways. Here we are using the omnivore plugin to load the data into a native Leaflet L.geoJson() layer. Before the layer is added to the map, the data can be filtered, the layer styled and a function run on each feature. We will look at this in step 4. Again, after we have added the layer to the map we also add it to the layer control.

« Adding Basemaps (Tile Layers) Styling and Interaction »

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");

var url = "/gis-tutorials/tutorial-data/counties.topojson";

var counties = L.geoJson().addTo(map);

/*can put html inside here, this is one way you could add a legend*/
layerControl.addOverlay(counties, "Counties");

var cData = omnivore.topojson(url, null, counties);