Curso sobre creación y desarrollo de mapas – Parte 8: estaciones de servicio

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

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificación del index.html
Modificación del index.html

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

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

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

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

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
Archivo GeoJSON de las estaciones de servicio de Asunción – Paraguay

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

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

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

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

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

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

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

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

(Visited 295 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*