1

Problem

I would like to add points/shelterIcons when zooming to level 12 or more and remove them again when zooming out. If all the points were defined as a layer I could add/remove them with the function down below. But the points are in GeoJSON files. I don't know how to "handpick" them and put them in a layer.

Code

//=======================
//Define map and map size
//=======================

var map = L.map('map', {
    center: [55.676098, 12.568337],
    zoom: 7,
    minZoom: 2,
    maxZoom: 18,
    zoomControl: false
});

L.control.zoom({
     position:'bottomright'
}).addTo(map);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


//============
//Shelter icon
//============

var shelterIcon = L.icon({
    iconUrl: 'http://www.clker.com/cliparts/f/e/6/c/120743200840710503sleeping shelter white.svg.thumb.png',
    iconSize:     [20, 20], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
});

    //CENTERS VIEW WHEN USER CLICKS ON MARKER
function clickZoom(e) {
    map.setView(e.target.getLatLng(),map.getZoom());
};


//=============================
//Add GEOjson with feature info
//=============================

var RaslangenHalenRundt = L.geoJSON(RaslangenHalenRundt, {
      pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {icon: shelterIcon}).on('click', clickZoom);
  }, onEachFeature: onEachFeature
}).addTo(map);

var Kalmarsundsleden = L.geoJSON(Kalmarsundsleden, {
      pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {icon: shelterIcon}).on('click', clickZoom);
  }, onEachFeature: onEachFeature
}).addTo(map);

function onEachFeature(feature, layer) {
  var layerType = layer.feature.geometry.type;
  if (layerType == 'Point'){
    var PointPopupContent = feature.properties.name;
    layer.bindPopup(PointPopupContent);
  } else if (layerType == 'LineString') {
    var LinestringPopupContent = feature.properties.lengthdistance;
    layer.bindPopup("Route length: " + LinestringPopupContent + " km");
  } else {
    console.log('lengthdistance not present');
  }
}

    //WHEN USERS ZOOMS TO MORE THAN 12 THE SHELTERS APPEAR
map.on('zoomend', function() {
    if (map.getZoom() <12){
            map.removeLayer(shelterIcon);
    }
    else {
        //shelterMarkers.addTo(map);    
        map.addLayer(shelterIcon);
        }
});
  • Anyone with a suggestion? :) – Saud Oct 29 '17 at 16:20
2

You could use map.eachLayer() to find and remove specific Layers, but I think sectioning your geoJson into layer groups would be the cleanest since you are going to add and remove them repeatedly.

    var shelterPointsLayer = L.layerGroup();
    var everythingElse = L.layerGroup();

    function onEachFeature(feature, layer) {
      var layerType = layer.feature.geometry.type;
      if (layerType == 'Point'){
        layer.addTo(shelterPointsLayer);
      } else if (layerType == 'LineString') {
        layer.addTo(everythingElse);
      } else {
        console.log('lengthdistance not present');
      }
    }

    //Do not add your L.geoJson layers to the map. Add the layer groups instead
    everythingElse.addTo(map);
    //If your map starts at a zoom higher than 11 add the shelter points on map init
    shelterPointsLayer.addTo(map);

    //I changed the listener to 'zoom' so it will only fire on 12 or 11. This way it will only fire once when needed
    map.on('zoom', function() {
      if (map.getZoom() === 12){
        map.addLayer(shelterPointsLayer);
      }
    else if (map.getZoom() === 11){    
        map.removeLayer(shelterPointsLayer);
      }
    });
  • Thx. You suggestions makes sense. When I try to implement your suggestion I get the following error (using Google's Developer Tools): "Uncaught TypeError: Cannot read property 'addLayer' of undefined" and it's pointing at layer.addTo(everythingElse); – Saud Nov 7 '17 at 18:03
  • @Saud hmm...I'm not sure what the issue is. I made a working fiddle here. Maybe it will help? jsfiddle.net/jm22/jeq8v2tu/17 – jm22 Nov 7 '17 at 20:23
  • 1
    Got it working :) I had my L.geoJSON(...).addTo(map) at the beginning. Moved it after map.on('zoomend', ...) and it worked. Thx! – Saud Nov 19 '17 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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