Twitter Yopaseopor

#yopaseopor

Movilidad

Pinterest

Es mostren els missatges amb l'etiqueta de comentaris #YoRenderizo. Mostrar tots els missatges
Es mostren els missatges amb l'etiqueta de comentaris #YoRenderizo. Mostrar tots els missatges

diumenge, 25 de juny del 2023

#YoRenderizo Anímate a generar tu propio #MapaDatos OSM

 Primero de todo, ¿qué es?

#MapaDatos es un pequeño atajo que sirve para conseguir la mayoría (por no decir todos) los datos de un municipio español concreto (adaptable a otros países). Del municipio escogido genera un listado de 25000 enlaces que muestran mapas, datos y extractos en CSV de lo que contiene la base de datos de OSM, por ejemplo Granada.
Con una pequeña adaptación también genera lo mismo para toda una comunidad autónoma.

¿Cómo se genera?

1-Accede aquí, toma como ejemplo el municipio de Granada.
2-Copia todo tal cual en un editor de texto
3-Sustituye Granada por el nombre del municipio (buscará la etiqueta idee:name)
4-El resultado lo copias en otra hoja de cálculo, con posibilidad de acceso online mejor
5-A disfrutar

Observaciones

Esto es un pequeño divertimento, aunque los datos sean reales y útiles, todo el código en sí es más que mejorable y algunas consultas pueden dar resultados incorrectos.
Todo son datos extraídos de OSM, no lo olvidemos.
Si algún municipio genera el texto pero no los enlaces no es grave, para ejecutar se deberá copiar en el navegador el enlace que se desee.

Municipios disponibles

Municipios catalanes disponibles

#YoRenderizo #MapaDades de Catalunya

 Ja fa temps que la idea corria pel meu cervellet però després de la (per a mi) "fallida" publicació en obert del Mapa de Comerç de Catalunya (https://analisi.transparenciacatalunya.cat/Comer-/Mapa-del-Comer-Catal-/4w2r-uffk) em veig obligat a donar-li una volta més. I és que OSM som dades,i lliures, per tant podem publicar perfectament dades sobre qualsevol cosa. Aprofitant el Tagcionari he creat el #MapaDades en aquest cas OSM de Catalunya, en la que estan TOTES les etiquetes del Tagcionari, se'n fa un petit mapa via overpass-turbo, se'n mostren també les dades i finalment se'n poden extreure en CSV via Overpass. És una prova de concepte, una eina en esborrany, no pas un producte finalitzat. Quan les etiquetes no existeixen d'un determinat lloc l'eina dóna resultats estranys, però quan triem etiquetes existents l'eina funciona. Feel free.
Bonus track: i si ho fèssim de tots els municipis de Catalunya? ;)

 #MapaDades OSM de Catalunya

-Tots els fulls



diumenge, 21 de maig del 2023

#YoRenderizo Comparativa visual modelos 3D

 Si hablamos de ver el mundo  en un modelo 3D todos tendremos en la cabeza un producto de la gran G. 

 

Google Earth versión web  


Google Earth versión software

Y sí, no lo voy a obviar, pero también os presento otras alternativas, en este caso basadas en OSM que ofrecen el mundo en 3D. Como siempre pasa en OSM todo depende de la calidad de los datos (y en este caso también la "inventiva", "alucinación" o simplemente "buen gusto" de la/s persona/s desarrolladora/s de estos modelos en que se añaden algunos datos no existentes en la base de datos y que, por lo tanto no son reales. No me extenderé en describirlos, simplemente admiradlos , comparad y si encontráis algo mejor, (aparte de usarlo) no dudéis en explicárnoslo ;)

Streets.gl



Kendzi3D (plug-in para JOSM)

F4map

3DSMaps

Y vosotros, ¿con cual os quedáis?

diumenge, 22 de maig del 2022

#YoRenderizo CustomOSMapp : el mapa personalizable definitivo

A poco que hayais seguido mi trayectoria sabreis que me gusta mapear de una forma un poco especial: puedo llegar a ser metódico hasta la extenuación y también poco preciso ni detallado, siempre que los datos se lo merezcan.


Y mostrar mapeados personalizados es complejo. OSMCarto muestra las propiedades que muestra y los elementos que muestra y aunque tengamos muchos ejemplos usando Leaflet y grandes empresas como Mapbox o Carto dedicándose a ello puede ser que no encontremos acómodo en nuestro estilo.
Pero eso ha llegado a su final tanto con Leaflet como con Openlayers. Y con este último #withalittlehelpfrommyfriends ha visto su culminación en CustomOSMapp

¿Qué es?


Pues lo mejor que se puede hacer es seguir su código vía github. Pero por resumir es un mapa en Openlayers autónomo (con una simple cuenta de Github) que con muy pocas configuraciones (modificar un par de archivos que contienen las consultas overpass o las rutas externas) que muestra (con sus pequeñas limitaciones) CUALQUIER ELEMENTO EXISTENTE O EXTERNO A OSM. Repetimos: CUALQUIER ELEMENTO, por compleja que fuere la etiqueta (si hablamos en la forma de mostrarlo...tiene unas opciones limitadas pero que dan solución a un resultado básico.)

Sus prestaciones son las siguientes:
-Map basado en Bicycle tags map

-Con modificaciones de Ramiro Balado

-Actualización versión más moderna de Openlayers hecha por Ripollx

-Posibilidad de mostrar JSONs externos a OSM por Hugoren Martinako

-Peticiones complejas hechas por Ismael Luceno

-Ideas adicionales por yopaseopor 

Sí, mis aportaciones básicamente son para qué lo podemos usar y qué le podemos demandar al mapa. Del que iba a ser un simple mapa de señales de tráfico (para todo el mundo ya son elementos), en la actualidad existen más de una decena de conceptos de los que se puede obtener su mapeado. Además , el hecho de poder mostrar cualquier etiqueta permite mostrar también la falta de ellas, lo que lo convierte en un perfecto validador para la cuestión que se desee. Todos estos mapas pueden ser además combinados con quests personalizables de Mapcomplete, lo que genera un ecosistema completo desde la introducción del datos específico en lenguaje "humano" (no OSM) hasta la muestra en cualquier dispositivo vía CustomOSMapp. 

Mapas 


CustomOSMapp > Ofrece un renderizador personalizable para mostrar nodos, vías y relaciones, dentro y fuera de OSM.
Fuente > https://github.com/yopaseopor/customosmapp
Render Openlayers 3 > https://yopaseopor.github.io/customosmapp/#map=8/41.69689/1.59647/0
Render Openlayers 2 > https://yopaseopor.github.io/customosmapp/customosmapp1/ 

Accessibilitat >
Fuente > https://github.com/yopaseopor/accessibilitat
Render Leaflet > https://yopaseopor.github.io/accessibilitat/old_map/
Render Openlayers 3 > https://yopaseopor.github.io/accessibilitat/map/#map=8/41.69689/1.59647/0 Render Openlayers 2 > https://yopaseopor.github.io/accessibilitat/old_map2/ 

Asturianu en OSM >
Fuente > https://yopaseopor.github.io/puxasturies/
https://github.com/yopaseopor/puxasturies 

Feminisme > Protocol No Callem
Fuente > https://github.com/yopaseopor/geochicas
Render >https://yopaseopor.github.io/geochicas/ 

OSM-Catalan Fuente >
Render > https://osm-catalan.github.io/osmcatmap/#map=10.962/41.35028/1.63517/0&Iniciatives=010000000 https://ripollx.github.io/osmcatmap2/#map=8/41.69689/1.59647/0 

OSM Help Ukraine > https://yopaseopor.github.io/osmhelpukrainemap/#map=13.073/49.78475/22.61777/0&Name:uk/%D1%83%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%81%D1%8C%D0%BA%D0%BE%D1%8E%20%D0%BC%D0%BE%D0%B2%D0%BE%D1%8E=01000000 

OSM Historic Map > Renderiza las etiquetas históricas de elementos ya existentes en el mapa
Fuente > https://github.com/yopaseopor/osmhistoricmap
Render> https://yopaseopor.github.io/osmhistoricmap/ 

OSM L Map (en construcción) > Mapa de bibliotecas
https://yopaseopor.github.io/osmlibrarymap/#map=8/41.55317/0.47037/0&Tipus=10000000 

OSM Lit Map > Renderiza la iluminación y percepción de la misma por calles
Fuente > https://github.com/yopaseopor/osmlitmap
Render > https://yopaseopor.github.io/osmlitmap/ 

OSM Lleng Cat > Muestra los nombres en name:ca por si faltasen >
https://osm-catalan.github.io/osmllengcat/#map=17.04/41.22696/1.69763/0&Name:ca=000100 

OSM MTB MAP > Etiquetas para los amantes de las MTB >
https://osm-es.github.io/osmmtbmap/#map=17.604/41.4115/2.08367/0&mtb=0000000001 

OSM NameCa Map > Muestra los nombres en castellano y su resultado en catalán si lo hubiere > https://yopaseopor.github.io/namecamap/#map=19.392/38.26639/-0.7024/0&Noms%20en%20castell%C3%A0=001000 

OSM Parking Map > https://osm-es.github.io/osmparkingmap/#map=19.723/41.21821/1.71147/0&Lane/Street%20side=1100000000000 

OSM Recycling Map > https://yopaseopor.github.io/osmrecyclingmap/#map=15.427/41.43962/2.22045/0&Reciclatge/Reciclaje/Recycling=100000000 

Traffic Signs Map >
Render Leaflet > https://yopaseopor.github.io/traffic_signs_map/zones/
Render Openlayers 2 > https://yopaseopor.github.io/traffic_signs_map/
Fuente > https://github.com/yopaseopor/traffic_signs_map

dijous, 1 d’agost del 2019

#YoRenderizo #CustomOSMApp Como generar tu propio mapa personalizable y autónomo

Hace tiempo que no hago un manualillo de estos pero gracias a un compañero de trifulcas me he decidido a explicar TODO lo que he necesitado para hacer un mapa propio, 100% personalizable.

Créditos:
usaremos el Bicycle Tags map (https://wiki.openstreetmap.org/wiki/Bicycle_tags_map).
Las modificaciones importantes las generó Ramiro Balado.
Usaremos una cuenta de GitHub
Y nos surgirá un mapa basado en OpenLayers

También quiero dejar claro que son los pasos que seguí yo, como entendereis hay mejores formas de usar git y muchos más comandos que otras personas estarán dispuestas a explicaros con mucha mejor precisión que yo, incluso puede ser que os cuente alguna mentira o inexactitud, ya os pido disculpas de entrada ;) . Y por supuesto yo usé el sistema operativo que yo tengo: Windows 7/10 y Firefox. Dicho lo cual, empezamos.

El objetivo es claro: tener un mapa, en internet, con base Openstreetmap, funcionando y que emita nuestros iconos para los elementos básicos que existen en OSM: nodos, vías y relaciones para CUALQUIER ETIQUETA

Estas instrucciones van a requerir unas cuentas herramientas externas que hay que descargar. Aunque la mayoría de procedimientos son vía explorador de archivos y vuestro navegador favorito hay algunas aplicaciones que van a ser vitales en el proceso:
  • -Notepad++
  • -Github desktop
  • -Explorador de archivos
  • -Firefox
Lo primero es hacerse una cuenta en github


Desde la página principal se puede hacer, no olvidarse de verificar en el correo la cuenta, gratuita ,

 por supuesto.



Buscamos el repositorio "customosmapp" y vamos hacia él

Al encontrarlo hacemos clic en "fork", para crearnos nuestra propia copia del proyecto.

Y eso nos dirá la web.


Le damos a Settings y modificamos:

-el nombre del proyecto
-más abajo activamos las páginas web de github, en la rama master. Eso nos permitirá acceder a nuestro mapa vía la siguiente dirección: http://nombredeusuario.github.io/nombredelrepositorio
(si accedemos ahora vereis el mapa de ejemplo sin modificar, con unas cuantas opciones para que veais las posibilidades que puede dar).


Ahora pasamos al programa Github Desktop:

Lo abrimos
-File > Clone a repository

-si hemos puesto nuestro usuario y contraseña podremos escoger el repositorio
-Bien ahora escogemos una carpeta de nuestro ordenador, o la creamos. Allí se van a bajar todos los archivos de nuestros repositorios. Porque las modificaciones las haremos en nuestra máquina, no en internet. Lo que haremos después es sincronizar una cosa con la otra, de tal manera que nuestros cambios se suban y se ejecuten desde el repositorio de Github.
-Una vez bajado con el notepad++ abriremos los siguientes archivos:
  • -index.html
  • -js_source/noordpass.js
  • -js_source/layerdef.js
  • -js_source/browser.js
  • -js_source/localtracks.js
  • -css/mystyle.css
Dentro de esos archivos buscaremos las siguientes palabras tal y como las veis aquí, cada una tendrá su explicación aquí y dentro del código fuente, como veis están precedidas o rodeadas de símbolos (es lo que uso para poder hacer comentarios) :
  • -// MODIFICAR
  • -// COPIAR
  • -// VOCABULARI
Empezamos por index.html
  • -línea 5: título de la web, el que se verá en el navegador
  • -línea 49: coordenadas de inicio  y zoom del mapa
  • -línea 56:  nombre de la pestaña por defecto. Nombres cortos y que no den problemas, es interno.
  • -línea 100: lugar donde se pueden añadir las capas y atribuciones que se deseen. Sitios dónde se pueden conseguir capas de ejemplos https://leaflet-extras.github.io/leaflet-providers/preview/
  • -línea 174:modificar el nombre y la tabla de mapas tanto en nombre interno, como externo
Seguimos por js-source/layerdef.js
  • -línea 100 : modificar los ejemplos de funciones que queremos destacar con las instrucciones de inicio del mismo archivo. Hay líneas, círculos y puntos (un círculo muy cerrado) e iconos exteriores , vía URL.
  • -línea 258 : modificar los ejemplos de peticiones a overpass. Las hay de más sencillas, complejas y combinadas, lo importante es que apunten a las funciones anteriormente creadas
  • -línea 386: permite añadir al menú de información sobre las vías cualquier servicio que base su url en longitud y latitud, eso sí especificando previamente un zoom alto, según el servicio escogido.
Continuamos con js-source/noordpass.js
  • -líneas 59 y 84 y 391: mensajes de error
  • -línea 89: mensaje para mostrar info en desplegable
  • -línea 135: mensaje de zoom mínimo para ejecutarse la consulta overpass
  • -línea 173: códigos para añadir aspectos personalizables a la leyenda .
  • -línea 208: modificar tipo de letra, tamaño, etc.
No nos olvidemos de js-source/localtracks.js
  • -línea 20: modificar interficie de carga de trazas
  • -línea 29: estilo de esas trazas
El resto es retocable, pero lo básico es lo aquí descrito.

Habiendo modificado todo el código necesario ahora pasamos a Github desktop otra vez.
Veremos todas nuestras modificaciones "apiladas"


En la columna izquierda inferior veremos que podemos escribir un título a nuestras modificaciones (así saldrán en github)
Y una explicación algo más larga del commit (petición de entrada de datos) si se desea.

Una vez escrito todo le daremos a "commit to master"

Seguidamente le daremos a "push origin". Si lo hemos hecho correctamente... ya tenemos nuestro mapa funcionando con nuestras modificaciones.

Cada vez que queramos hacer una modificación en el mapa (en las consultas, no en los elementos, los elementos están en la base de datos de OSM y se modifican desde allí, este mapa sólo "dibuja" lo que existe dentro de esa base de datos) deberemos seguir estos pasos:
  • -modificar lo deseado con notepad++ o vuestro editor de código favorito en vuestro ordenador
  • -hacer un commit, con su descripción
  • -hacer un push origin.

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

dijous, 4 de gener del 2018

#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

dissabte, 24 de setembre del 2016

#YoRenderizo Crear mapas dinámicos con @Openstreetmap

El objetivo de este manual es la posibilidad de crear mapas que muestren ciertas propiedades de OSM que nosotros decidamos a través de consultas Overpass y de mapas personalizables , en este caso de uMap.

Este manual está hecho en diferido, hace meses que hice el mapa (http://bit.ly/parkingosm) y a causa del riesgo de no recordar como hice el proceso para poderlo replicar me decido a escribirlo aquí.
Este artículo está basado en http://www.mappa-mercia.org/2014/09/creating-an-always-up-to-date-map.html, sólo que yo he cambiado las propiedades para que se adapten a mis necesidades.

Tenemos una consulta Overpass que en este caso nos muestra las vías que tienen una propiedad concreta (recordad que en overpass se pueden hacer todo tipo de búsquedas en OSM). En este caso calles que permitan aparcar sólo residentes en su lado izquierdo.

http://overpass-api.de/api/interpreter?data=[out:json][timeout:60];(way["parking:condition:left"="residents"]({south},{west},{north},{east}););out body;>;out skel qt;

Una vez hemos hecho nuestra consulta con el asistente, y la hemos limpiado de sobrantes (nodos, relaciones...) , la hemos exportado en Query a compact y le hemos añadido http://overpass-api.de/api/interpreter?data= (esto nos ayudará a que funcione conectado a la red como cualquier URL)

Después vamos a uMap , creamos un mapa, editamos y escogemos Remote data, seleccionamos OSM en la lista de formatos de debajo, activamos que sea dinámico y si la cosa va de muchos datos limitamos el zoom a partir del cual esos datos se van a ver, 13 fue lo que escogí yo. Y a partir de ahí, guardamos,exportamos el mapa, etc.

Dos buenos ejemplos:

-Mapa de accesibilidad del barrio de Llefià , en Badalona (http://accessibilitat.llefia.org)
-Mapa de propiedades de aparcamiento en OSM (http://bit.ly/parkingosm)

diumenge, 3 d’abril del 2016

#YoRenderizo #MiPrimerGIS Algunos ejemplos ;)

Gracias a una máquina virtual facilitada por @xevib  y que podeis encontrar aquí https://mega.nz/#!0xREgRYS!ABA7n9BgCo-12_vwHXGgfkOLmV-d7fhV3hFfCQ1Fqq4 he hecho una pequeña incursión en el mundo del GIS. Todo vino por el tema de render propio, mapa de aparcamiento, etc. De aquello se derivó el trabajo en Mapbox que ya colgué (como no me funcionaba ni Mapbox ni Mapillary el hecho de un entorno virtual en otro sistema operativo me animó a probar todo ello).
 Pero con Mapbox aún las cosas no quedaban claras, quedaban limitadas (propiedades que no sé hacer surgir y datos que no sé cargar) , y no acababa de cumplir mis expectativas.Así que requerí un pelín de ayuda pero he hecho mis pinitos con un GIS.
 Para empezar esta máquina virtual no es más que un ubuntu con postgres+postgis,qgis, y tilemill instalados.Pero lo más importante para mí y lo que vale su peso en oro es su configuración, además del script que me descarga y coloca los datos. Es cierto que he perdido el control de parte del proceso "creativo" (yo hago clic en el script del escritorio que podeis encontrar también aquí y los datos de España se descargan y se colocan en su sitio para que yo los pueda usar) pero agradezco saltarme esos pasos primeros para poder aceder a un poco de "chicha" , que me permite ver las posibilidades de estos datos bien procesados.Y lo he hecho a través de dos herramientas: QGIS y PGADMINIII.

 Antes de empezar...ejecuté el script, se descargaron los datos españoles de OSM en su sitio y empezamos.En un primer momento el script acabó demasiado rápido. Para comprobar dónde estaba el fallo ejecuté el script vía terminal , por lo que vimos que la máquina virtual necesitaba más CPUS y más memoria para procesar los datos.una vez solventadas estas dificultades empezamos, de verdad.Por QGIS

 Mi primer QGIS


 Guiado siempre por @xevib fui cumpliendo pasos algo sencillos.
 -Clica al elefante con un + y apretamos "Nueva"(que creará una nueva conexión a esas bases de datos que ha creado el script)

 -aparecerá el menú que veis en pantalla y lo rellenareis de la siguiente manera

 nombre: el que desees
 servicio: en blanco
 servidor: localhost
 base de datos:osm
 usuario:osm
 password:openstreetmap
y apretamos en test connection
finalmente apretamos ok
Ya tenemos nuestra conexión de la que cargaremos las diversas bases de datos. Cargamos (dadle a cargar).

Para probar escoged una o las que deseeis (se puede hacer con más de una pero todo os irá algo más lento por la cantidad de datos a procesar) (pensad también que cada tabla tendrá acceso a las diversas propiedades, por ejemplo osm_roads...creará las carreteras...no las calles.)
 Y cómo por arte de magia surgirán nuestros datos colocados de forma "reconocible" gráficamente hablando, sobretodo si conoceis vuestra ciudad (¿qué pensais que hice yo? ir a ver "mi casa" como todo hijo de vecino). Vemos que se ha creado una silueta de nuestro país, que si vamos ampliando a nuestra zona se ven "esbozadas" nuestras ciudades y nuestras calles.Y si nos acercamos a una de ellas y pulsamos el icono de información saldrán todas las propiedades de la vía, cosa que ya nos suena más de nuestros trabajos en OSM.

 Pero esto así, a palo seco nos sirve de poco. Así que vamos a ver qué podemos pedir que nos cargue y como lo va a mostrar (el objetivo es "hacer" un mapa).Por eso iremos a propiedades.
 
 Y entonces...y por ir rápido volveremos a bajarnos algo prehecho. Yo por ejemplo he confiado en los estilos de https://github.com/3liz/osm-in-qgis https://github.com/anitagraser/QGIS-resources/tree/master/qgis2/osm_spatialite y http://anitagraser.com/2014/05/31/a-guide-to-googlemaps-like-maps-with-osm-in-qgis/ (los cuales, si no van se pueden adaptar un poco).Por ejemplo asegurémonos que la consulta para ver una tertiary (y que vemos en la pestaña estilos sea "highway" IN ('tertiary') tal y como la veis aquí (de hecho si no es así vereis que "desaparecen" del mapa)

 Y ahora que lo vemos... pues sigamos las instrucciones de http://www.qgistutorials.com/en/docs/making_a_map.html para hacer un mapa en condiciones.
 Añadir mapa (pergamino enrollado), trastear con menús y formatos y el resultado es éste que podeis ver.

 Pero aún hay más.Si llevas tiempo en OSM o si le preguntas a alguien que lleva tiempo te dirá una frase que, de entrada te dejará algo descolocado: OSM no es un mapa, es una base de datos.Y nosotros lo vamos a comprobar ahora mismo.
 Una de las herramientas que lleva instaladas la máquina es el PGAdmin III , una herramienta de PostgreSQL.

Mi primera consulta SQL


 Veremos ya una conexión realizada, así que le clicamos con el botón derecho y la conectamos.
 A partir de ahí saldrán varias ramas. Pero nosotros nos vamos a dedicar a , por ejemplo hacer consultas arbritrarias SQL (lupa con SQL en el medio).

 Un ejemplo: quiero todos los caminos asfaltados (lo que equivaldría a track con tracktype de grado 1 y asfalto como superficie)

select * from planet_osm_line
where highway='track'
and tracktype='grade1'
and surface='asphalt'

y le damos al botón de play (ejecutar la consulta)

En la parte inferior podremos observar como el contadors de tiempo de la consulta empieza a contar en ms. a marchas forzadas .
Poco después veremos los datos de esa tabla de datos, si buscamos algunas de las claves de OSM las varemos ejerciendo de columnas mientras que los valores hacen de filas.

También nos servirá para ver lo útiles que son los límites administrativos, en este caso nos servirán para poder seleccionar los datos.
Así que a nuestra consulta anterior le añadiremos esta otra:

 select * from planet_osm_polygon where
  ST_Within(way,
    (select way from planet_osm_polygon
    where admin_level='4'
    and name='Catalunya'));

lo cual por simple deducción nos puede llevar a pensar que podemos usar cualquier límite administrativo reconocido en OSM

 select * from planet_osm_polygon where
  ST_Within(way,
    (select way from planet_osm_polygon
    where admin_level='8'
    and name='Vilanova i la Geltrú'));

Para seguir con nuestro experimento vamos a combinar las dos opciones, el resultado será una consulta que nos mirará todos los caminos asfaltados de Catalunya, como veis lo único que he hecho ha sido combinar las dos consultas y poner el final al final de todo y no al final de la primera consulta.

select * from planet_osm_line
where
 ST_Within(way,
 (select way from planet_osm_polygon
 where admin_level='4'
 and name='Catalunya'))
    and highway='track'
  and tracktype='grade1'
  and surface='asphalt';

 Doble combo: PGADMINIII+QGIS


 Porque si agarramos esta preciosa consulta y le aplicamos el hecho de crear una tabla como ésta

 create table camins as(
 select * from planet_osm_line
where
 ST_Within(way,
 (select way from planet_osm_polygon
 where admin_level='4'
 and name='Catalunya'))
    and highway='track'
  and tracktype='grade1'
  and surface='asphalt');

El resultado es una base de datos...que podremos volver a abrir en QGIS, con sus estilos, etc.
Y esto solo ha hecho que empezar, lo que veis aquí son simples ejemplos, OSM tiene muchas claves y valores diferentes así que no hay límites!

diumenge, 27 de març del 2016

#YoRenderizo DIY: Cómo hacer nuestro propio renderizado o mapa con Mapbox y OSM.

Después de darle vueltas a como poderlo hacer y gracias al empujón necesario que me ha dado una máquina virtual de Ubuntu (por algun motivo extraño no me van los mapas de Mapbox en mi Windows 7) hecha por Xavier Barnada ,encontré este artículo de ayuda de Mapbox (https://www.mapbox.com/help/overpass-turbo/) que me sirvió de inspiración para intentarlo yo mismo , así que me dispongo a explicaros el proceso. El resultado no es excepcional...pero demuestra que sin conocimientos avanzados se puede hacer (si yo puedo os aseguro que cualquiera puede).

Así que empezamos: cómo hacer nuestro propio renderizado o mapa con Mapbox y OSM.

Vamos a usar:

-Mapbox, pero comprobad que os funcione (ya he explicado que puede no ser así) (http://www.mapbox.com)
-Overpass turbo (http://overpass-turbo.eu/)
-Los datos van a ser extraídos de OSM (OpenStreetMap)

Pasos:

0-Tener claro sobre qué vamos a hacer el mapa (vamos a buscar propiedades concretas así que más os vale que esos datos ya estén incluidos en OSM, si no nos los vamos a poder buscar)
1-Crear cuenta de Mapbox
2-Ir a Overpass-Turbo y allí especificar , con el asistente y con ayudita lo que queremos buscar.En mi caso vamos a buscar todas las calles que requieran pasar por el parquímetro. Eso se especifica a través de una propiedad concreta: parking:condition: ... = ticket

Y la consulta queda de la siguiente manera:

/*
This has been generated by the overpass-turbo wizard.
The original search was:
“parking:condition:right=ticket or parking:condition:left=ticket or parking:condition:both=ticket”
*/
[out:json][timeout:25];
// gather results
(
  // query part for: “"parking:condition:right"=ticket”
  node["parking:condition:right"="ticket"]({{bbox}});
  way["parking:condition:right"="ticket"]({{bbox}});
  relation["parking:condition:right"="ticket"]({{bbox}});
  // query part for: “"parking:condition:left"=ticket”
  node["parking:condition:left"="ticket"]({{bbox}});
  way["parking:condition:left"="ticket"]({{bbox}});
  relation["parking:condition:left"="ticket"]({{bbox}});
  // query part for: “"parking:condition:both"=ticket”
  node["parking:condition:both"="ticket"]({{bbox}});
  way["parking:condition:both"="ticket"]({{bbox}});
  relation["parking:condition:both"="ticket"]({{bbox}});
);
// print results
out body;
>;
out skel qt;

2b- Seamos más bestias: queremos todas las calles de nuestro municipio? (No, highway=* no se puede usar...porque los ríos, las vías de ferrocarril, etc...también son highway y yo solo quiero las calles.)

/*
This has been generated by the overpass-turbo wizard.
The original search was:
“highway=residential or highway=living_street or highway=service or highway=tertiary”
*/
[out:json][timeout:25];
// gather results
(
  // query part for: “highway=residential”
  node["highway"="residential"]({{bbox}});
  way["highway"="residential"]({{bbox}});
  relation["highway"="residential"]({{bbox}});
  // query part for: “highway=living_street”
  node["highway"="living_street"]({{bbox}});
  way["highway"="living_street"]({{bbox}});
  relation["highway"="living_street"]({{bbox}});
  // query part for: “highway=service”
  node["highway"="service"]({{bbox}});
  way["highway"="service"]({{bbox}});
  relation["highway"="service"]({{bbox}});
  // query part for: “highway=tertiary”
  node["highway"="tertiary"]({{bbox}});
  way["highway"="tertiary"]({{bbox}});
  relation["highway"="tertiary"]({{bbox}});
);
// print results
out body;
>;
out skel qt;

3-Una vez realizada y ejecutada le damos a exportar y lo hacemos (y éste fue el paso que no supe encontrar siempre) en geoJSON.Eso nos hará descargar un archivo con las propiedades que queremos detectar,os recomiendo que le pongais un nombre corto pero entendible. Ya veis que por el método el mapa será "pequeño" y debemos suministrar antes la información concreta (no así del fondo que ya nos lo proporcionará Mapbox)
4-Nos vamos a Mapbox, entramos con nuestra cuenta y nos vamos a MapBox Studio , en la parte superior derecha.
5-allí dentro nos vamos a la pestaña Tilesets y allí escogemos New tileset, para buscar nuestro archivo y subirlo, "Upload"
6-Cuando el sistema nos informe de que todo está subido (Uploaded), cargado (Loading) y Ready (cambia de color) nos iremos a la pestaña Styles, vamos a escoger el fondo de nuestro mapa. Dependiendo los datos que deseemos mostrar escogeremos uno u otro.En mi caso escogí Emerald (calles y carreteras destacadas)
7-Una vez hecho esto le damos a Edit
8-New layer, de ahí a source y escogemos nuestra fuente de datos, la que hemos importado/subido


9-Field values > Add filter (vamos a añadir la clave y valor de OSM que queremos que el mapa muestre) . En mi caso parking:condition:left y al seleccionarlo debo escoger valor, en este caso "free"
10-Le damos a create layer y ahora podemos ponerlo a nuestro estilo: Color, tamaño, opacidad,punteado, no punteado, id toquiteando y viendo los diversos efectos en la vista previa de vuestras opciones sobre el mapa
11-Sólo nos queda repetir esta operación (desde el paso 8) tantas veces como datos diferentes queramos mostrar hasta que hayamos acabado de perfilar todos los detalles y decidamos Publicar (Publish) el estilo, el cual a partir de ahora encontrareis en vuestra pestaña Styles

12-A partir de aquí en esa pestaña entre otras cosas podremos bajarnos nuestro estilo, podremos generar una imagen estática (como el resultado que aquí veis).En esta última opción se os permitirá que la gente lo vea (cuidado , si estais en la versión gratuita teneis 50000 visitas a vuestros estilos, usadlos con moderación :P).Allí tendreis la dirección para acceder al estilo creado y os quedará una cosa parecida a ésta .

Como he explicado antes mi objetivo no era hacer el estilo perfecto, era entender cómo se hacía y lo más importante, ahora que yo lo he entendido y os lo he explicado alguien que realmente sepa de estas cosas puede usar este manual para crear un estilo que realmente valga la pena, con buen diseño.

Por si las moscas he colgado este estilo en Github en este repositorio de Github, para quien lo quiera usar,modificar,inspirar,destrozar...
https://github.com/yopaseopor/parkingvng

Ya explicaréis qué estilos habeis decidido crear ;)

PD: Habeis comprobado que en mi caso he buscado una propiedad que no sale en los renderizados habituales pero que es muy importante: el aparcamiento (han existido algunos proyectos pero han desaparecido o no funcionan correctamente). No importa que en la actualidad eso "no se vea" adecuadamente: OSM NO es un mapa (solamente, le añadiría yo, las cosas son el uso que les das y yo lo uso como mapa, también) ,OSM es una base de datos geográfica. Si tú pones un dato bien situado, con sus claves, valores, etc. ese objeto estará ahí disponible para el resto de proyectos de terceros que nos pueden mostrar renderizados o indicarnos el lugar de interés más cercano por poner dos rápidos ejemplos. No dejemos de añadir información a OSM porque a "simple vista" (o en el renderizado mayoritario)  no se vea. Os aseguro que es trabajo hecho y útil . Y como dicen en mi tierra "Feina feta no fa destorb" (trabajo ya hecho no molesta).