CODEWITHSUNDEEP
leaflet
Jerome
Jerome

Reputation: 11

Leaflet: how to change map center and zoom level clicking on circleMarker?

I'm working on a map with a few circleMarkers. When a user is clickin on one of this circleMarker, I would like to center the map on this circleMarker and to zoom in. It works when I try this on multipolygon layers, but I didn't succeed on circleMarkers. Does anyone can help me?

Here is the code for my circleMarkers:

    <script>


    var map = L.map('map', { 
        center: [41.8, 12.5],
        zoom: 5,
        zoomControl:true, maxZoom:15, minZoom:4,
        });
var feature_group = new L.featureGroup([]);
var raster_group = new L.LayerGroup([]);

var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
});
basemap.addTo(map);


    function style1(feature) {
        return {
            weight: 2,
            radius: 10,
            opacity: 1,
            color: 'black',
            weight: 1,
            fillOpacity: 1,
            fillColor: 'red'
        };
    }                               

    L.geoJson(villes, {
        style: style1,
        pointToLayer: function (feature, latlng)
            {
                return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true });

            }           
            }
    )

                            .addTo(map)
                            .showLabel; 


</script>.

Here is a link to the complete map.

Thank you.

Upvotes: 0

Views: 3294

Answers (2)

Jerome
Jerome

Reputation: 11

I find the solution:

    function onClick(e) {map.setView(this.getLatLng(),15);}

    L.geoJson(villes, {
        style: style1,
        pointToLayer: function (feature, latlng)
            {
                return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick);

            }           
            }
    )
                            .addTo(zoom1)
                            .showLabel;

Thanks Stranded Kid for your help.

Upvotes: -1

Stranded Kid
Stranded Kid

Reputation: 1395

This can be achieved really simply. Let's assume marker points to your leaflet marker and map to your leaflet map.

Quick way (recommended)

marker.on("click", function(event) {
    map.setView(marker.getLatLng(), 16);
}, marker);

Here, I don't even compute the needed zoom level, because I assume leaflet will have to zoom to its max level anyway.

I could also have added my marker to a L.LayerGroup, even if the main point of a LayerGroup is to group multiple markers.

Anyhow, the more precise way

marker.on("click", function(event) {
    map.setView(marker.getLatLng(), map.getBoundsZoom(layerGroup.getBounds());
}, marker);

Note that the quick way will do it nicely too. The second solution might seem more precise but it also slower, and implies a use of LayerGroup which is not the way it has been designed to work (create a new layergroup for each marker).

Don't forget to take yout time reading the docs, it's well-designed and pretty easy to understand.

Upvotes: 3

Related Questions