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)

leafletjs.com

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?

ArcGIS REST Services

github.com/esri/esri-leaflet

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

Made with Slides.com

Esri Leaflet: An Introduction

  • 3,224

More from alaframboise