Vamos a continuar la parte que hace referencia al código de nuestro visor Leaflet, siguiendo el post anterior: Mapa interactivo web con Leaflet para mostrar un geojson, editado con Brackets y publicado en Github
Lo primero y más importante, tener nuestro proyecto bien estructurado, en nuestro caso quedaría así:
Aclarar rápidamente, que para crear cualquiera de los ficheros des lo que vamos a hablar, no es necesario ningún compilador ni ningún software especial para crearlos. Todos estos ficheros puedes crearlos con un fichero de texto normal y renombrando el nombre y extensión. Yo estoy utilizando el programa Brackets, pero podéis realizar estos ejemplos simplemente con el Bloc de Notas.
Tenemos todo sobre una carpeta llamada /Cities_Europe/. El único fichero que tenemos en el directorio raíz es el fichero index.html. Este es la web propiamente dicha, la cual contendrá el mapa y la cual tendremos que abrir si queremos ver la web que estamos haciendo. El código que contiene hace principalmente referencia a los ficheros JavaScript que vamos a utilizar (acabados en .js) y a las hojas de estilo tanto de nuestro mapa como de la web (acabadas en .css).
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='data/cities_europe.js'></script>
<script type='text/javascript' src='js/leaflet.js?2'></script>
<link rel="stylesheet" type="text/css" href="js/leaflet.css" />
<link rel="stylesheet" href="css/leaflet-styles.css" charset="utf-8" />
</head>
<body>
<div id="map"></div>
<script type='text/javascript' src='js/leaf-demo.js'></script>
</body>
</html>
Vemos que una web html consta de dos partes principales: el cabecero, que es lo que va entre <head> y </head>, y el cuerpo (contenido) entre <body> y </body>
En el cabecero es donde situamos esta relación con nuestros ficheros. Vemos que contiene dos referentes a la librería Leaflet, el fichero leaflet.js con el código de la librería, y el fichero leaflet.css con la hoja de estilos de la librería, estos dos ficheros son básicos para que funcione nuestro mapa. En la carpeta que situemos este leaflet.css debe de estár la carpeta de /images/ que viene con Leaflet, en caso de que vayamos a añadir marcadores al mapa.
Además, tenemos tres ficheros creados por nosotros: el que crea el mapa, la forma y contenido que tendrá (leaf-demo.js), el que contiene nuestros datos geojson (cities_europe.js) y el que contiene la hoja de estilos de cómo queremos que se muestre nuestro mapa en la web html o otros estilos que vamos a necesitar para títulos, o tamaños, etc (leaflet-styles.css).
Y ¿dónde insertamos realmente nuestro mapa?, pues lo hacemos dentro del código <body> en el index.html, incluyendo el elemento con id=’map’ en el:
<body>
<div id="map"></div>
<script type='text/javascript' src='js/leaf-demo.js'></script>
</body>
De esta forma estamos diciéndole el lugar que tendrá en la ewb, para luego ejecutar el script que rellenará ese espacio con nuestro mapa.
En nuestro caso queremos que este elemento con id ‘map’, ocupe toda la web, y para ello en nuestro fichero de estilos: leaflet-styles.css tenemos que introducir el siguiente código, el cual indica que no queremos margenes y que ocupe el 100% de ancho de pantalla.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Ahora queremos insertar nuestro mapa en ese hueco que hemos creado, así que vamos a crear un elemento de nombre ‘map’ que es el que se insertará en ese id=’map’ creado. Para ello vamos a nuestro fichero leaf-demo.js,
Lo primero, el mapa base, creamos el mapa e indicamos un par de parámetros como en qué latitud/longitud queremos que se sitúa al abrirse, el zoom inicial que queremos que tenga, o el mínimo zoom posible que podemos hacer (útil si utilizamos unas teselas que solo tienen para unos niveles de zoom específicos). Aquí puedes encontrar más posibles opciones. Lo básico sería así:
var map = L.map( 'map', {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2
});
Por ejemplo, si no queremos que aparezcan los botones de [ + | – ] arriba a la izquierda de nuestro mapa para hacer zoom, podemos desactivarlos añadiendo zoomControl: false, a nuestro código. Quedando así:
var map = L.map( ‘map’, {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2,
zoomControl: false,
});
También vamos a limitar el movimiento sobre el mapa solo a nuestra zona de estudio:
var bounds = L.latLngBounds([30, -10], [60, 75]);
var map = L.map( 'map', {
center: [50, 10],
minZoom: 2,
zoom: 5,
zoomControl: false,
maxBounds: bounds
});
Lo siguiente será indicar las teselas (la imagen del mapa) que queremos utilizar. En la web de Tiles – OpenStreetMap puedes encontrar varios servidores de teselas. Elegimos el que queremos y hacemos click derecho sobre uno de sus servidores y copiar enlace:
El resultado que buscamos es un enlace similar al siguiente (tal vez tengáis que editar a mano la parte final del enlace para que quede con el siguiente formato):
‘http://a.tile.openstreetmap.org/{z}/{x}/{y}.png’
En el código, asignamos estas teselas a nuestro mapa, indicando también la atribución de las teselas (aparecerá en nuestro mapa abajo a la derecha):
L.tileLayer( 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap'
}).addTo( map );
Es posible generar nuestras propias teselas que tengan nuestros propios estilos, etc. Esto lo realizaremos en otro post.
Podríamos crear una marca simple en el punto que hemos indicado que es nuestro centro de inicio en las coordenadas
L.marker([50, 10]).addTo(map);
Y ahora vamos a ver como agregar nuestros datos geojson.
La información principal está sacada de este tutorial por parte de Leaflet sobre Geojson.
Solo apuntar que para crear el fichero con los datos lo que hacemos es meter en una variable javascript todos los valores del geojson. La forma más sencilla es la siguiente:
Editamos el fichero geojson que tengamos y le añadimos al inicio del texto: var geodata = de esta forma indicamos que nuestra variable geodata será todo lo que sigue. Al final del fichero tenemos que añadir un punto y coma ;
De esta forma estaremos leyendo en javascript nuestro fichero geojson. Seguro que hay formas mejores de hacerlo pero esta me pareció la más sencilla para los que empezamos. Ahora guardamos nuestro fichero como cities_europe.js y listo. Ya podremos acceder a nuestros datos con la variable geodata dentro del código javascript, y eso es lo que hacemos a continuación.
Con el siguiente código indicamos el estilo que queremos que tengan nuestros puntos. En este caso, un buffer alrededor del punto.
var geojsonMarkerOptions = {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJson(geodata, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
Y listo, con esto tenemos mejor explicado nuestro visor web. Quedándonos como resultado en el código js lo siguiente:
var bounds = L.latLngBounds([30, -10], [60, 75]);
var map = L.map( 'map', {
center: [50, 10],
minZoom: 2,
zoom: 5,
zoomControl: false,
maxBounds: bounds
});
L.marker([50, 10]).addTo(map);
L.tileLayer( 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap',
}).addTo( map );
var geojsonMarkerOptions = {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJson(geodata, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
Y este es nuestro mapa:
Espero con esto completar más el post anterior, y aunque se queda corto para gente con conocimientos de javascript, espero que sirva de introducción para aquellos que no sabemos tanto del tema, pero podemos necesitarlo en algún momento.
másquesig 