Librería: Leaflet
Descripción: El usuario pasa el mouse sobre la capa de barrios y el sistema muestra los datos de viviendas de cada barrio y una leyenda con la clasificación por colores según la cantidad de viviendas.
Archivo CSS
#map {
height: 80vh;
width: 100hw;
}
h1{
color:darkblue;
font-family: Verdana;
text-align: center;
}
select{
margin-bottom: 20px;
margin-left: 20px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
Archivo HMTL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<https://unpkg.com/leaflet@1.7.1/dist/leaflet.css>"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" type="text/css" href="mapa.css">
<link rel="stylesheet" type="text/css" href="Leaflet-MiniMap-master/dist/Control.MiniMap.min.css">
<link rel="stylesheet" type="text/css" href="Leaflet.Legend-master/src/leaflet.legend.css">
<title>Colombia</title>
<h1>Visita los sitios turisticos de Colombia</h1>
<select name="select-location" id="select-location">
<option value="-1">Seleccione un lugar</option>
<option value="4.651021,-74.099579">Bogotá</option>
<option value="4.791132,-73.995277">Cerro Los Guayabos</option>
<option value="6.636254,-73.223129">Barichara-Santander</option>
<option value="12.19602,-72.147218">Cabo de la Vela-La Guajira</option>
<option value="10.42278,-75.539217">Castillo San Felipe Cartagena-Bolivar</option>
<option value="2.265124,-73.794523">Caño Cristales-Meta</option>
<option value="3.233851,-75.168934">Desierto de Tatacoa-Huila</option>
<option value="6.233825,-75.167062">Guatape-Antioquia</option>
<option value="4.945885,-73.825740">Guatavita-Cundinamarca</option>
<option value="2.135151,-76.410226">Parque Purace-Cauca</option>
<option value="1.888593,-76.295127">San Agustín-Huila</option>
<option value="5.638118,-73.526864">Villa de Leiva-Boyacá</option>
</select>
</head>
<body>
<div id="map"></div>
<script src="<https://unpkg.com/leaflet@1.7.1/dist/leaflet.js>"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="Leaflet-MiniMap-master/dist/Control.MiniMap.min.js"></script>
<script src="Leaflet.Legend-master/src/leaflet.legend.js"></script>
<script src="layers/barrios.js"></script>
<script src="mapa.js"></script>
</body>
</html>
Archivo JavaScript:
// Crear la variable mapa con coordenadas de centro y zoom
let map = L.map('map').setView([4.639386,-74.082412],12)
// Agregar mapa base de OpenStreetMap
/*L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="<https://www.openstreetmap.org/copyright>">OpenStreetMap</a> contributors'
}).addTo(map);*/
// Volar a coordenadas de los sitios de la Lista desplegable
document.getElementById('select-location').addEventListener('change', function(e){
let coords = e.target.value.split(",");
map.flyTo(coords,13);
})
// Agregar mapa base para el Mini Mapa
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);
// Agregar escala
new L.control.scale({imperial: false}).addTo(map);
// 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 control para ver los datos al pasar el puntero
var info = L.control();
// Crear un div con una clase info
info.onAdd = function(map){
this._div = L.DomUtil.create('div','info');
this.update();
return this._div;
};
// Generar rangos de colores de acuerdo con el atributo o campo TOT_VIVIEN
function getColor(d) {
return d > 9000 ? '#113b71' :
d > 7500 ? '#294f7f' :
d > 6000 ? '#41628d' :
d > 4500 ? '#58769c' :
d > 2500 ? '#7089aa' :
d > 1000 ? '#889db8' :
d > 0 ? '#a0b1c6' :
'#ffffff';
}
// Crear la funcion para mostrar la simbología de acuerdo al campo TOT_VIVIEN
function style(feature) {
return {
fillColor: getColor(feature.properties.TOT_VIVIEN),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
// Crear la leyenda
const legend = L.control.Legend({
position: "bottomright",
collapsed: false,
symbolWidth: 24,
opacity: 1,
column: 1,
legends: [
{
label: "0 - 1000 Viviendas",
type: "rectangle",
color: "#a0b1c6",
fillColor: "#a0b1c6",
weight: 2
},
{
label: "1001 - 2500 Viviendas",
type: "rectangle",
color: "#889db8",
fillColor: "#889db8",
weight: 2
},
{
label: "2501 - 4500 Viviendas",
type: "rectangle",
color: "#7089aa",
fillColor: "#7089aa",
weight: 2
},
{
label: "4501 - 6000 Viviendas",
type: "rectangle",
color: "#58769c",
fillColor: "#58769c",
weight: 2
},
{
label: "6001 - 7500 Viviendas",
type: "rectangle",
color: "#41628d",
fillColor: "#41628d",
weight: 2
},
{
label: "7501 - 9000 Viviendas",
type: "rectangle",
color: "#294f7f",
fillColor: "#294f7f",
weight: 2
},
{
label: "Más de 9000 Viviendas",
type: "rectangle",
color: "#113b71",
fillColor: "#113b71",
weight: 2
}
]
}).addTo(map);
// Agregar la leyenda al mapa
legend.addTo(map);
// Agregar interactividad con los datos de GeoJSON
var barriosJS;
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
// Resaltar la capa al pasar el puntero
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
info.update(layer.feature.properties);
}
// Función para restablecer el estilo original
function resetHighlight(e) {
barriosJS.resetStyle(e.target);
info.update();
}
// Función para hacer zoom al hacer clic
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
// Función de información de la capa
var info = L.control();
info.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
// Actualizar la información de acuerdo con el puntero
info.update = function(props) {
this._div.innerHTML = '<h4>Total Viviendas por Barrio</h4>' +
(props ? '<b>' + props.BARRIO + '</b><br/>' + props.TOT_VIVIEN + ' viviendas</sup>'
: 'Pase el puntero por un barrio');
};
// Agregar el control de información al mapa
info.addTo(map);
// Agregar capa en formato GeoJson
barriosJS = L.geoJson(barrios,{
style: style,
onEachFeature: onEachFeature
}).addTo(map);
// Agregar atribucion
map.attributionControl.addAttribution('Viviendas en Bogotá © <a href="<https://www.dane.gov.co/>">DANE</a>');
Ver el paso a paso: