Leaflet map with multiple API data feeds from USGS, Socrata, Esri ArcGIS Online. View demo.
If you plan to query Socrata heavily, it is recommended you sign up for an API token at https://dev.socrata.com/.
Assuming you have your map
initialized and layers control created, load data from a GeoJSON endpoint in Socrata, translate each feature into a layer (circleMarker), bind a popup to the marker,and add it to the map like shown below.
$.getJSON("https://data.ct.gov/resource/v4tt-nt9n.geojson?&$$app_token=QVVY3I72SVPbxBYlTM8fA7eet", function(data) {
var geoJsonLayer = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 6,
fillColor: 'blue',
color: 'blue',
weight: 2,
opacity: 1,
fillOpacity: 0.7
}).bindPopup(feature.properties.name + '<br>' + feature.properties.district_name);
}
}).addTo(map);
controlLayers.addOverlay(geoJsonLayer, 'Public Schools (CT Open Data-Socrata)');
});
Esri-leaflet plugin allows you to load the data without using jQuery's getJSON
function.
var bikeRoutes = L.esri.featureLayer({
url: 'https://gis1.hartford.gov/arcgis/rest/services/OpenData_Community/MapServer/9',
style: function(feature) {
if (feature.properties.TYPE === 'Bike Lane') {
return {color: 'green', weight: 3 };
} else {
return { color: 'blue', weight: 3 };
}
}
}).addTo(map);
controlLayers.addOverlay(bikeRoutes, 'Bike Routes (Hartford Open Data-ArcGIS Online)');
- Pull Open Data into Leaflet Map with APIs Tutorial in Data Visualization for All book (http://DataVizForAll.org)
- Leaflet-esri example (http://github.com/jackdougherty/leaflet-esri) by Jack Dougherty
- Tim Stallmann, Mapping external GeoJSON data, http://savaslabs.com/2015/05/18/mapping-geojson.html
- Leaflet (see license)
- Esri Leaflet plugin (Apache 2.0)
- jQuery (MIT)