Cómo crear un visor Leaflet con el evento Mouseover


En este tutorial veremos cómo crear un mapa básico Leaflet en el que incluiremos el evento mouseover.


El evento mouseover es un elemento de control gráfico que se activa cuando el usuario mueve o pasa el puntero sobre un objeto de activación, trata en mostrar una ventana emergente cuando el usuario pasa el mouse y ocultarla cuando el usuario se retira.

Lo primero que haremos será añadir leaflet a nuestro proyecto, basta con incluir la librería javascript y el css que nos proporciona leaflet:

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

Lo segundo serían los estilos de este mapa en particular, en este caso estamos obligando a que el mapa ocupe el 100% de la ventana, sin márgenes ni bordes:

						
<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
						
					

La tercera parte del código y esto ya va dentro de del cuerpo o body, corresponde al contenedor:

						
<div id="map"></div>
						
					

Inicializar el mapa en una ubicación predefinida y agregar la capa de OSM:

						
<script>
	var map = L.map('map').setView([24.40, -101.55], 5);
		 
	L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);
</script>
						
					

Utiliza las coordenadas con las que quieras inicializar el mapa, el segundo parámetro «5» corresponde al ZOOM inicial.

Cargamos el archivo js en nuestro archivo html:

						
var estados={
"type": "FeatureCollection",
"name": "estados",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "NOMBRE": "ZACATECAS", "CLAVE": "32" }, "geometry": { "type": "Point", "coordinates": [ -102.660557301378333, 23.289018882415519 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "NOMBRE": "AGUASCALIENTES", "CLAVE": "01" }, "geometry": { "type": "Point", "coordinates": [ -102.361937762217906, 22.006441075095609 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 3, "NOMBRE": "BAJA CALIFORNIA", "CLAVE": "02" }, "geometry": { "type": "Point", "coordinates": [ -115.110019167150824, 30.583745010423968 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 4, "NOMBRE": "BAJA CALIFORNIA SUR", "CLAVE": "03" }, "geometry": { "type": "Point", "coordinates": [ -113.665023982670618, 27.381312518857726 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 5, "NOMBRE": "CAMPECHE", "CLAVE": "04" }, "geometry": { "type": "Point", "coordinates": [ -89.958119404986519, 19.123487609765448 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 6, "NOMBRE": "COAHUILA DE ZARAGOZA", "CLAVE": "05" }, "geometry": { "type": "Point", "coordinates": [ -102.044038678442234, 27.295442971016371 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 7, "NOMBRE": "COLIMA", "CLAVE": "06" }, "geometry": { "type": "Point", "coordinates": [ -103.913372978180348, 19.14099369130588 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 8, "NOMBRE": "CHIAPAS", "CLAVE": "07" }, "geometry": { "type": "Point", "coordinates": [ -92.472911947228567, 16.485239951062965 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 9, "NOMBRE": "CHIHUAHUA", "CLAVE": "08" }, "geometry": { "type": "Point", "coordinates": [ -106.468939531034493, 28.808538061082686 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 10, "NOMBRE": "CIUDAD DE MEXICO", "CLAVE": "09" }, "geometry": { "type": "Point", "coordinates": [ -99.139387063262348, 19.276868299532453 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 11, "NOMBRE": "DURANGO", "CLAVE": "10" }, "geometry": { "type": "Point", "coordinates": [ -104.913398574484575, 24.923610402398197 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 12, "NOMBRE": "GUANAJUATO", "CLAVE": "11" }, "geometry": { "type": "Point", "coordinates": [ -101.012614352770129, 20.905432043354153 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 13, "NOMBRE": "GUERRERO", "CLAVE": "12" }, "geometry": { "type": "Point", "coordinates": [ -99.921825250934546, 17.668010870904993 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 14, "NOMBRE": "HIDALGO", "CLAVE": "13" }, "geometry": { "type": "Point", "coordinates": [ -98.887113077606386, 20.479556676499499 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 15, "NOMBRE": "JALISCO", "CLAVE": "14" }, "geometry": { "type": "Point", "coordinates": [ -103.613210997389558, 20.58078407192744 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 16, "NOMBRE": "MEXICO", "CLAVE": "15" }, "geometry": { "type": "Point", "coordinates": [ -99.645369115092535, 19.355957487048443 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 17, "NOMBRE": "MICHOACAN DE OCAMPO", "CLAVE": "16" }, "geometry": { "type": "Point", "coordinates": [ -101.878113286998541, 19.207096082118539 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 18, "NOMBRE": "MORELOS", "CLAVE": "17" }, "geometry": { "type": "Point", "coordinates": [ -99.074962327149649, 18.742077943542313 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 19, "NOMBRE": "NAYARIT", "CLAVE": "18" }, "geometry": { "type": "Point", "coordinates": [ -104.840853461218217, 21.804140169033644 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 20, "NOMBRE": "NUEVO LEON", "CLAVE": "19" }, "geometry": { "type": "Point", "coordinates": [ -99.814169395401223, 25.619109551364772 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 21, "NOMBRE": "OAXACA", "CLAVE": "20" }, "geometry": { "type": "Point", "coordinates": [ -96.430130162476985, 16.961446242250304 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 22, "NOMBRE": "PUEBLA", "CLAVE": "21" }, "geometry": { "type": "Point", "coordinates": [ -97.897588655292168, 18.54712749243987 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 23, "NOMBRE": "QUERETARO", "CLAVE": "22" }, "geometry": { "type": "Point", "coordinates": [ -99.845796403281327, 20.85517607121875 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 24, "NOMBRE": "QUINTANA ROO", "CLAVE": "23" }, "geometry": { "type": "Point", "coordinates": [ -88.127155685786249, 19.590442199148242 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 25, "NOMBRE": "SAN LUIS POTOSI", "CLAVE": "24" }, "geometry": { "type": "Point", "coordinates": [ -100.416508701715202, 22.58545988156834 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 26, "NOMBRE": "SINALOA", "CLAVE": "25" }, "geometry": { "type": "Point", "coordinates": [ -107.509116809792886, 25.001465778522913 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 27, "NOMBRE": "SONORA", "CLAVE": "26" }, "geometry": { "type": "Point", "coordinates": [ -110.798909832522725, 29.692322468906866 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 28, "NOMBRE": "TABASCO", "CLAVE": "27" }, "geometry": { "type": "Point", "coordinates": [ -92.593975193500341, 17.937681787384633 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 29, "NOMBRE": "TAMAULIPAS", "CLAVE": "28" }, "geometry": { "type": "Point", "coordinates": [ -98.640894372077582, 24.291011591911513 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 30, "NOMBRE": "TLAXCALA", "CLAVE": "29" }, "geometry": { "type": "Point", "coordinates": [ -98.168578167648263, 19.428547038515092 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 31, "NOMBRE": "VERACRUZ DE IGNACIO DE LA LLAVE", "CLAVE": "30" }, "geometry": { "type": "Point", "coordinates": [ -96.144743208332386, 18.677556738053056 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 32, "NOMBRE": "YUCATAN", "CLAVE": "31" }, "geometry": { "type": "Point", "coordinates": [ -88.921109349616756, 20.747097512740083 ] } }
]
}
						
					
						
<script src="js/estados.js"></script>
						
					

Lo añadimos como objeto GeoJSON en nuestro objeto map:

						
var estados = L.geoJson(estados).addTo(map);
						
					

Lo siguiente será generar el evento mouseover con la información del GeoJSON, cabe mencionar que siempre debemos tener en cuenta los campos y la estructura del GeoJSON, para lo anterior debemos realizar lo siguiente:

						
var estados = new L.geoJson(estados, {
	onEachFeature: onEachFeature
}).addTo(map);
			
function onEachFeature(feature, layer){
	layer.bindPopup("<b>CLAVE:"+feature.properties.CLAVE+"</b><br>"+feature.properties.NOMBRE+"")
	layer.on('mouseover', function (e) {
		this.openPopup();
	});
	layer.on('mouseout', function (e) {
		this.closePopup();
	});
};
						
					

Y para finalizar dejo todo el código fuente a continuación:

						
<!DOCTYPE html>
<html>
  <head>
	<title>Mouse Over</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
    	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
	<script src="estados.js"></script>
    <style>
	body { margin:0; padding:0; }
	#map { 
		position:absolute; 
		top:0; 
		bottom:0; 
		width:100%; 
	}
    </style>
 </head>
<body>
	<div id="map"></div>
<script>
	var map = L.map('map').setView([24.40, -101.55], 5);
	var osmLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		attribution: '© <a href="https://osm.org/copyright">OpenStreetMap<\/a> contributors'
	}).addTo(map);
	var estados = new L.geoJson(estados, {
		onEachFeature: onEachFeature
	}).addTo(map);

	function onEachFeature(feature, layer) {
		layer.bindPopup("<b>CLAVE:" + feature.properties.CLAVE + "</b><br>" + feature.properties.NOMBRE + "");
		layer.on('mouseover', function(e) {
			this.openPopup();
		});
		layer.on('mouseout', function(e) {
			this.closePopup();
		});
	}; 
</script>
</body>
</html>
						
					



Sobre el Autor


José Eduardo Sanchez Islas

Licenciado en Ciencias Geoinformáticas por la Universidad Autónoma del Estado de México, me fascina trabajar con los SIG, con cartografía digital y bases de datos, me divierto aprendiendo sobre nuevas herramientas y poniéndome retos de diferentes maneras de realizar procesos cartográficos. Me encanta viajar y conocer las diferentes culturas tanto en mi país (México), como por el mundo. He tenido la suerte de conocer varios países de Europa, Estados Unidos y Asia.


¿Eres desarrollador? Únete a la red