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
npm install react react-dom leaflet
npm install react react-dom leaflet
Y después la librería Leaflet:
npm install react-leaflet
npm install react-leaflet
npm install react-leaflet
Y si necesitamos TypeScript (en mi caso sí) instalamos lo siguiente:
npm install -D @types/leaflet
npm install -D @types/leaflet
npm install -D @types/leaflet
Instalamos los iconos:
npm install leaflet-defaulticon-compatibility
npm install leaflet-defaulticon-compatibility
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
function Map({ latitud, longitud }: Props) {
<MapContainer center={[latitud, longitud ]} zoom={13} scrollWheelZoom={false}>
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
<Marker position={[latitud, longitud ]}>
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='© <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;
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='© <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}/>
<Map latitud={51.505} longitud={-0.09}/>
<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>,
const MapaDinamico = useMemo(() => dynamic(
() => import('@/components/elements/Map'),
{
loading: () => <p>Cargando...</p>,
ssr: false
}
), [])
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}/>
<Map latitud={51.505} longitud={-0.09}/>
<Map latitud={51.505} longitud={-0.09}/>
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.
Post Views: 19
Relacionado