Esri-Leaflet with Leaflet Plugins
Esri-Leaflet is a fantastic library that will let you use ArcGIS Services with Leaflet. I won't go in to detail about Leaflet itself, you can read plenty about it online, but the main thing is that it has a very easy to understand API and a thriving community. It may not have all the bells and whistles that the ArcGIS API for JavaScript has to work with ArcGIS data, such as many of the ArcGIS widgets, but it does have a very extensive list of community maintained plugins and controls. I've talked about how to write a custom Leaflet control before.
These extensive plugin and control libraries can also be used pretty seamlessly with Esri-Leaflet as well, after all, it's just another plugin built on top of Leaflet and that opens a wide door of possibilities!
Swimming in Cache
Let's start with an easy one. Say for example you needed to add some sort of offline functionality to your webmap, such as storing the tiles in case you lose a connection. There's a plugin for that! This plugin also requires that you add PouchDB to your application. PouchDB is great as it makes it very easy to handle the little nuances involved with browser support for various storage options, especially important on mobile devices. I've written about using PouchDB for ArcGIS JavaScript apps before. For this plugin, all you have to do is add it via a script tag and magically it will start storing the tiles in a local database for you when you add a single useCache:true option the basemapLayer.
L.esri.basemapLayer('Topographic', {
useCache: true
}).addTo(map);Here is a demo. If you use something like the Chrome DevTools to view the IndexedDB for example, you can see the tile data being stored.
That is pretty cool and all you have to do is pass an option the basemapLayer. The Plugin extends the TileLayer and so does the basemapLayer in Esri-Leaflet, so you get this functionality for free.
Keeping it realtime
Another neat plugin for Leaflet is the realtime plugin. The realtime plugin is cool because it can do realtime by either working with a pub/sub service or by polling a service that will provide updates. It's flexible in this regard. Of course ideally you would want your service to return data in GeoJSON. Once you have added this plugin to your project, you can just add it like any other layer and when it's updated, have the map follow the latest location. For fun, in this example, we are drawing a line as the location is updated to trace it's route. Now you can feel like you're working with Jack Bauer!
var realtime = L.realtime({
url: 'https://wanderdrone.appspot.com/',
crossOrigin: true,
type: 'json'
}, {
interval: 3 * 1000
}).addTo(map).on('update', function(data) {
// trace the update path on the map
var coords = data.features.undefined.geometry.coordinates;
polyline.addLatLng(L.latLng(coords[1], coords[0]));
map.fitBounds(realtime.getBounds(), {
maxZoom: 3
});
});Here is a working demo of this in action.
Baby, it's cold outside
There are a plenty of controls available for Leaflet as well. A control is usually distinguished from a plugin as a visual component that you can interact with or displays some information on the map (think widgets). Plugins usually provide some enhanced map functionality. A simple, yet useful control is the Weather widget. This widget requires jQuery and it's own css file, but once those are added, you can use it in your application.
L.control.weather({
lang: "es",
units: "metric"
}).addTo(map); Here is a demo of the widget.
Lean on your friends
This is only a tiny sample of how you can incorporate plugins and controls into your application. Leaflet has a very active community and there are lots of plugins and controls available for it. So if you are using the Esri-Leaflet plugin to work ArcGIS Online or ArcGIS Server services, you now have access to a whole variety of tools you just might find useful. Esri-Leaflet even has components that are separate plugins like a Heatmap FeatureLayer.
For more geodev tips and tricks, check out my blog.