Esri Leaflet: An Introduction
Allan Laframboise
slides.com/alaframboise
Agenda
- Leaflet
- Esri Leaflet
- Plugins
Leaflet
Small, simple, light-weight JavaScript mapping library
Library, not a Framework
Open Source
Extensible
What can you do with it?
- Display map tiles
- Zoom and pan
- Render markers and layers (GeoJSON)
- Symbolize and color layers (CSS)
- Show popups
- Handle events
- ...
What do you need?
- Basemap (url to tiles)
- GeoJSON (data)
How to get started?
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script>
var map = L.map('map').setView([45.548, -122.632], 11);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
</html>
Leaflet Plugins
Esri Leaflet
Plugin for accessing ArcGIS Services
ArcGIS Online and Server Services
What can you do with it?
- Display ArcGIS basemaps and tiles
- Zoom and pan
- Render FeatureLayers (vector layers)
- Symbolize and color layers
- Show popups with feature attributes
- Handle events
- ...
What else can you do?
- Make requests to ArcGIS REST Services
- Tasks: Query, Find, Identify...
- Get Time-based data
- Convert ArcGIS JSON to GeoJSON
- Fetch feature collections
- ...
How does it work?
How do you get started?
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
<script>
var map = L.map('map').setView([45.548, -122.632], 11);
L.esri.basemapLayer('Streets').addTo(map);
</script>
Basemap
<script>
L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0'
}).addTo(map);
</script>
FeatureLayer
Styling
var layer = L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0',
style: function (feature) {
if(feature.properties.TOTPOP_CY < 1000){
return {color: 'green', weight: 2 };
} else if(feature.properties.TOTPOP_CY > 1000 && feature.properties.TOTPOP_CY < 10000){
return { color: 'yellow', weight: 2 };
} else if(feature.properties.TOTPOP_CY > 10000) {
return { color: 'red', weight: 2 };
}
}
});
layer.addTo(map);
Esri Leaflet Plugins
Renderers
<!-- Load Esri Leaflet Renderers -->
<script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet-renderers/0.0.1-beta.3/esri-leaflet-renderers.js"></script>
L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0'
}).addTo(map);
Popups
var layer = L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0'});
layer.bindPopup(function (feature) {
return L.Util.template('<p><b>{NAME}</b><br>POPULATION: {TOTPOP_CY}</p>',
feature.properties);
});
layer.addTo(map);
Geocoder
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet.esri.geocoder/1.0.2/esri-leaflet-geocoder.css">
<script src="//cdn.jsdelivr.net/leaflet.esri.geocoder/1.0.2/esri-leaflet-geocoder.js"></script>
...
var searchControl = L.esri.Geocoding.Controls.geosearch().addTo(map);
var results = L.layerGroup().addTo(map);
searchControl.on('results', function(data){
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
Geoprocessing
<script src="//cdn.jsdelivr.net/leaflet.esri.gp/1.0.2/esri-leaflet-gp.js"></script>
...
var gpService = L.esri.GP.Services.geoprocessing({
url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons",
useCors:false
});
var gpTask = gpService.createTask();
gpTask.setParam("Drive_Times", "1 3 5");
var driveTimes = L.featureGroup();
map.addLayer(driveTimes);
layer.bindPopup(function (feature) {
return L.Util.template("<p><b>{NAME}</b><br>POPULATION: {TOTPOP_CY}</p><a href='#' onclick='getDriveTime(" + feature.id + ");'>Show Drive Times</a>", feature.properties);
});
function getDriveTime(id) {
var f = layer.getFeature(id);
driveTimes.clearLayers();
gpTask.setParam("Input_Location", f._popup._latlng)
gpTask.run(driveTimeCallback);
}
function driveTimeCallback(error, response, raw){
driveTimes.addLayer(L.geoJson(response.Output_Drive_Time_Polygons));
}
What's not there?
- Deep integration with ArcGIS
- Visual controls (ArcGIS JS Dijits)
- Limited geometry operations
- Smart mapping
- Vector tiles (v2.0) and 3D
- Support for projected data (v2.0)
- ArcGIS Web AppBuilder & Templates
- Webmap support
- Dojo
Roadmap
- Plugins
- esri-leaflet-demographic-layer
- esri-leaflet-routing
- Esri-Leaflet 2.0
- Support for Leaflet 1.0
- Vector tile support
- Layer ordering
- Handling of large number of shapes
Need more help?
What's next?
- Deeper dive into the codebase
- Debugging
- Contributing code
- More plugins...
Thank you!
Allan Laframboise
Esri Leaflet: An Introduction
By alaframboise
Esri Leaflet: An Introduction
- 3,202