¿Cómo agregar una capa Geojson con Leaflet?

🌍 Para agregar una capa GeoJson a tu proyecto con Leaflet sigue los siguientes pasos.

1. Incluir Leaflet en tu HTML:

1. Añade los enlaces a los archivos CSS y JS de Leaflet.

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

2. Crear el mapa: Configura el contenedor del mapa y crea una instancia del mapa.

<div id="map" style="height: 600px;"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
</script>

3. Añadir una capa base:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);

4. Cargar y agregar la capa GeoJSON: Si tienes un archivo GeoJSON, puedes cargarlo y agregarlo al mapa usando L.geoJSON.

var geojsonFeature = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-0.09, 51.505]
    },
    "properties": {
        "name": "A pretty CSS3 popup",
        "popupContent": "This is a pretty CSS3 popup. <br> Easily customizable."
    }
};

L.geoJSON(geojsonFeature).addTo(map);

Todo el detalle lo encuentras en el video, adicional te explico como agregar un mini mapa.