Añadir una capa de datos


<!DOCTYPE html>

<html>

<head>

<title>Añadir una capa de datos</title>

<!-- Se referencia la hoja de estilos de JavaScript -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />

<!-- Se referencia el archivo JavaScript de Leaflet -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

<!-- Se establecen los estilos de ancho y alto del contenedor del mapa -->
<style>
#map {
	width: 960px;
	height:500px;
}
</style>

</head>

<body>

	<!-- Se crea el elemento contenedor del mapa -->
	<div id="map"></div>

<script>

	// Se crea un objeto mapa, se le asigna al elemento contenedor 'map' y se fijan su punto central y nivel de zum iniciales
	var map = L.map('map').setView([36.722, -4.420], 15);

	// Se añaden al objeto mapa las teselas de mapa a partir de OpenStreetMap y la información correspondiente de atribución 
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: 'Datos &copy; <a href="http://osm.org/copyright" target="blanck">Colaboradores de OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright" target="blanck">ODbL</a>) | Teselas <a href="https://github.com/gravitystorm/openstreetmap-carto" target="blanck">OSM Carto</a> &copy; Randy Allan y otros colaboradores (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.es" target="blanck">CC BY-SA 2.0</a>)'
	}).addTo(map);

	// Se define la variable 'historic_features' que contiene los datos GeoJSON
	var historic_features = {
    	"type": "FeatureCollection",
    	"features": [{
			"type": "Feature",
			"geometry": {
				"type": "Polygon",
				"coordinates": [[
					[-4.42428,36.71802],
					[-4.42352,36.71829],
					[-4.42388,36.71878],
					[-4.42461,36.71845]
					]]
			},
			"properties": {
					"Nombre": "Mercado de Atarazanas",
					"Descripción": "Mercado municipal central"
			}
    	},{
        	"type": "Feature",
        	"geometry": {
            	"type": "Point", 
            	"coordinates": [
                	-4.41942,
                	36.72007
            	]
        	},
        	"properties":{
            	"Nombre": "Catedral de Málaga",
            	"Descripción": "Principal templo cristiano de la ciudad"
        	}
		},{
			"type": "Feature",
			"geometry": {
					"type": "LineString",
					"coordinates": [
						[-4.42515, 36.72056],
						[-4.42506, 36.72081],
						[-4.42512, 36.72144],
						[-4.42409, 36.72291],
						[-4.42345, 36.72343],
						[-4.42076, 36.72437]
						]
			},
			"properties": {
				"Nombre": "Calle Carretería",
				"Descripción": "Calle del Centro Histórico"
			}
    	},{
        	"type": "Feature",
        	"geometry": {
            	"type": "Point",
            	"coordinates": [
                	-4.41569,
                	36.72132
            	]
        	},
        	"properties": {
            	"Nombre": "Alcazaba",
            	"Descripción": "Fortificación palaciega medieval"
        	}
    	}]
	};

	// Se añade la capa de datos GeoJSON con una opción para que muestre la propiedad "Nombre" de cada característica en una ventana emergente
	L.geoJson(historic_features, {
		onEachFeature: function(feature,layer) {
		layer.bindPopup(feature.properties.Nombre);
	}
	}).addTo(map)
	
</script>

</body>

</html>
Volver al tutorial