Visitas: 1
Continuamos con el curso de mapas. En esta octava parte estaré mostrando como tener un mapa de las estaciones de servicio de Paraguay en la Avenida España usando Leaflet y con el plugin Turf.
Turf permite hacer operaciones geoespaciales (buffering, within, merge, union, etc) directamente desde el navegador.
En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_estaciones_servicio.
![Ejemplo estaciones de servicio Ejemplo estaciones de servicio](http://proyectosbeta.net/wp-content/uploads/2016/07/ejemplo_estaciones_servicio.png)
Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.
![Modificación del index.html Modificación del index.html](http://proyectosbeta.net/wp-content/uploads/2016/07/Modificación-del-index.html.png)
Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_estaciones_servicio
![Mapa inicial Mapa inicial](http://proyectosbeta.net/wp-content/uploads/2016/07/Mapa-inicial.png)
Debemos de crear un área de influencia o buffer de 300 metros a partir de la línea de la avenida y luego calcularemos los puntos (estaciones de servicio) que caen dentro de esa área usando la función within.
Necesitamos un archivo para agregar en nuestro mapa para poder hacer las operación de buffer y within.
Una vez descargado el archivo, creamos una carpeta plugins/Turf dentro de la carpeta leaftlet.
![Archivo js para las estaciones de servicio Archivo js para las estaciones de servicio](http://proyectosbeta.net/wp-content/uploads/2016/07/Archivo-js-para-las-estaciones-de-servicio.png)
Ahora agregamos ese archivo js en el index.html
<script src="libs/leaflet/plugins/Turf/turf.min.js" type="text/javascript" charset="utf-8"></script>
![Agregar archivo js en el index.html Agregar archivo js en el index.html](http://proyectosbeta.net/wp-content/uploads/2016/07/Agregar-archivo-js-en-el-index.html.png)
Ahora necesitamos las estaciones de servicio de Asunción (Paraguay) del proyecto OSM. Por suerte podemos obtener de una forma sencilla utilizando este sitio. El archivo GeoJSON de las estaciones de servicio pueden descargar de este link.
![Estaciones de Servicio de Asunción del proyecto OSM Estaciones de Servicio de Asunción del proyecto OSM](http://proyectosbeta.net/wp-content/uploads/2016/07/Estaciones-de-Servicio-de-Asunción-del-proyecto-OSM.png)
Ahora debemos de crear una carpeta Datos y colocar el archivo GeoJSON que recién descargamos.
![Archivo GeoJSON de las estaciones de servicio de Asunción - Paraguay](http://proyectosbeta.net/wp-content/uploads/2016/07/Archivo-GeoJSON-de-las-estaciones-de-servicio-de-Asunción-Paraguay.png)
Vamos a traer esos datos (estaciones_servicio.geojson) con una llamada AJAX, que resolveremos usando JQuery. Pueden descargar el archivo JQuery de este link y crear una carpeta como muestro en la imagen de abajo.
![JQuery JQuery](http://proyectosbeta.net/wp-content/uploads/2016/07/JQuery.png)
Ahora agregamos en el index.html el archivo JQuery.
![Agregamos en el index html el archivo JQuery.js Agregamos en el index html el archivo JQuery.js](http://proyectosbeta.net/wp-content/uploads/2016/07/Agregamos-en-el-index-html-el-archivo-JQuery.js.png)
Ahora vamos a descargar datos de la Avenida España de este link y colocar el archivo GeoJSON que recién descargamos.
![Archivo GeoJSON de una avenida Archivo GeoJSON de una avenida](http://proyectosbeta.net/wp-content/uploads/2016/07/Archivo-GeoJSON-de-una-avenida.png)
Ahora editamos el archivo MapaOSM.js
Agregamos las estaciones de servicio y les asignamos un circulo amarillo. También le agregamos una capa de la avenida España.
// Estilo de la estaciones de servicio.
var estaciones_servicio_style = {
radius: 5,
fillColor: "yellow",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.7
};
// Se obtiene las estaciones de servicio de Asuncion y alrededores.
var layer_estaciones_servicio;
$.getJSON("Datos/estaciones_servicio.geojson", function(data_estaciones_servicio){
layer_estaciones_servicio = L.geoJson(data_estaciones_servicio, {
pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, estaciones_servicio_style);
}
}).addTo(mapa);
// Layer de la Avenida Espanha.
var avenida_espanha;
$.getJSON("Datos/avenida_espanha.geojson", function(data_avenida){
var estilo = {
"color": "red",
"weight": 10
};
avenida_espanha = L.geoJson(data_avenida, {
style: estilo
}).addTo(mapa);
});
});
![Agregamos estilos y capa vectoriales con datos GeoJSON Agregamos estilos y capa vectoriales con datos GeoJSON](http://proyectosbeta.net/wp-content/uploads/2016/07/Agregamos-estilos-y-capa-vectoriales-con-datos-GeoJSON.png)
Refrescamos el navegador.
![Mapa con datos de las estaciones de servicio y avenida con estilos Mapa con datos de las estaciones de servicio y avenida con estilos](http://proyectosbeta.net/wp-content/uploads/2016/07/Mapa-con-datos-de-las-estaciones-de-servicio-y-avenida-con-estilos.png)
Ahora viene el geoprocesamiento. Vamos a añadir un buffer entorno a la línea formada por la avenida que vamos a seguir. Inicialmente este buffer tendrá un radio de 300 metros.
Creamos el buffer a partir de una feature collection (Geojson) y el resultado después de realizar la operación de geoprocesamiento será también una feature collection.
De este link pueden copiar la función operacion_buffer y luego agregamos esa función dentro del ajax.
![Agregar función operacion_buffer Agregar función operacion_buffer](http://proyectosbeta.net/wp-content/uploads/2016/07/Agregar-funcion-operacion_buffer.png)
Ahora refrescamos el navegador.
![Mapa mostrando las estaciones de servicio que están en un área de influencia de 300 metros Mapa mostrando las estaciones de servicio que están en un área de influencia de 300 metros](http://proyectosbeta.net/wp-content/uploads/2016/07/Mapa-mostrando-las-estaciones-de-servicio-que-están-en-un-área-de-influencia-de-300-metros.png)
Pueden observar que se muestra la información de todas las estaciones de servicio que están dentro del área de influencia de 300 metros de la avenida España.
Si tienen dudas o comentarios, háganlo.
Curso de mapas
Demo: Ejemplo estaciones_servicio
Código fuente: ejemplo_estaciones_servicio