aebadirad/leaflet.autolayers

A dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus order

Leaflet.AutoLayers

A dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus their order.

Getting Started

See this demo page for a full example or this barebones demonstration of the simpliest way to configure the plugin.

New! WMS support! Huzzah! Splits the WMS layers up for you so that you can turn them off/on and declare basemaps, automatically pulls layers. See this demo for an example.

Configuration Breakdown

The configuration is an object that is passed in as the first signature on the method call (L.control.autolayers()). The second is the standard Layers options object which is optional.

List of possible configuration keys:

• overlays: OPTIONAL - standard built control layers object as built statically here
• baseLayers: OPTIONAL - standard built control layers object as built statically here
• selectedBasemap: RECOMMENDED - determines which baselayer gets selected first by layer 'name'
• selectedOverlays: OPTIONAL - determines which overlays are auto-selected on load
• mapServers: OPTIONAL - but this is kind of the whole point of this plugin
  • url: REQUIRED - the base url of the service (e.g. http://services.arcgisonline.com/arcgis/rest/services)
  • baseLayers: RECOMMENDED - tells the control what layers to place in base maps, else all from this server go into overlays
  • dictionary: REQUIRED - where the published service list dictionary is (e.g. http://services.arcgisonline.com/arcgis/rest/services?f=pjson)
  • tileUrl: REQUIRED - (EXCEPT WMS) - the part that comes after the layer name in the tileserver with xyz coords placeholders (e.g. /MapServer/tile/{z}/{y}/{x} or /{z}/{x}/{y}.png)
  • name: REQUIRED - the name of the server, or however you want to identify the source
  • type: REQUIRED - current options: esri or nrltileserver
  • whitelist: OPTIONAL - ONLY display these layers, matches against both baselayers and overlays. Do not use with blacklist.
  • blacklist: OPTIONAL - DO NOT display these layers, matches against both baselayers and overlays. Do not use with whitelist.

Prerequisities

1. A recent browser (IE 10 or later, Firefox, Safari, Chrome etc)
2. Leaflet mapping library

That's it! It has its own built in ajax and comes bundled with x2js, you can drop both of these for your own with some slight modifications.

Installing

1. Clone
2. Include leaflet-autolayers.js and the accompanying css/images in your project where appropriate
3. Create your configuration and place L.control.autolayers(config).addTo(map) where you have your map implemented
4. And that's it!

Sample Configuration that pulls from the public ArcGIS and Navy Research Labs tileservers:

 var config = {
        overlays: overlays, //custom overlays group that are static
        baseLayers: baseLayers, //custom baselayers group that are static
        selectedBasemap: 'Streets', //selected basemap when it loads
        selectedOverlays: ["ASTER Digital Elevation Model 30M", "ASTER Digital Elevation Model Color 30M", "Cities"], //which overlays should be on by default
        mapServers: [{
            "url": "http://services.arcgisonline.com/arcgis/rest/services",
            "dictionary": "http://services.arcgisonline.com/arcgis/rest/services?f=pjson",
            "tileUrl": "/MapServer/tile/{z}/{y}/{x}",
            "name": "ArcGIS Online",
            "type": "esri",
            "baseLayers": ["ESRI_Imagery_World_2D", "ESRI_StreetMap_World_2D", "NGS_Topo_US_2D"],
            "whitelist": ["ESRI_Imagery_World_2D", "ESRI_StreetMap_World_2D", "NGS_Topo_US_2D"]
        }, {
            "url": "http://geoint.nrlssc.navy.mil/nrltileserver",
            "dictionary": "http://geoint.nrlssc.navy.mil/nrltileserver/wms?REQUEST=GetCapabilities&VERSION=1.1.1&SERVICE=WMS",
            "tileUrl": "/{z}/{x}/{y}.png",
            "name": "Navy NRL",
            "type": "nrltileserver",
            "baseLayers": ["bluemarble", "Landsat7", "DTED0_GRID_COLOR1", "ETOPO1_COLOR1", "NAIP", "DRG_AUTO"],
            "blacklist": ["BlackMarble"]
        }]
    };

Deployment

Make sure all your layers you include are of the same projection. Currently map projection redrawing based on baselayer is not implemented, so if you don't have matching layer projections, things will not line up properly.

Contributing

Contributions, especially for other map servers or enhancements welcome.

Versioning

For now it's going to remain in beta until the Leaflet 1.0.0 release. After that time a standard version 1.x will begin.

Authors

• Alex Ebadirad - Initial work, maintainer - aebadirad
• Diego Monteiro - *PRs: #9, [#8](#8 * - diegomonteiro
• Peter Smythe - PRs: [#13](#13 - petersmythe

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Houston Engineering, INC for the simple ajax utility
• x2js for parsing the WMS response to json

leaflet.autolayers's Issues

ESRI and NGS layers misaligned in simple.html(example)

Hi,
While playing with your examples I came across an issue I thought you might like to know about. Using Chrome (I haven't checked other browsers) both ESRI layers and the NGS move when they are added. The markers stay the same on the screen, but are now in the middle of the Pacific.

Uncaught ReferenceError: map is not defined

In _initMaps function, the map var is not defined on line 391 and 393.

Not compatible with recent browser versions?

line 502 has

_parseESRILayer: function(mapServer, layer, folder = false) {

which uses default parameters. While this is compatible with most browsers, it is quite a new addition to EMCA6.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Default_parameters#Browser_compatibility

Is it perhaps worth avoiding such features until the spec has been around for a while longer?

Or, even better, can anyone suggest a block of code which tests if this feature is available, and provide a fallback if it doesn't work?

there is a problem when add overlays don't use mapServers.

First, thank you for fix the mapServer problems !You do a really great job! 👍
The following is my problem :
when I add overlays and baseMap from outside,but not use mapServers.The overlays may be overlaied by the basemap.The follwing is my code;

var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    }),
    googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    }),
    googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    }),
    googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    });

var imagerySet = "Aerial"; // AerialWithLabels | Birdseye | BirdseyeWithLabels | Road
var bingKey = "LfO3DMI9S6GnXD7d0WGs~bq2DRVkmIAzSOFdodzZLvw~Arx8dclDxmZA0Y38tHIJlJfnMbGq5GXeYmrGOUIbS2VLFzRKCK0Yv_bAl6oe-DOc";

var bingAerial = new L.BingLayer(bingKey, {
    type: "Aerial"
});
var bingAerialWithLabels = new L.BingLayer(bingKey, {
    type: "AerialWithLabels"
});
var bingRoad = new L.BingLayer(bingKey, {
    type: "Road"
});
var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>';
var mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

var mapboxGrayscale = L.tileLayer(mbUrl, {
    id: 'mapbox.light',
    attribution: mbAttr
});
var mapboxStreets = L.tileLayer(mbUrl, {
    id: 'mapbox.streets',
    attribution: mbAttr
});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var baseLayers = {
    "OpenStreetMap": osm,
    "Mapbox Grayscale": mapboxGrayscale,
    "Mapbox Streets": mapboxStreets,
    "Google Streets": googleStreets,
    "Google Hybrid": googleHybrid,
    "Google Sate": googleSat,
    "Google Terrain": googleTerrain,
    "Bing Aerial": bingAerial,
    "Bing Hybrid": bingAerialWithLabels,
    //"Bing Birdseye":bingBirdseye,
    "Bing Road": bingRoad


};

var domains = new L.LayerGroup();
var cities = new L.LayerGroup();
var boundaries = new L.LayerGroup();

L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
    L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
    L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
    L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities),

L.tileLayer.wms('http://mrdata.usgs.gov/services/ds898?', {
    layers: 'domains',
    transparent: true,
    format: 'image/png'
}).addTo(domains),

L.tileLayer.wms('http://mrdata.usgs.gov/services/ds898?', {
    layers: 'boundaries',
    transparent: true,
    format: 'image/png'
}).addTo(boundaries);

var overlays = {
    "domains": domains,
    "boundaries": boundaries,
    "cities": cities,
};

var map = L.map('map', {
    zoom: 6,
    center: [39, -104]
});

var config = {
    overlays:overlays,
    selectedBasemap: 'OpenStreetMap',
    selectedOverlays: ["domains","boundaries"],
    baseLayers:baseLayers,
     /*mapServers: [{
        "url": "http://services.nationalmap.gov/arcgis/services/GlobalMap/GlobalMapWMS/MapServer/WmsServer?",
        "dictionary": "http://services.nationalmap.gov/arcgis/services/GlobalMap/GlobalMapWMS/MapServer/WMSServer?request=GetCapabilities&service=WMS",
        "name": "wms",
        "type": "wms",
        "baseLayers": []
    }]*/

};

var control = L.control.autolayers(config).addTo(map);

when I set the selectedOverlays: ["domains","boundaries"] , the two layers will be loaded , and then change the basemap. it works well. But when close this two layers, and then open them, they will be overlaied by the basemap. You can see nothing but the basemap.

but when use the mapServers load some layers , it works well.
Wish you can fix this problems! Thanks

mapServers is not returning layers to control

Currently I am just trying to pull back the layers from the service in the snippet below. Nothing is being return when I view the control in the DOM (also below). My leaflet version is 1.6.0. Can someone provide me some guidance on this issue?

`var config = {
selectedOverlays: [],
mapServers: {
"url": "http://services.arcgisonline.com/arcgis/rest/services",
"dictionary": "http://services.arcgisonline.com/arcgis/rest/services?f=pjson",
"tileUrl": "/MapServer/tile/{z}/{y}/{x}",
"name": "ArcGIS Online",
"type": "esri"
},

};

L.control.autolayers(config).addTo(map)`

Support i18n

Please implement i18n internationalization support for better customization of the system, if need be, I can lend a hand with Pull Requests.

continuousWorld settings not working

At leaflet-autolayers.js line 382, i was needed change follow code :

continuousWorld: mapConfig.continuousWorld ? mapConfig.continuousWorld : true,

to:
continuousWorld: mapConfig.continuousWorld != undefined ? mapConfig.continuousWorld : true,

Data input example:
{ "continuousWorld":false, "selectedBasemap":"World_Street_Map", "mapServers":[ { "url":"http://services.arcgisonline.com/arcgis/rest/services", "dictionary":"http://services.arcgisonline.com/arcgis/rest/services?f=pjson", "tileUrl":"/MapServer/tile/{z}/{y}/{x}", "name":"ArcGIS Online", "type":"esri", "baseLayers":[ "World_Street_Map" ] } ]}

Add Geoserver in Mapservers options

Hello,
I have a GeoServer server and want to add it in the options "Mapservers", is there any example of such integration?

Opacity Control - Using Bootstrap Popover

I suggest creating an opacity control for the layers using the Popover of the Boostrap library to enrich the functionality of AutoLayers.

Inspirations:

• Sample 1
• Sample 2

Update to latest leaflet version

Split between pre 1.x and post 1.x branches, update plugin for use on leaflet recent.

when mapServers is empty, where will have problems

you said the 'mapServers' is OPTIONAL,but when i set config
like this:
var config = {
overlays:overlays,
selectedBasemap: 'OpenStreetMap',
selectedOverlays: ["cities"],
baseLayers:baseLayers,
};
there will be a problem in leaflet-autolayers.js:397
ERROR is : Uncaught TypeError: Cannot read property 'length' of undefined