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