Cansada de ser feliz

Bienvenidos a mi flujo de conciencia

Pintar polígonos en diferentes colores desde GeoJSON en Mapbox GL JS

| Comments

Tenemos un listado de de geohashes y a cada geohash corresponde un valor, por ejemplo fulfillment en nuestro caso. Queremos mostrar polígonos en un mapa, que corresponden a cada geohash y pintados en colores diferentes, dependiendo de valor de fulfillment.

Primero creamos un mapa de mapbox (var map;) y asociamos un fuente de datos (url donde tenemos nuestro GeoJSON):

1
2
3
4
map.addSource('fulfillment', {
  'type': 'geojson',
  'data': 'http://your.website.com/data.json'
});

Mapbox nos permite, usando el atributo paint, especificar qué color va a tener cada polígono (fill-color y fill-opacity):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(function () {
  'use strict';

  mapboxgl.accessToken = 'your-mapbox-key';

  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 12,
    center: [-74.07231699675322, 4.66336863727521]
  });

  map.on('load', function() {
    map.addSource('fulfillment', {
      'type': 'geojson',
      'data': 'http://your.website.com/data.json'
    });

    map.addLayer({
        "id": "fulfillment-polygon",
        "type": "fill",
        "source": "fulfillment",
        "paint": {
            "fill-color": "#888888",
            "fill-opacity": 0.4
        },
        "filter": ["==", "$type", "Polygon"]
    });
  });
});

Como resultado tenemos un mapa con polígonos pintados del mismo color gris:

Para especificar qué color exactamente para cada valor de fulfillment, vamos a usar el atributo fill-color. Así podemos decir para a qué rango de valores de fulfillment qué color corresponde:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
map.addLayer({
  "id": "fulfillment-polygon",
  "type": "fill",
  "source": "fulfillment",
  "paint": {
    "fill-color": {
      property: 'fulfillment',
      type: 'categorical',
      stops: [
        [0, '#a50026'],
        [30, '#f46d43'],
        [50, '#fdae61'],
        [60, "#ffffbf"],
        [70, "#a6d96a"],
        [80, "#66bd63"],
        [90, "#006837"]
      ]
    },
    "fill-opacity": 0.4
  }
});

Nuestro GeoJSON de entrada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{
  "datetime": "17 ago. 2017 13:10:40",
  "features": [
    {
      "geometry": {
        "coordinates": [
          [
            [
              -74.20166015625,
              4.581298828125
            ],
            [
              -74.190673828125,
              4.581298828125
            ],
            [
              -74.190673828125,
              4.5758056640625
            ],
            [
              -74.20166015625,
              4.5758056640625
            ]
          ]
        ],
        "type": "Polygon"
      },
      "properties": {
        "fulfillment": 50.0,
        "geohash": "d2g4p9"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          [
            [
              -74.091796875,
              4.76806640625
            ],
            [
              -74.080810546875,
              4.76806640625
            ],
            [
              -74.080810546875,
              4.7625732421875
            ],
            [
              -74.091796875,
              4.7625732421875
            ]
          ]
        ],
        "type": "Polygon"
      },
      "properties": {
        "fulfillment": 30.0,
        "geohash": "d2g745"
      },
      "type": "Feature"
    }
  ],
  "type": "FeatureCollection"
}

La otra forma de hacer lo mismo, es tener el color dentro de GeoJSON de entrada. Así en lugar de steps, podemos usar el tipo identity y tener los colores en el atributo color que especificamos en property (por ejemplo, #a50026):

1
2
3
4
5
6
7
8
9
10
11
12
map.addLayer({
  "id": "fulfillment-polygon",
  "type": "fill",
  "source": "fulfillment",
  "paint": {
    "fill-color": {
      property: 'color',
      type: 'identity'
    },
    "fill-opacity": 0.4
  }
});

Así se ve el resultado:

Comments