Añadir mapas Open Street Maps con Leaftlet en React y también compatible con Next.js

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos crear un componente de Mapas compatible con Open Street Maps usando la librería Leaftlet en React.

Lo primero que tenemos que hacer es instalar la librería necesaria:

npm install react react-dom leaflet

Y después la librería Leaflet:

npm install react-leaflet

Y si necesitamos TypeScript (en mi caso sí) instalamos lo siguiente:

npm install -D @types/leaflet

Instalamos los iconos:

npm install leaflet-defaulticon-compatibility

Ahora podemos crear un nuevo componente llamado Map.tsx

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import "leaflet/dist/leaflet.css"
import "leaflet-defaulticon-compatibility"
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"


//Definimos los tipos de datos que va a recibir el componente en forma de interfaz
interface Props {
    latitud: number;
    longitud: number;
}

function Map({ latitud, longitud }: Props) {
    return (
        <MapContainer center={[latitud, longitud ]} zoom={13} scrollWheelZoom={false}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={[latitud, longitud ]}>
                <Popup>
                   CSS3 popup, customizable
                </Popup>
            </Marker>
        </MapContainer>
    );
}

export default Map;

Ahora hemos creado un mapa de ejemplo, para que funcione tendremos que poner:

<Map latitud={51.505} longitud={-0.09}/>

Si necesitamos que sea compatible con Next.js, tendremos que utilizarlo de la siguiente manera:

  const MapaDinamico = useMemo(() => dynamic(
    () => import('@/components/elements/Map'),
    {
      loading: () => <p>Cargando...</p>,
      ssr: false
    }
  ), [])

Construimos dinámicamente el mapa desactivando Server Side Rendering.

E importamos el mapa de esta forma:

<Map latitud={51.505} longitud={-0.09}/>