Esri leaflet plugin for retrieving map service legends.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Leaflet@1.x + esri-leaflet@2.0.x (#4) Dec 20, 2016
example
spec Leaflet@1.x + esri-leaflet@2.0.x (#4) Dec 20, 2016
src Leaflet@1.x + esri-leaflet@2.0.x (#4) Dec 20, 2016
.editorconfig initial commit Jul 2, 2015
.gitignore gitignore Dec 20, 2016
.jshintrc symbols rendering Jul 13, 2015
Gruntfile.js Leaflet@1.x + esri-leaflet@2.0.x (#4) Dec 20, 2016
LICENSE clarify that leaflet 1.1.0 isnt supported yet (#6) Jul 4, 2017
README.md clarify that leaflet 1.1.0 isnt supported yet (#6) Jul 4, 2017
circle.yml Create circle.yml Jul 4, 2017
karma.conf.js symbols rendering Jul 13, 2015
package.json

README.md

Esri Leaflet Legend npm version CircleCI

Esri leaflet plugin for retrieving map service legends. Also aimed to cover the lack of similar API for FeatureServers and render the symbols from layer definitions. No assumptions on how you want to render the legend, you are simply getting the legend data(see format). There is a templating example in the demo.

The legend task for mapservers is ready & tested, feature layers part is developed separately and will be released later

Example (Leaflet 1.0.x)

var map = L.map('map', {maxZoom: 20}).setView([ 41.78408507289525, -88.13716292381285], 18);

L.esri.basemapLayer('Gray').addTo(map);

var waterNetwork = L.esri.dynamicMapLayer(
    'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer', {
    useCors: false
}).addTo(map);

waterNetwork.legend(function(error, legend){
    if(!error) {
        var html = '<ul>';
        for(var i = 0, len = legend.layers.length; i < len; i++) {
            html += '<li><strong>' + legend.layers[i].layerName + '</strong><ul>';
            for(var j = 0, jj = legend.layers[i].legend.length; j < jj; j++){
                html += L.Util.template('<li><img width="{width}" height="{height}" src="data:{contentType};base64,{imageData}"><span>{label}</span></li>', legend.layers[i].legend[j]);
            }
            html += '</ul></li>';
        }
        html+='</ul>';
        document.getElementById('legend').innerHTML = html;
    }
});

Legend Control

L.esri.Controls.Legend will render symbology for a single or multiple layers, loading the data and rendering it in a queue. That can take some time, but it's a lot of requests(one per each feature layer).

var map = L.map('map').setView([...], 12);
L.esri.Controls.legend([dynamicLayer, featureLayer], {position: 'topright'}).addTo(map);

You can also adjust the templates for legend output:

{
    listTemplate: '<ul>{layers}</ul>',
    layerTemplate: '<li><strong>{layerName}</strong><ul>{legends}</ul></li>',
    listRowTemplate: '<li><img width="{width}" \
                               height="{height}" \
                               src="data:{contentType};base64,{imageData}">\
                           <span>{label}</span>\
                      </li>',
    emptyLabel: '<all values>'
}

Legend task

var f = new L.esri.Layers.FeatureLayer('/some/arcgis/rest/services/xxx/FeatureServer/0', {}).addTo(map);
f.legend(function(error, legend) {  /* same format as /legend API */  });
// or
var m = L.esri.Services.MapService('some/MapServer/', {});
m.legend(function(error, legend) {  /* same format as /legend API */  });

Approach with symbols

For featureservers(and ArcGIS servers <= 10.0 with no legend API) I want to mimic the API with the data taken from layer definitions. So the symbols have to be rendered into <canvas> and exported as base64. But esriPMS and esriPFS symbols are problematic: I can't get CORS patterns to work, no solution with avoiding cacheing or <img crossOrigin=''> seem to work. Suggestions are appreciated.

esriST is not implemented yet - cannot find a working example.

Development Instructions

Make sure you have the Grunt CLI installed.

  1. Fork and clone
  2. cd into the esri-leaflet-legend folder
  3. Install the dependencies with npm install
  4. run grunt from the command line. This will create minified source, run linting, and start watching the source files for changes.
  5. Make your changes and create a pull request

Dependencies

Licensing

MIT