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?
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.

