1

I would like to set the level of visibility at the specified GeoJSON feature property.

As a continuation of this query: Leaflet distinguishing sublayers within one GeoJSON layer

Where I figured out how to set the radius for an individual GeoJSON feature.properties. Now I would like to set the zoom level for them.

For this purpose I read the stuff here:

https://stackoverflow.com/questions/40607766/leaflet-zoom-map-layer

Which is the closest to my problem. Regarding to the advice above I used the following code:

 var sitis = L.geoJSON(sitec, {
  style: function(feature) {
    if (feature.properties.Value === "2") {
    return {
        fillColor: "#ff7800",
        radius: 8,
        opacity:function(){
            if (zoom > 11) {opacity:0}
            else (zoom < 13) {opacity:1}
            },
        };
    }
    if (feature.properties.Value === "1") {
    return {
        radius: 4
        };
    }
},
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
label = String(feature.properties.Title)
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, {permanent: true, direction: "center", className: "my-labels"}).openTooltip(); //https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");
        layer.on({
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#b45501',
                });
            },
            mouseout: function () {
                this.setStyle({
                    'fillColor': '#ff7800',
                });
            }

        });
 }
    })
    .addTo(map);

But in the result I got blank page with console saying, that unexpected token has been noticed.

Another attempt was like this:

var sitis = L.geoJSON(sitec, {
style: function(feature) {
    if (feature.properties.Value === "2") {
    return {
        fillColor: "#ff7800",
        radius: 8
        };
    }
    if (feature.properties.Value === "1") {
    return {
        radius: 4
        };
    }
},
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
label = String(feature.properties.Title)
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, 
 {permanent: true, direction: "center", className: "my-labels"}).openTooltip(); //https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");
        layer.on({
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#b45501',
                });
            },
            mouseout: function () {
                this.setStyle({
                    'fillColor': '#ff7800',
                });
            }

        });
 }
    })
    .addTo(map);
    if(map.getZoom()<11{
    geoJsonLayer.eachLayer(function(layer) {
    if(layer.feature.properties.value == "1"){
   layer.setStyle({fillOpacity:0});
  }
});
   }

However here is the same situation.

My pure js code is based here: https://jsfiddle.net/Krukarius/tq5yfkc6/

My last trial was related to this query:

Leflet js style geojson layer according to zoom level

Where I created: function getWidth(w) { and next wrote code as follows:

function getWidth(w) {
return w > 2 ? 8 :
       w > 1 ? 6 :
       w > 0 ? 3 :
       0;
    }

  var currentZoom = map.getZoom();



  var sitis = L.geoJSON(sitec, {
style: function(feature) {
if (currentZoom <=14 {
    return: {
    weight: getWidth(feature.properties.Value),
    };
},
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
label = String(feature.properties.Title)
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, {permanent: true, direction: "center", className: "my-labels"}).openTooltip(); //https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");
        layer.on({
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#b45501',
                });
            },
            mouseout: function () {
                this.setStyle({
                    'fillColor': '#ff7800',
                });
            }

        });
  }
    })
    .addTo(map);

I try to set the specified zoom level for one of the properties.feature as per the radius value in my previous query from yesterday.

Does anyone know how to achieve it?

enter image description here

EDITED:

Returning to the 2nd attempt:

          var sitis = L.geoJSON(sitec).addTo(map);
    //... internal part of the code as above
    if(map.getZoom()<14){
         sitis.eachLayer(function(layer) {
    if(layer.feature.properties.Value == "1"){
   layer.setStyle({fillOpacity:0, opacity: 0});
  }
  });
 }
 else 
  { 
 layer.setStyle({fillOpacity:0.8, opacity: 1});
 }

I found, that it partially works. However it still doesn't solve the problem, because layer remains invisible at all zoom levels.

enter image description here

Your Answer

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

Browse other questions tagged or ask your own question.