#YoRenderizo #OpenLocalMap : OSM en tu localidad

Ya sabeis de mis intenciones que cada vez se acercan más al objetivo soñado de hacer el mapa que me salga de... el mapa que yo desee. Si la implementación de MapCSS completo a Overpass-turbo me ayudaría en mis logros aún estamos lejos de ello. Y hablo en plural, porque con la tontería y por otros motivos (el encontrar unas ediciones discutibles y controvertidas de una forma útil para la comunidad catalana) cada vez más  nos acercamos al hito de un mapa personalizado...y autónomo. Porque , más allá de mis delirios sobre señales de tráfico...y siendo prácticos, una administración local, sin mucho tiento (el que han tenido para hacerle un iframe a Google Maps - hay muchas, creedme) podría tener ese mapa personalizado que todos deseamos.
Y es entonces cuando KonfrareAlbert nos recuerda una herramienta, algo mayor ya, basada en el blog de Humitos y mejorada por él, para su población. Ya sabeis que yo conocimientos de programación 0. Mi pregunta es clara: se puede convertir esta herramienta en autónoma. No se lo ha planteado nunca en serio , todo sería probarlo. Su herramienta, basada en muchas otras , suministra:

• -Mapa centrado en la localidad (y con posibilidad de cambios de capas) (OpenStreetMap y Leaflet)
• -Muestra de PDI (Puntos de Interés, vamos, nuestros POIs) (Overpass)
• -Búsqueda en la localidad o bien en el resto del mundo (Nominatim)
• -Imágenes de Mapillary (en construcción) (Mapillary)
• -Recorridos personalizados por el municipio (Graphhopper)
• -Artículos sobre la localización (Wikipedia)
• -Mapa concreto , exterior , personalizable (ejemplo aparcamiento Overpass)
• -Enlaces (explica otros proyectos de OSM, personalizable 100%)
• -Modo experto (en construcción) (iD)
• -Explicación de todo el proyecto (personalizable 100%)

No está mal para una prueba de concepto delante de cualquier responsable de comunicación de una administración, del poder que herramientas basadas en OSM o de fomato libre y/o colaborativo pueden dar.Pero seguro que todo esto requerirá de algún tipo de infraestructura mínima, una máquina dedicada o algo así...Pues no! o sí... Bien. ¿Quien no tiene una cuenta de Github? ;)

¡Empezamos!

Para hacerlo fácil partiremos de un "fork", la replicación de un proyecto, para su mejora o reproducción. Muchas de las mejores aplicaciones de la historia nacieron de otras...que no lo llegaron a ser, pero que hicieron buena parte del camino. A partir de aquí tú y solo tú tendrá control sobre TU proyecto, desde tu cuenta de Github

Así que vamos a https://github.com/osm-catalan/openlocalmap y de allí hacemos un fork (sí, ya veis que esto no es más que un proyecto basado en otro proyecto que se basó en un tercero - y que en ninguno de los tres mi aportación es significativa , todo el mundo puede ayudar y aportar a la comunidad.)

Con nuesro fork lo primero es cambiarle el nombre al proyecto , con alguna referencia a la población sobre la que queremos que se centre el mapa. Por ejemplo, en mi caso "Vilanova i la Geltrú" (quedaos con este nombre, además de ser mi preciosa ciudad es la cadena que vamos a sustituir para adaptar el mapa a nuestras necesidades. También os mencionaré las coordenadas de la misma, por el mismo motivo que antes, deberemos centrar el mapa en algunos aspectos. Sus coordenadas son ([41.2214 , 1.7169], 15); (el 15 es el zoom base que usaremos). Lo del nombre del proyecto es importante, porque vais a tener que cambiar todas las URL referentes al proyecto ejemplo para que hagan referencia a vuestra propia versión

Sólo modificaremos como base dos archivos principalmente (en vuestro proyecto dadle la vuelta al mapa si fuere necesario, yo hablaré sólo de los mínimos)

El primero es index.html, el índice del mapa, el que contiene la guía al contenido estático. No voy a mencionaros dónde están situadas las líneas por si cambia el código y las líneas se mueven. Sólo os diré que debeis modificar las líneas dónde esté la cadena "Vilanova i la Geltrú" , personalizar los recorridos y cambiar la URL de la demo del F4map, ¿os habeis enterado? De nada, ¿verdad?

Os acompaño , para ir pasando por cada paso os recomiendo que busqueis la cadena MODIFICAR AQUÍ, que os dará una pista de cada línea que debeis modificar.

-Cambio de nombre
    <title>OpenStreetMap - Vilanova i la Geltrú</title>
-Cambio de nombre
<meta property="og:title" content="OpenStreetMap - Vilanova i la Geltrú" />
-Cambio de URL
    <meta property="og:url" content="https://osm-catalan.github.io/openlocalmap" />
-Personalización de miniatura
    <meta property="og:image" content="https://osm-catalan.github.io/openlocalmap/assets/img/preview.jpg" />
-Cambio de nombre
    <meta property="og:description" content="Mapa de Vilanova i la Geltrú amb cerca de punts d'interès i altra informació." />
-Añadir secciones en el menú, los dibujitos son Font Awesome Icons.
<li><a href="#parking" role="tab"><i class="fa fa-car"></i></a></li>
-Cambio de nombre
  <h1>Cerca local<br><small>a Vilanova i la Geltrú</small></h1>
-Cambio de nombre
  <p style="text-align:justify; margin-right:5px;">Des d'aquesta secció podeu fer cerques tan
          limitades a la zona de Vilanova i la Geltrú (cerca local) com a qualsevol lloc del Món. Per fer-ho
           cal introduir la vostra cerca a la caixa:</p>
-No sólo debes modificar el nombre de las rutas. Debes fabricarte las tuyas propias con Graphhopper, seleccionas recorrido y le das al botón de GPX después. El archivo restante lo subes a la carpeta assets/gpx de tu proyecto, sustituyendo los ya existentes. Y si quieres añadir alguno extra, copia una opción de las ya existentes en el código modificando lo que desees.
<option value='assets/gpx/track001.gpx' select>La Talaia</option>
<option value='assets/gpx/track002.gpx' select>Puig de l'Àliga</option>
<option value='assets/gpx/track003.gpx'>El Montgrós</option>
<option value='assets/gpx/track003.gpx'>Camí de Ronda de VNG a Sitges</option>
-Cambio de nombre
  <h1>Vilanova i la Geltrú a la Viquipèdia</h1>
-Cambio de categoría de Wikipedia
  <p><iframe name="Wikiciutat" width="100%" height="25000px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://ca.m.wikipedia.org/w/index.php?title=Categoria:Vilanova_i_la_Geltrú&mobileaction=toggle_view_mobile"></iframe>
-Mapa personalizado de Overpass, se consigue generando una consulta y dándole a "Exportar Mapa interactivo", copiando la URL kilométrica resultante que suele contener toda la consulta en sí.
  <p><iframe name="Aparcament" width="300px" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://overpass-turbo.eu/map.html?Q=%2F*%0AThis%20has%20been%20generated%20by%20the%20overpass-turbo%20wizard.%0AThe%20original%20search%20was%3A%0A%E2%80%9Cparking%3Acondition%3Aright%3Aresidents%3D*%E2%80%9D%0A*%2F%0A%5Bout%3Ajson%5D%5Btimeout%3A25%5D%3B%0A%2F%2F%20gather%20results%0A(%0A%20%20%2F%2F%20query%20part%20for%3A%20%E2%80%9C%22parking%3Acondition%3Aright%3Aresidents%22%3D*%E2%80%9D%0A%20%20node%5B%22parking%3Acondition%3Aright%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20way%5B%22parking%3Acondition%3Aright%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20way%5B%22parking%3Acondition%3Aleft%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20way%5B%22parking%3Acondition%3Aright%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20way%5B%22parking%3Acondition%3Aboth%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20%20%20way%5B%22amenity%22%3D%22parking%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20way%5B%22parking%3Alane%3Aboth%22%3D%22no_stopping%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%0A)%3B%0A%2F%2F%20print%20results%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0Aout%20body%3B%0A%0A%3E%3B%0A%0Aout%20skel%20qt%3B%7B%7Bstyle%3A%20%20%0A%0Away%5Bamenity%3Dparking%5D%7B%0A%0A%20%20icon-width%3A%2020%3B%0A%0A%20%20icon-image%3A%20url(%27https%3A%2F%2Fgithub.com%2Fyopaseopor%2Fbeta_style_josm%2Fraw%2Fmaster%2Ftraffic_signs_EUR%2FES%2FES_S17.png%27)%3B%0A%0A%20%20text%3A%20name%3B%0A%0A%7D%0A%0Away%5Bparking%3Acondition%3Aleft%3Dticket%5D%5Bparking%3Acondition%3Aleft%3Aresidents%3Dfree%5D%7B%0A%0A%20%20color%3Alime%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0Away%5Bparking%3Acondition%3Aright%3Dticket%5D%5Bparking%3Acondition%3Aright%3Aresidents%3Dfree%5D%7B%0A%0A%20%20color%3Agreen%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0Away%5Bparking%3Acondition%3Aboth%3Dticket%5D%5Bparking%3Acondition%3Aboth%3Aresidents%3Dfree%5D%7B%0A%0A%20%20color%3Ateal%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0Away%5Bparking%3Alane%3Aboth%3Dno_stopping%5D%7B%0A%0A%20%20color%3Ayellow%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0A%20%20%7D%7D"></iframe>

-Modificar localización , y cambio de nombre del mapa f4map
  <p style="text-align:justify; margin-right:5px;"><img hpace="5px" width="75px" height="75px" align="right" src="assets/img/f4map.png">El lloc web (demo) d'<b>F4Map</b> us permet recrear un escenari d'OpenStreetMap en 3D. A les opcions gràfiques hi podreu seleccionar opcions com utilitzar les dades d'elevació del terreny, l'hora del dia o les condicions climatològiques. El navegador web ha de ser capaç de treballar amb <a href="https://www.khronos.org/webgl/" target="_blank">WebGL</a> per la correcta visualització.<br><br><img width="100%" src="assets/img/f4map-imatge.png"><center><a href="https://demo.f4map.com/#lat=41.2213651&lon=1.7190071&zoom=17&camera.theta=58.483" target="_blank">Ves al mapa de Vilanova i la Geltrú en 3D</a></center></p>
-Modificar toda la sección de créditos a vuestro gusto.
  <h1>Quant a...</h1>

No ha estado mal el primer archivo, ¿verdad?

Venga, vamos a el que nos queda ;)

Es assets/js/site.js . Recordad los trucos para editar, buscar Vilanova i la Geltrú ([41.2214 , 1.7169], 15 o bien MODIFICAR AQUÍ

-Modificar coordenadas
map.setView([41.2214 , 1.7169], 15);
-Modificar coordenadas y nivel de zoom (no disminuir, en todo caso aumentar)
    map.setView([41.2214 , 1.7169], 15);
-Modificar límites de Nominatim para buscar en local
    $.getJSON('https://nominatim.openstreetmap.org/search?format=json&viewbox=1.68434,41.23761,1.76502,41.20533&bounded=1&limit=5&q=' + inp.value, function(data) {

Pues bien, más allá de lo que puedas remover, si quieres ya tienes tu prueba de concepto personalizada, un mapa de OSM, adaptado a tu localidad con muchos servicios y con más que le puedas añadir pues el ecosistema de esta base de datos llamada OpenStreetMap es tan infinito como sus posibilidades ;)

#YoRenderizo Mapa con Overpass-Turbo sobre accesibilidad

Ya sabeis hace tiempo de mi gusto, mi necesidad por hacer mapas personalizados. Por el camino voy encontrando métodos que cada vez más satisfacen mi curiosidad pero también mi necesidad. Después del mapa con Mapbox, con QGIS  y del mapa con uMap, llega... el mapa con overpass-turbo.

¡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