Drawing Esri Feature service Layers to leaflet powered maps

In this post, we shall demonstrate how to load feature services created using ArcGIS online to leaflet powered maps using the Esri-Leaflet extension. The feature services will be loaded as a L.Esri.featureLayer variable object.

Things to note:

– User should have an ArcGIS Online account with organizational features i.e. an account that can create feature layers.

You can use your own feature layer url to replace the one in our example when practicing along.


Open your ArcGIS Online account, go to MY CONTENTS and select a feature layer (creation of feature layers in ArcGIS Online was covered in earlier posts in case you need a reference). For this example, we select the feature layer – ‘Africa populated cities’(red boxed in screenshot below). Click on the drop down button beside it and select View item details(see cursor finger on the screenshot).



Click the Share option  and check the box marked ‘Everyone’. This will unlock the layer and make it available for publication online. Once the layer is shared, scroll down to the Layers section- Click on the dropdown button and select Service URL (see cursor finger on screenshot below).



A new page will open and reveal the contents of the JSON file. Right click the browser window and Copy the URL of the file.

See screenshot below.




Within the script section, we write out the var for the featureLayer and paste the URL 
we copied earlier in the area highlighted.

  var Cities = L.esri.featureLayer({
    url: 'http://services6.arcgis.com/c9vYYUT5fnie2Ui6/arcgis/rest/services/Africa_populated_Cities
We bind pop-up display to the features 

Cities.bindPopup(function (feature) {
    return L.Util.template('<p>{address}<br>{country}<br>{city_popul}</p>', feature.properties);

Below is a screenshot and full text of our example. a   See live map by clicking:


Download the plain text version here-


 `Look up more references at Esri Leaflet Quickstart | Esri Leaflet

Thank you for following the blog.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s