aebadirad / Leaflet.AutoLayers

A dynamic leaflet layers control that pulls from multiple mapservers and manages basemaps and overlays plus order
MIT License
31 stars 21 forks source link

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

Closed AnchorRen closed 8 years ago

AnchorRen commented 8 years ago

First, thank you for fix the mapServer problems !You do a really great job! :+1: 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

aebadirad commented 8 years ago

This should be properly fixed, with basemaps always appearing below overlays without the mapServers option being set.

Also fixed it so selected overlays now populates properly when not using mapServers option.