I'm creating a Leaflet Map with circle markers designating specific plots of forest land across the U.S. When the user clicks on a marker, a popup shows up with information about the plot. Since the plot locations are nationwide, but the plots themselves are small, I want the map to zoom into the area where the plot is located when the user clicks on the circle marker.
Ultimately, I have GeoJSON files of the spatial data for each plot, which I want to load and add to the map when the user clicks on the corresponding circle marker. Ideally, if I could get this zooming to work, I would specify a unique zoom level for each plot as well.
I've tried adding .on("click", function() {map.setZoom(10)}) to layer in the pointToLayer function, so overall it looks like this:
function pointToLayer(feature, latlng, attributes){
var carboncredits = attributes[14];
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#B22222",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var attValue = Number(feature.properties[carboncredits]);
geojsonMarkerOptions.radius = calcPropRadius(attValue);
var layer = L.circleMarker(latlng, geojsonMarkerOptions);
var popupContent = createPopupContent(feature.properties, carboncredits);
layer.bindPopup(popupContent, {
offset: new L.Point(0,-geojsonMarkerOptions.radius)
});
layer.on('click', function() {
map.setZoom(10);
});
return layer;
}
It gives me an error that says "Map.setZoom is not a function".
I'm not sure if it is correct to try to add the on click function to the pointToLayer function, since I ultimately would like to set a specific zoom level for each feature. If not, where should I be looking to add it?
map.getZoom
orMap.getZoom
?map
, thenmap.setZoom(10)
should work.