Continuando con el proyecto del tema anterior Cómo crear mapas dinámicos con la API JavaScript LeafLet, vamos a ver como agregar un MiniMapa y una capa Geojson.

Requisitos previos

Antes de comenzar, asegúrate de tener tu estructura básica de proyecto con los siguientes archivos:

• index.html
• style.css
• script.js

Además, debes tener:

• La librería Leaflet.js incluida.
• Un visor de mapas funcionando.

---

1. Agregar el plugin MiniMap

Leaflet tiene una comunidad activa que ha creado muchos plugins para extender su funcionalidad. Uno de estos plugins es Leaflet-MiniMap, que permite mostrar un pequeño mapa auxiliar en una esquina del visor principal.

a. Agrega el CSS y JS del plugin MiniMap en tu index.html:

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="Leaflet-MiniMap-master/dist/Control.MiniMap.min.css">

    <script src="Leaflet-MiniMap-master/dist/Control.MiniMap.min.js"></script>    
    <script src="script.js"></script>

b. En tu archivo script.js, agrega el siguiente código para crear el MiniMap:

// Agregar mapa base
var carto_light = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {attribution: '©OpenStreetMap, ©CartoDB',subdomains: 'abcd',maxZoom: 24});

// Agregar plugin MiniMap
var minimap = new L.Control.MiniMap(carto_light,
    {
        toggleDisplay: true,
        minimized: false,
        position: "bottomleft"
    }).addTo(map);

Este código añadirá un pequeño mapa en la esquina inferior derecha del visor.

---

2. Agregar una capa en formato GeoJSON

Leaflet soporta de forma nativa la lectura y visualización de archivos GeoJSON, que son muy utilizados para representar datos geoespaciales.

a. Crea o descarga un archivo .geojson
Ejemplo: barrio.geojson

b. Incluye el archivo en tu proyecto en script.js:

// Configurar PopUp
function popup(feature,layer){
    if(feature.properties && feature.properties.BARRIO){
        layer.bindPopup("<strong>Barrio: </strong>" + feature.properties.BARRIO + "<br/>" + "<strong>Localidad: </strong>" + feature.properties.LOCALIDAD);
    }
}

// Agregar capa en formato GeoJson
L.geoJson(barrios).addTo(map);

var barriosJS = L.geoJson(barrios,{
    onEachFeature: popup
}).addTo(map);

---

Resultado

• El mapa principal mostrará tus datos del archivo GeoJSON.
• En la esquina inferior derecha tendrás un minimapa que te ayudará con la navegación y orientación.

Los archivos completos los encuentras aquí.

---

Puedes ver el paso a paso: