¡Pesado! Pero no tenías el mapa que ya querías? No, no lo tengo, el mapa anterior está bien, pero de vez en cuando da errores de time-out y eso me hace probar nuevas metodologías y técnicas para conseguir lo que quiero: un mapa completamente customizable pero asequible para el usuario medio/bajo (que somos la mayoría).
¿Por qué he elegido overpass-turbo ?
Si recordais , al hacer el mapa de uMap hacíamos una consulta a "algo". Pues bien, ese algo es overpass-turbo y tiene unas pequeñas posibilidades de personalización que vamos a intentar usar.
Lo primero es tener bien claro qué queremos mostrar en el mapa. Normalmente os he mostrado mapas de aparcamiento de mi ciudad, pero dado que ya ha surgido un nuevo proyecto que vuelve a tener en cuenta Parking:lane y parking:condition vamos a cambiar de tercio. Hoy os traigo un mapa de accesibilidad. Para hacerlo usaremos varias opciones. Antes de empezar un recordatorio simple: OSM es una base de datos, si los datos no están en ella...no los podremos mostrar de ninguna manera.Así que a meter datos de calidad a la base de datos y por ende al mapa. Queremos mostrar:
- -cruces de peatones sin señalizar
- -obstáculos en silla de ruedas
- -aceras por las que no se puede transitar en silla de ruedas
- -Tiendas accesibles
- -Tiendas no accesibles
- -Tiendas con su accesibilidad a mejorar
Para conseguir todo esto me voy a basar en un mapa que ya funciona, y lo más importante en unos datos muy muy trabajados como son los del Barrio de Llefià de Badalona, muy sensibilizados con la cuestión y con un mapa ya funcionando del que hemos extraído las consultas a realizar.
Sí, consultas, nosotros le vamos a pedir a la base de datos unas consultas y ella nos las facilitará en el mapa.
Primero: inicio de consulta :
/*
This has been generated by the overpass-turbo wizard.
The original search was:
“crossing=unmarked in Badalona”
*/
[out:json][timeout:35];
// fetch area “Badalona” to search in
{{geocodeArea:Badalona}}->.searchArea;
// gather results
(
Es decir [out:json][timeout:35]; (salida: un json) (tiempo antes de fracasar en suministrar los datos:35 segundos, si queremos suministrar más datos mejor darle algo de más tiempo, como por ejemplo un minuto -60-
Por lo que hace a localización {{geocodeArea:Badalona}}->.searchArea; es decir busca en Badalona, vale cualquier área que tenga nombre y esté definida en OSM, también podemos sacarlo a través del asistente (wizard) añadiendo in "ciudadqueyoquieradelimitar" a nuestra clave a buscar en OSM Ej: ref=L1 in Barcelona (nos mostrará la línea de metro L1, la única que en la ciudad de Barcelona tiene esa referencia)
Vamos a por las consultas
-cruces de peatones sin señalizar
// query part for: “crossing=unmarked”
node["crossing"="unmarked"](area.searchArea);
-obstáculos en silla de ruedas
// query part for: “"obstacle:wheelchair"=yes”
node["obstacle:wheelchair"="yes"](area.searchArea);
-aceras por las que no se puede transitar en silla de ruedas
// query part for: “wheelchair=no and highway=footway”
way["wheelchair"="no"]["highway"="footway"](area.searchArea);
-Tiendas accesibles
// query part for: “wheelchair=yes and shop=*”
node["wheelchair"="yes"]["shop"](area.searchArea);
-Tiendas no accesibles
// query part for: “wheelchair=no and shop=*”
node["wheelchair"="no"]["shop"](area.searchArea);
-Tiendas con su accesibilidad a mejorar
// query part for: “wheelchair=limited and shop=*”
node["wheelchair"="limited"]["shop"](area.searchArea);
Como habeis comprobado hay algunos elementos que son vías y otros que son nodos, los cuales tiene unas propiedades determinadas dadas por las etiquetas de osm, unas coincidencias (silla de ruedas=no y que a la vez sea una tienda) Que aquí no salgan relaciones no significa que no se puedan buscar con esta herramienta con el prefijo relation, donde leeis way o node.
Si sólo escribiéramos esto (le ponemos el final
out body;
>;
out skel qt;
Le damos a ejecutar y a ver qué sale.http://overpass-turbo.eu/s/ufP Un precioso mapa con todos los puntos y vías localizados...sin distinguir entre ellos. Muy poco útil.
Para arreglarlo lo vamos a tunear. ¿Cómo? pidiéndole a Overpass-turbo la aplicación de MapCss básica que entiende. Como podeis leer en la wiki entiende sólo código muy básico y se aleja de la creación de estilos como el de señales de tráfico (que era permitido con la implementación completa del estilo hecho en un lenguaje Mapcss más completo. Con lo cual tendremos cosas que funcionarán: podremos cambiar el icono, en vez de esa redonda, el tamaño del icono, el color de la línea, su continuidad. Pero por ejemplo, no podremos desplazar un elemento, el icono se pondrá encima, y sustituirá o aplastará al icono que haya en ese lugar (Overpass-turbo nos muestra osmcarto). Vamos a ello.
// print results
{{style:
node[crossing=unmarked]{
icon-width: 20;
icon-image: url('https://github.com/yopaseopor/accessibilitat/raw/master/icons/crossing_unmarked.png');
text: name;
}
node[obstacle:wheelchair=yes]{
icon-width: 20;
icon-image: url('https://github.com/yopaseopor/accessibilitat/raw/master/icons/obstacle_wheelchair_yes.png');
text: wheelchair:description;
}
way[wheelchair=no][highway=footway]{
color:red;
opacity:0.5;
text: wheelchair:description;
}
node[wheelchair=no][shop]{
icon-width: 20;
icon-image: url('https://github.com/yopaseopor/accessibilitat/raw/master/icons/wheelchair_no_shop.png');
}
node[wheelchair=yes][shop]{
icon-width: 20;
icon-image: url('https://github.com/yopaseopor/accessibilitat/raw/master/icons/wheelchair_yes_shop.png');
}
node[wheelchair=limited][shop]{
icon-width: 20;
icon-image: url('https://github.com/yopaseopor/accessibilitat/raw/master/icons/wheelchair_limited_shop.png');
text: wheelchair:description;
}
}}
Analicemos los datos
Tipo de elemento , clave y valor que ya hemos buscado, identificado y que queremos mostrar diferente
node[obstacle:wheelchair=yes]{
Tamaño del icono (es un nodo)
icon-width: 20;
Dirección del icono (se pueden eprsonalizar, en este caso hemos creado unos iconos para lo ocasión muy claros y sencillos que marcan cada clave de una forma diferente.
icon-image: url('https://github.com/yopaseopor/accessibilitat/raw/master/icons/obstacle_wheelchair_yes.png');
Muestra el texto de esa clave si la hubiere, en un globo de texto en el elemento
text: wheelchair:description;
¿El resultado? El que veis en http://overpass-turbo.eu/s/t4e , un mapa sobre accesibilidad bien completo, con etiquetas innovadoras. Y que os permite entender como se personalizan los diversos elementos de un mapa a mostrar ;)
Todo ello lo encontrareis en un repositorio de github llamado Accessibilitat
Cap comentari:
Publica un comentari a l'entrada