DEV Community

Integrating Next.js with Leaflet.js + Mapbox

Tushar saxena on December 05, 2020

Do you want to include interactive maps in your Nextjs application?Then you must have come across Leafletjs. Though Leafletjs is very simple to use...

Read full post

Fariz Akbar • Sep 28 '22

just a little add here for others wondering how to capture the position(lat,lng) after the marker is dragged,

i just added a ref to the marker and eventHandlers function, below is the full code

import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'

const markerRef = useRef(null)
const eventHandlers = useMemo(
        () => ({
            dragend() {
                const marker = markerRef.current
                if (marker != null) {
                    // setPosition(marker.getLatLng())
                    console.log(marker.getLatLng())
                }
            },
        }),
        [],
    )
 useEffect(() => {
        console.log(markerRef.current)
    }, [markerRef.current])

//////////////////////
/// in the html

<MapContainer center={[40.8054, -74.0241]} zoom={14} scrollWheelZoom={false} style={{ height: "400px", width: "100%" }}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
   <Marker
   eventHandlers={eventHandlers}
   position={[40.8054, -74.0241]}
   draggable={true}
   animate={true}
   ref={markerRef}
   >
       <Popup>
           Hey ! you found me
       </Popup>
   </Marker>
</MapContainer>

so that when the marker is moved, we will get the current position (lat,lng) of that marker

Saman Soroushnia • Nov 8 '22

Thanks alot , you saved me

Niels Gregers Johansen • Jan 8 '22

Fantastic post - really showing some useful insights - found it look for the windows SSR issue

Arevalo-dev • Jan 21 '22

wow, excelente tu publicacion me ayudo mucho a resolver el problema de ssr de windows!!!

tess hsu • May 28 '21

Hi I install but got ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
from file:///C:/Users/TESS/Documents/GitHub/ecoechange/front/node_modules/leaflet/dist/leaflet-src.js (1826:17)

I had tried lot method but still not fingure out, does it happend to you guys? and how to resolve it with react next js ? tks