#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

#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.

#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

#yomapeo #JOSM #Fail Aquí está la Beta del estilo y del Preset de JOSM de señales de tráfico Traffic_signs

Me sabe mal anunciar que no voy a poder hacer más pruebas con JOSM más (me ha avisado la gente de JOSM), así que no podré actualizar ni el preset de opciones de menú ni el estilo de mapa de señales de tráfico Traffic_signs para JOSM (hasta que no haga una gran actualización tal como un país o una página del taginfo. Te puedes bajar las betas aquí:

https://github.com/yopaseopor/beta_preset_josm/archive/master.zip
https://github.com/yopaseopor/beta_style_josm/archive/master.zip

Para usar el estilo beta de señales de tráfico traffic_signs debes activarlo en Modificar > Preferencias > Estilos (tercera pestaña) y buscándolo. en tu pc.
Para usar el preset beta de señales de tráfico traffic_signs debes activarlo en Modificar > Preferencias > Estilos (tercera pestaña) y buscándolo.

#yomapeo #JOSM #Fail Aquí està la Beta de l'estil i del Preset de JOSM de senyals de trànsit Traffic_signs

Em sap greu anunciar que no podré fer més proves amb JOSM més (m'ha avisat la gent de JOSM), així que no podré actualitzar ni el preset d'opcions de menú ni l'estil de mapa de senyals de trànsit Traffic signs per a JOSM (fins que faci una gran actualització com un país o una pàgina del taginfo.) Et pots baixar les betes aquí:

https://github.com/yopaseopor/beta_preset_josm/archive/master.zip
https://github.com/yopaseopor/beta_style_josm/archive/master.zip

Per utilitzar l'estil beta de senyals de trànsit traffic_signs has d'activar-lo a Modifica > Preferències > Estils (tercera pestanya) i cerca'l al teu pc.
Per utilitzar el preset beta de senyals de trànsit traffic_signs has d'activar-lo a Modifica > Preferències > Predefinicions (tercera pestanya)  i cerca'l al teu pc.

#yomapeo #JOSM #Fail Here it is Beta JOSM Preset and Style Traffic_signs

I'm sad to announce I cannot make test on JOSM anymore (JOSM people warned me) so I cannot update anymore Traffic signs and style preset for JOSM (until I would had a country or a page of taginfo).You can download the betas here:

https://github.com/yopaseopor/beta_preset_josm/archive/master.zip
https://github.com/yopaseopor/beta_style_josm/archive/master.zip


For use the beta traffic_signs style in JOSM you have to activate in Modify > Preferences > Styles and search in your pc.
For use the beta traffic_signs preset in JOSM you have to activate in Modify > Preferences > Presets and search in your pc.

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