Mapeando con Javascript
Tags: javascript, mapping, cartograph
Published: 2020-02-10 16:56:11

> Este post fue publicado originalmente en julio del 2015


Hablaremos de Mapbox y aprenderemos a manejar y reproyectar nuestros datos geoespaciales con QGIS, para añadirlos a un mapa estilizado por nosotros.

El mundo de la cartografía es enorme, y puedo decir que me queda mucho por descubrir. Este artículo es parte de la experiencia que he obtenido en un proyecto reciente.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cgovjdlmnjfmqfh0mnez.png)

Antes de _trastear_ con nuestros datos geoespaciales, primero necesitamos nuestro lienzo, el mapa.

Mapbox es una plataforma para crear y usar mapas, y está basada en la librería de **LeafletJS**. Tiene un buen abanico de herramientas, datos y servicios que se conectan muy bien entre sí, por ejemplo, podemos estilizar un mapa con _Mapbox Studio_, una aplicación que usa _CartoCSS_ para darle vida a nuestro mapa junto con otras utilidades, para luego conectarlo con la librería _Mapbox.js_ para jugar con nuestros datos vía Javascript. 

Y eso amigos, en resumen, es lo que haremos hoy 🤗.

El plan starter nos permite estilizar un mapa y guardar 100mb de datos en los servidores de Mapbox. Si subes los datos a los servidores de ellos, luego podríamos usarlos en Mapbox Studio para estilizarlos junto a nuestro mapa, pero en nuestro caso no lo haremos así, lo haremos con js usando geojsons a través de la librería Mapbox.js.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s75lwgxx04c2iss5rzod.png)
<figcaption>Tarifas de Mapbox</figcaption>

### Mapbox Studio

Mapbox Studio está disponible para OS X, Windows y Linux. Incluso tenemos acceso a su código en [github](https://github.com/mapbox/mapbox-studio).

Hablemos de sus posibilidades.

#### Datos

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dmtsxoa33mds7ng65vrw.png)
<figcaption>Gran Canaria con la vista previa a la izquierda y vista de datos a la derecha</figcaption>

Nos permite añadir nuestros propios geodatos, además de todos los datos que nos ofrece por defecto, como calles, terreno, satélite… con la posibilidad de controlarlos y de inspeccionarlos a nuestra merced.

#### Estilo

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z8trytjqnn307ea0zhx7.png)

Podemos darle colores y formas a nuestro mapa gracias al preprocesador de estilos CartoCSS desarrollado por Mapbox. También tenemos acceso a una coleccion de iconos llamados [Maki](https://www.mapbox.com/maki) que están optimizados para tres tamaños diferentes y a un catálogo de tipografías con la posibilidad de añadir la nuestra propia.

Las posibilidades de la aplicación son mayores, pero con esto nos bastará para cumplir con el objetivo del artículo.

### Empecemos

Vamos a crear nuestro mapa.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kps21lcryj54o01xvb2p.png)
<figcaption>Nuevo proyecto en Mapbox Studio.</figcaption>

Cuando vamos a crear un nuevo proyecto, tenemos la posibilidad de elegir un mapa o de añadir datos propios para luego usarlos en algún mapa. En nuestro caso, como nuestros datos irán de la mano con js, vamos a experimentar un poco con CartoCSS. Elegiré el de _Run, Bike and Hike_.

Lo primero que vemos al elegir el mapa es que además de éste, tenemos la hoja de estilos a nuestra derecha separadas en varios ficheros. En estos ficheros tenemos todo el estilo que forma Run, Bike and Hike y será el que modifiquemos para conseguir nuestra “obra”.

Empezaré por cambiarle el color al mar. Para cambiar el aspecto de un elemento del mapa, debemos saber su identificador. Simplemente tenemos que ponernos en la vista de datos haciendo click en el botón que está a la derecha del zoom.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5a4qdja6an1kfetwrdd6.png)

En esta vista, si hacemos click en algún punto del mapa, aparecerá un _tooltip_ con la información de todos los datos de ese lugar. También podemos irnos a la sección Layers (Capas) del menú lateral izquierdo, el cual nos desplegará una ventana con la lista de todos los elementos que tenemos actualmente en nuestro mapa. Si os fijáis en la parte superior de esta ventana, veremos que los datos están bloqueados. Eso se debe a que se necesita un orden específico de capas para que el mapa funcione bien y en el caso de que quisiéramos añadir datos nuestros no podríamos, a menos que editemos el fichero **project.yml** y borremos el listado de capas. En nuestro caso no necesitamos desbloquearlo.

Una vez que sepamos el identificador del agua tenemos que identificarlo en nuestro proyecto. Lo encontraremos en el fichero **bg**.

```scss
#water {
  polygon-fill: @water; //relleno del polígono
  polygon-gamma: 0.5; //gamma, para reducir huecos entre polígonos
  ::shadow { //symbolizer
    polygon-fill: @water; //otro relleno
    opacity:0.9; //opacidad
    comp-op: screen; //operación de composición. efecto screen
    image-filters: agg-stack-blur(10,10); //sombra del agua(costas)
  }
  [zoom>12] { //estilo para zoom superior a 12
    polygon-gamma: 0.75; 
  }
}
```

Las posibilidades son muy amplias: cambiar bordes, sombras, añadir patrones, aplicar efectos entre los elementos, pero no me complicaré mucho (ya me luciré mas tarde jaja) así que simplemente cambiaré algunos colores y la tipografía. Tal vez en algún artículo escriba sólo de CartoCSS y sus posibilidades, pero de momento podéis consultar la [documentación](https://github.com/mapbox/carto/blob/master/docs/latest.md) para aprender todo lo que ofrece CartoCSS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rqfryieg065fxi0bx77z.png)
<figcaption>Mapa antes y después del cambio</figcaption>

Una vez tengamos nuestro mapa, tenemos que subirlo al servidor de Mapbox para generar un ID el cual usaremos más tarde porque de momento, tenemos que hablar un poco de los datos geoespaciales.

### Datos geoespaciales

Los datos geoespaciales o datos espaciales sirven para representar _features_ (**puntos**, **líneas** o **áreas**) en una superficie. Estos datos pueden tener una tabla de datos con información.

Para poder tratarlos, usaremos un GIS (_Geographic information system_) donde podremos hacer una infinidad de cosas relacionadas con la geografía, como administrar los datos de cada punto, representar los datos o cambiarles la proyección, por nombrar algunas.

El GIS que usaremos se llama [QGIS](http://www.qgis.org/es/site/), de código abierto, el cual aparte de tener las herramientas típicas de un sistema geográfico, tiene una buena comunidad de plugins muy interesantes. Ya le dedicaremos un artículo en el futuro.

Hagamos lo que hagamos con nuestros datos, lo que nos interesa es, recordad, un fichero geojson.

En el caso de que no tengamos a mano ningún fichero, podéis generar uno entrando en geojson.io, un editor a tiempo real, con la posibilidad de agregar features fácilmente y con muchas opciones para la exportación. También lo uso para visualizar ficheros y saber si están bien proyectados.

En la siguiente parte cargaremos nuestros datos en un mapa con la librería de javascript **mapbox.js** o **leaftlet.js**.

Github también tiene un buen API de mapas. Subid algún fichero a Gist y lo podréis comprobar. Éste es el mío

{% gist https://gist.github.com/ayozebarrera/7f900a2fbcff0a5b27d6 %}

Lo vamos a dejar por aquí!

En la siguiente parte cargaremos nuestros datos en un mapa con la librería de javascript de mapbox o leaftlet.

🌎