#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 ;)