2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by Andy Gup
3 likes447 views
The document provides an overview of the Esri-Leaflet API, highlighting its lightweight nature, ease of use, and integration capabilities for creating mapping applications. It details coding patterns, features such as basemaps and feature layers, and compares Esri-Leaflet with the ArcGIS JavaScript API to assist developers in choosing the appropriate tool for their projects. The content is delivered by Andy Gup, a mobile developer and outreach team member at Esri.
![Leaflet Map Constructor
var map = L.map(“mapDiv”)
.setView([40, -96], 4);](https://image.slidesharecdn.com/andygupesrileaflet-151017152924-lva1-app6891/85/2015-FOSS4G-Track-Building-Lightweight-Mapping-Apps-with-Esri-Leaflet-by-Andy-Gup-14-320.jpg)
![Leaflet Map Constructor
var map = L.map(“mapDiv”)
.setView([40, -96], 4);
jQuery-style Chaining](https://image.slidesharecdn.com/andygupesrileaflet-151017152924-lva1-app6891/85/2015-FOSS4G-Track-Building-Lightweight-Mapping-Apps-with-Esri-Leaflet-by-Andy-Gup-15-320.jpg)
2015 FOSS4G Track - Building Lightweight Mapping Apps with Esri Leaflet by Andy Gup
- 1. Building lightweight mapping apps with Esri Leaflet Andy Gup, Esri
- 2. Agenda! Overview of Esri-Leaflet API Introduce basic coding patterns
- 3. Who am I? Andy Gup Mobile Developer Developer Outreach Team Practice what I preach U.S.F.S Volunteer Backcountry Ranger
- 4. Open Source mapping API Used by OpenStreetMap, Mapbox, Data.gov Small – just 33KB! Extensible thru plug-ins
- 5. Esri-Leaflet – a brief history Simplicity: Leaflet + ArcGIS Online + Services Goal is to be lightweight Grown in capabilities, contributors and stability Esri’s most popular open source project http://esri.github.io/esri-leaflet/
- 8. Dependencies Esri Leaflet 1.x -> Leaflet v0.7.x Esri Leaflet 2.x -> Leaflet 1.0.0-beta1 Github master branch -> Leaflet 1.0.x
- 9. Capabilities (Part 1 of 2) Layers –Base maps (of course!) –Feature Layer overlay –Custom Tile Layers (non-mercator) –Dynamic Map Layers –Image Map Layers –Clustering & Heatmaps
- 10. Capabilities (Part 2 of 2) Tasks - Query, Find, Identify FeatureLayer – display, editing ArcGIS Authentication Geocoding Geoprocessing Rendering
- 11. Basic Esri-Leaflet coding pattern L.esri.XYZ For example… L.esri.basemapLayer
- 12. Demo - Hello World
- 13. Leaflet Map Constructor Create map and manipulate L.map(<HTMLElement|String>, { options? });
- 14. Leaflet Map Constructor var map = L.map(“mapDiv”) .setView([40, -96], 4);
- 15. Leaflet Map Constructor var map = L.map(“mapDiv”) .setView([40, -96], 4); jQuery-style Chaining
- 16. Basemaps var layer = L.esri.basemapLayer('Topographic') .addTo(map);
- 17. Basemaps var layer = L.esri.basemapLayer('Topographic') .addTo(map); jQuery-style Chaining
- 18. Basemaps Streets Topographic NationalGeographic Oceans Gray DarkGray Imagery ShadedRelief Terrain
- 19. Basemaps – optional labels OceansLabels GrayLabels DarkGrayLabels ImageryLabels ImageryTransportation ShadedReliefLabels TerrainLabels
- 20. Demo - Hello World
- 21. FeatureLayer var featureLayer = L.esri.featureLayer({ url: “http://services.xyz.com…” }) .addTo(map);
- 23. Clustered FeatureLayer //Uses L.markercluster plugin var featureLayer = L.esri.clusteredFeatureLayer({ url: “http://services.xyz.com…” }) .addTo(map);
- 24. Demo - Clustered FeatureLayer
- 25. Heatmap FeatureLayer //Uses L.heat plugin var featureLayer = L.esri.heatmapFeatureLayer({ url: “http://services.xyz.com…”, radius: 12 }) .addTo(map);
- 26. Demo - Heatmap FeatureLayer
- 28. Demo – FeatureLayer Editing! You can add, update or delete
- 29. Demo – FeatureLayer Popups
- 30. Demo – Geocoding Control
- 31. Basic Renderer Inherits FeatureService’s renderer Defines a set of symbols used by graphics FeatureService’s Renderer
- 32. Renderer
- 33. Demo – Basic Renderer https://github.com/Esri/esri-leaflet-renderers
- 34. Smackdown! Esri Leaflet vs. ArcGIS JavaScript API
- 35. Who wins? No One! Choose the right API for the job.
- 36. ArcGIS API for JavaScript Officially maintained by a large team Supports most all ArcGIS functionality Many UI components Many helper components from Dojo
- 37. Esri Leaflet Need fast performance Integrating into existing apps Already familiar with Leaflet Simpler, focused toolset Want to leverage Leaflet plugins Easier integration into frameworks
- 38. Andy Gup, Esri Developer Evangelist http://www.andygup.net agup@esri.com @agup