Esta vez vamos a continuar con el fichero geojson que llegamos a preparar en este post: Convertir shape a geojson. Este shape había sido previamente descargado y transformado desde osm. Así que lo que buscamos es crear un mapa interactivo web sencillo utilizando la librería Leaflet, una librería hecha en Javascript de muy poco peso, para mostrar información descargada desde OSM. Una vez tengamos lo básico vamos a publicarlo como si de una web se tratara en Github, para que todo el mundo tenga acceso y podamos compartir nuestro mapa. Vamos a explicar los básicos para que tengáis una plantilla que nos permita modificar el código y el mapa en siguientes posts.
El resultado que buscamos es este: Mapa web de ciudades de Europa.
Lo primero que os recomiendo es que os descarguéis esta plantilla que he preparado y la descomprimáis. Esto contiene lo mínimo para la publicación de un geojson mediante Leaflet.
Para realizar este proyecto recomiendo que utilicéis el software de Brackets. Es completamente gratuito y orientado al diseño web. Una vez descargado e instalado le damos a Archivo – Abrir Carpeta, y seleccionamos la carpeta de nuestro proyecto, quedando nuestro proyecto con la siguiente estructura:
La parte que más me gusta es que permite tener una vista dinámica de nuestra web, la cual va cambiando directamente según vamos modificando el código. Muy útil para los que no estamos acostumbrados a usar Javascript y tenemos que estar recargando la página una y otra vez. De esta forma la web y los estilos se irán mostrando en este visor sin tocar nada. Para activar este modo, hay que darla al rayo que aparece arriba a la derecha. Quedando así:
Los básicos de este proyectos son:
El fichero index.html: contiene el enlace a los ficheros leaflet.js y leaflet.css, los básicos para la librería leaflet.
<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>
Estos están descargados en local pero también se puede hacer su enlace a unos que se encuentran online. Si lo queréis publicar os recomiendo que pongáis los enlaces online, pero esta por si alguien no dispone de Internet y quiere hacer sus pruebas offline.
El fichero leaf-demo.js es el que va a contener la creación del mapa conteniendo lo siguiente:
var map = L.map( 'map', {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2
});
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 el fichero cities_europe.js nuestra información de puntos, similar a lo siguiente:
var geodata = {
"type": "FeatureCollection",
"features": [
....
};
Para la creación de este fichero cities_europe.js, lo unico que hemos hecho ha sido coger el fichero geojson, editarlo, añadir el texto: var geodata = y al final un ; De esta forma tendremos acceso desde nuestro código Javascript de manera sencilla.
La publicación la hemos realizado aprovechando el repositorio que teníamos en Github. Para ello he utilizando como explico en otros post, el cliente de escritorio de Github.
Creando una rama nueva con el el nombre de ghpages
Una vez seleccionamos este abrir en el explorador, asegurándonos que tenemos la rama de ghpages activa, veremos que nos aparecen los mismos ficheros que tuviéramos en el repositorio. Esto es porque al crear un branch nuevo estamos creando una copia alternativa de nuestro repositorio, en nuestro caso, esta rama la queremos para la publicación web, así que aquí situaremos los ficheros de nuestro y los subiremos a Github. Apareciendo así en Github, en la rama ghpages:
Ahora podrás acceder a esta web con el siguiente nombre: nombreCuenta.github.io/nombreRepositorio
Y como resultado, nuestro mapa operativo online: oscar9.github.io/masquesig/
Con esto tenemos la configuración mínima con nuestro mapa ya publicado. En próximos post explicaremos más detalladamente y ampliaremos el cómo hemos creado este mapa, modificando el código javascript que aparece en el leaf-demo.js, y añadiendo nuevas funciones y controladores al visor.
Para este post me he basado en este artículo publicado y sobretodo en los tutoriales de la web oficial de Leaflet.
másquesig 