Esri Leaflet: Advanced Topics

Allan Laframboise

slides.com/alaframboise

Agenda

  • Core Classes

  • Authentication

  • Debugging

  • Contributing

  • Plugins

Esri Leaflet

  • Plugin for accessing ArcGIS Services

  • Built on top of Leaflet

What can it do?

  1. Display ArcGIS basemaps and tiles
  2. Zoom and pan
  3. Symbolize FeatureLayers (vector layers)
  4. Show popups with feature attributes
  5. Handle events
  6. Everything else Leaflet does...

What else can it do?

  1. Tasks: Query, Find, Identify...
  2. Get Time-based data
  3. Convert ArcGIS JSON to GeoJSON
  4. Fetch feature collections
  5. Authenticated and proxied requests

ArcGIS REST Services

How does it work?

  • Extends Leaflet classes
  • Provides new classes (functionality)

L.esri.xxx Classes

ArcGIS Basemaps

L.esri.basemapLayer -> L.TileLayer

ArcGIS Dynamic MapLayers

ArcGIS FeatureLayers

github.com/esri/esri-leaflet/src

Accessing Secure Services

  • ArcGIS Online or Server Feature Services
  • Accessing data/services hosted in portals
  • Premium Services/Content

 

Registering Apps

  1. Go to developers.arcgis.com
  2. Register a new app
  3. Add redirect URIs
  4. Use ID

Accessing the Source

  1. CDN
  2. npm
  3. Bower
  4. Fork and Clone

CDN References

<html>
<head>
  <meta charset=utf-8 />
  <title>Showing an ArcGIS basemap</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
  <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

  <!-- Complete Build -->
  <!--script src="http://cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script-->

  <!-- Core Build -->
  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/builds/core/esri-leaflet-core.js"></script>

  <!-- Basemaps Only Build -->
  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/builds/basemaps/esri-leaflet-basemaps.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  var map = L.map('map').setView([37.78, -92.85], 4);

  L.esri.basemapLayer('Streets').addTo(map);
</script>

</body>
</html>

Browser Debugging

Code Map

Debugging Locally

  1. Fork and Clone
  2. npm install (dist)
  3. npm run serve
  4. sample.html

Custom Builds

  1. esri-leaflet.js
  2. Comment exports

Plugins and Extensions

  • Renderers
  • Cluster
  • Heatmap
  • Draw/Edit
  • Proj4Leaflet

Version Compatibility

Esri Leaflet 1.0.0 + Leaflet 0.7.x 

Esri Leaflet 2.0.0-beta 6 + Leaflet 1.0-beta 1

What's coming?

  • Vector Tile support
  • Fractional zooming
  • Better projection support
  • Demographic data plugin
  • Webmaps support?

Ways to participate?

  1. Issues
  2. Bug fixes
  3. Samples
  4. Plug-ins

Thank you!

Allan Laframboise

Made with Slides.com