0

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?

4
  • Is it map.getZoom or Map.getZoom ? Nov 21, 2023 at 6:59
  • If you map object is map, then map.setZoom(10) should work.
    – TomazicM
    Nov 21, 2023 at 9:00
  • It's map.setZoom(10) with the lower case m, and the map object is "map", but map.setZoom(10) is not working.
    – Zac
    Nov 25, 2023 at 5:59
  • In what way not working? Giving you error "map.setZoom is not a function"?
    – TomazicM
    Nov 27, 2023 at 9:35

1 Answer 1

0

I found out the answer was pretty silly. I just wasn't passing map as a parameter in the function, but it's all good and working now. Sorry for the dumb question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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