Twitter Yopaseopor

#yopaseopor

Movilidad

Pinterest

divendres, 5 de gener del 2018

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

3 comentaris:

  1. Hola! Hoy los amigos de OSM Argentina me compartieron esta nota y me encantó leerla y saber que el proyecto de http://upoi.org/ se está expandiendo a más ciudades de España gracias a la difusión de Konfraria y el esfuerzo que han puesto para adaptar el código.

    Además, quería agredecerles por siempre mantener la nota de que sus proyectos son un fork del mío que es el original (lamentablemente sin mantenimiento desde hace años). Sería interesante que puedan hacer Pull Request a este con los features y mejoras que han agregado en sus proyectos si es que ellos son útiles en términos generales y no específicos para la ciudad en la que están trabajando. Lo apreciaría mucho.

    Saludos desde Latino América. Espero conocerlos en España el año que viene que andaré por allí!

    ResponElimina
    Respostes
    1. Gracias a ti!!
      ¡Todo un honor que nos comentes! Y ya que estamos vamos a sacarle algo de tajada a la cosa. Por lo que hace referencia a las modificaciones se han basado básicamente en la posibilidad de añadir más pestañas de una forma fácil en el código por un lado y por el otro lado el código se ha hecho más relativo a la dirección por lo que haciendo un fork de él , cambiando nombres y coordenadas el mapa automáticamente se hace referente de esa zona, lo hemos concebido más como una prueba de concepto de la fuerza de OSM destinado a demostraciones o utilidades en administraciones públicas ou organizaciones adscritas a una zona determinada, por ello lo de eliminar la lupa del mapa.
      Se le han añadido más pestañas con la inclusión de artículos de la Wikipedia sobre el lugar.Se ha añadido una pequeña integración con Graphhopper, un iframe para poder colgar un mapa generado por consultas overpass y se han actualizado las secciones de ayuda. Se pretende añadir la posibilidad de consultar Mapillary y lo que no hemos conseguido que funcionara es el modo experto de consultas overpass (a priori parece el mismo código que osm-pois, pero alguna cosa se debió modificar que no conseguimos que funcione, cualquier ayuda en este sentido sería muy bien recibida.

      El enfoque de la herramienta ha sido el inverso a POI's, aunque dé el funcionamiento mundial está todo diseñado para ser localizado en un sitio determinado, lo que sí se ha hecho es simplificado al máximo para su rápida adaptación (sustituyendo el nombre de la localidad y sus coordenadas, poco más - o bien buscando MODIFICAR AQUÍ en sólo dos archivos). Es por ello que te invito a que forkees y revises tú mismo el proyecto, para aprovechar /mejorar/arreglar las partes de código que más interesen.

      Saludos desde la comunidad catalana
      yopaseopor

      Elimina
  2. Un pequeño detalle. ¿Pueden actualizar la dirección de la web ya que https://pois.elblogdehumitos.com.ar no funciona más y utilizar https://upoi.org en el github y demás lugares donde se encuentre? ¡Muchas gracias!

    ResponElimina