1
votes

In leaflet, I can visualize the geojson layers using following script;

L.geoJSON('district.json', {
    style: myStyle,
    onEachFeature: function(feature, layer) {
       layer.bindPopup(feature.properties.name);     
  }
}).addTo(map);

The above code shows the features on the map and also show the name properties when clicked on map. But what I want is different. I want to hide the feature of the district.json on map, but It should be appear the popup content when I clicked on the feature position. I tried following style;

var myStyle = {
  fillColor: rgb(0,0,0,0),
  opacity: 0,
  strokeOpacity: 0,
}

This will hide the layers, but when I clicked on the map, nothing will popup. Is there any possible styles for this conditions?

2

2 Answers

1
votes

You can simply change the value of opacity to 0.01 so that the layer will disappear from the map but there still remaining the popup content. For this change your myStyle variable in following way;

var myStyle = {
  fillColor: rgb(0,0,0,0.01),
  opacity: 0.01,
  strokeOpacity: 0.01,
}
1
votes

You could use circle markers as following:

L.geoJSON('district.json', {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, {color: 'transparent', fillColor: 'transparent', radius: 20});
    },
    onEachFeature: function(feature, layer) {
       layer.bindPopup(feature.properties.name);     
    }
}).addTo(map);

This way, you add a transparent, non-visible circle marker for each feature. You can also try different radius values that will lead to larger or smaller clickable areas.