OnClick marker change map center position

Question

I have created a map with leaflet and have an array of 3 locations and for each location, I am creating a marker with a popup window.

Now I want to know how can I change the center of the map when I click on each map marker. Currently, the value is hardcoded but I want it to be dynamic.

How can something like this be accomplished?

import L from "leaflet";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import parse from "html-react-parser";

import logoFFB from "@/images/ffb.svg";

const Map = () => {
  const coordinates = [
    {
      id: 1,
      popup: `
        
          
            
          
          Lorem Ipsum
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula sapien, dignissim pretium nisl pharetra id.
          Maecenas venenatis blandit risus, eu faucibus lorem vehicula at. Aliquam finibus magna tellus, eu pharetra nibh vehicula sed.
        
      `,
      lat: 51.91662,
      lng: 4.4727,
    },
    {
      id: 2,
      popup: `
        
          
            
          
          Lorem Ipsum
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula sapien, dignissim pretium nisl pharetra id.
          Maecenas venenatis blandit risus, eu faucibus lorem vehicula at. Aliquam finibus magna tellus, eu pharetra nibh vehicula sed.
        
      `,
      lat: 51.92019,
      lng: 4.48006,
    },
    {
      id: 3,
      popup: `
        
          
            
          
          Lorem Ipsum
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus ligula sapien, dignissim pretium nisl pharetra id.
          Maecenas venenatis blandit risus, eu faucibus lorem vehicula at. Aliquam finibus magna tellus, eu pharetra nibh vehicula sed.
        
      `,
      lat: 51.911781,
      lng: 4.4696,
    },
  ];

  const CUSTOM_MARKER = `data:image/svg+xml;utf8,${encodeURIComponent(`
    
  `)}`;

  return (
    
      

      {coordinates.map((coordinate) => (
        
          {parse(coordinate.popup)}
        
      ))}
    
  );
};

export default Map;

Grzegorz T. · Answer

Add this entry to yout marker:

eventHandlers={{
  click(e) {
    const location = e.target.getLatLng();
    map.flyToBounds([location]);
  }
}}

EDIT

I thought you would guess how to pass the map :) Ok here you have all my code as I solved it.

import { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];
const zoom = 18;

const points = [
  {
    lat: 52.230020586193795,
    lng: 21.01083755493164,
    title: 'point 1'
  },
  {
    lat: 52.22924516170657,
    lng: 21.011320352554325,
    title: 'point 2'
  },
  {
    lat: 52.229511304688444,
    lng: 21.01270973682404,
    title: 'point 3'
  },
  {
    lat: 52.23040500771883,
    lng: 21.012146472930908,
    title: 'point 4'
  },
];

const MyMarkers = ({ map, data }) => {

  return data.map(({ lat, lng, title }, index) => (
    
      {title}
    
  ));
}

const MapWrapper = () => {
  const [map, setMap] = useState(null)

  return (
    

      

      

    
  )
}

export default MapWrapper;

And here are some other examples to use.

OnClick marker change map center position

1 Answers