1

I have the following code to solve my workflow. But it does not work properly.

The problem of the map behaviour appears to be within the map.getZoom function at the end of the code. That function should only be working when train layer is toggled on. But for now the getZoom is reacting on zoom even the train layer is not activated.

For clarification: there are two train layers which actually are the same layers coming from the same resource both. The difference is that aach of them is linked to a different style. Depending on zoom level one layer is displayed and the other is not. The both are grouped to a LayerGroup to have them both displayed as one layer in the LayerControl.

I am not a Developer.

Desired performance:

  1. Opening the map with basemap active
  2. Panning/zooming around
  3. Toggle on the train layer in LayerControl
  4. Train layer icons are displayed differently depending on the map's zoom level

Actual performance:

  1. Opening the map with basemap active
  2. Zooming leads to displaying the train layer automatically --> Note: displays without layer being toggled on in LayerControl
  3. If layer is toggled on via LayerControl it shows iconTrain1 + iconTrain2 --> two icons visible
  4. Toggling off the layer in LayerControl removes the icons, but zooming in/out displays them again (again without being toggled on in LayerControl)

1 Answer 1

3

To check whether a layer is toggled you can use the hasLayer() method. You have to modify your getZoom function slightly to get it to work; I added an two extra variables (for clarity) and modified your if statement from

if (currentZoom <= 13){ //do something }

to

var hasTrainLayer1 = map.hasLayer(train1);
var hasTrainLayer2 = map.hasLayer(train2);
if (currentZoom <= 13 && hasTrainLayer2){ //do something }

The complete getZoom function with the new part included would look as follows:

//getZoom function to load layer depending on zoom level
map.on('zoomend', function () {
    var currentZoom = map.getZoom();
    var hasTrainLayer1 = map.hasLayer(train1);
    var hasTrainLayer2 = map.hasLayer(train2);

    if (currentZoom <= 13 && hasTrainLayer2) {
        map.removeLayer(train2);
        map.addLayer(train1);
    }
    if (currentZoom >= 14 && hasTrainLayer1) {
        map.removeLayer(train1);
        map.addLayer(train2);
    }

})

To solve the problem of displaying only of the two train layers depending on the map's zoom levels I added minZoom en maxZoom to the layer definitions.

var train1 = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
    useCors: false,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: icontrain1
        });
    },
    maxZoom: 13
}),
train2 = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
    useCors: false,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: icontrain2
        });
    },
    minZoom: 14
});

EDIT: updated my answer based on the updated JSFiddle provided in the comments below.

6
  • Thanks, this already helped a lot. And I guess the solution is quite near. But there's still something that does not work. I update the JSFiddle (link above) but when zooming out it's not performing the "map.removeLayer(train2); map.addLayer(train1);". Any hint?
    – hoge6b01
    Feb 4, 2015 at 11:30
  • You're welcome. Both JSFiddle links still lead to the old version... if you can update it, I'll be happy to take a look. Feb 4, 2015 at 16:16
  • You're right. Sorry. Here comes the new link to JSFiddle
    – hoge6b01
    Feb 5, 2015 at 8:04
  • It appears we had to check each layer separately with the hasLayer method. The culprit was that the combined hasLayer check (map.hasLayer(train1, train2);) it already returned false if one of the layers was disabled and thus it didn't pass your if statement on zooming. I updated my answer. I tested it and it works. Feb 5, 2015 at 10:07
  • Perfect! Works like charm! I extended it by adding one more zoom level and one more icon size resp. If someone's interested: JSFiddle
    – hoge6b01
    Feb 9, 2015 at 9:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.