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)

closed as off-topic by PolyGeo Mar 7 at 22:21

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

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.

  • 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 '15 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. – Sidney Gijzen Feb 4 '15 at 16:16
  • You're right. Sorry. Here comes the new link to JSFiddle – hoge6b01 Feb 5 '15 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. – Sidney Gijzen Feb 5 '15 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 '15 at 9:17

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