Search code examples
mapboxgeojsonmapbox-gl

Choropleth Layer mapbox geojson not working

I am newbie to mapbox. I have to populate graph like below example

https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/

I am using geojson file as a source but it is not working. 

map.on('load', function() {

map.addSource('tls_demand', {
    'type': 'geojson',
    'url': 'http://1xx.2xx.1xx.1xx/xxxx.geojson'
});
map.addLayer({
    "id": "tls_projection",
    "type": "fill",
    "source": "tls_demand",
    "filter": ["==", "$type", "MultiPolygon"],
    'paint': {
        "line-color": "red",
        'fill-opacity': 0.75
    }
});

});

Can anyone pls suggest how to do it?

Solution

  • I had some time to play with this.

    Here's a snippet and also there's codepen at the bottom.

    map.on("load", function() {
  map.addSource("tls_demand", {
    type: "geojson",
    data: "https://gist.githubusercontent.com/androidfanatic/99de0a21907791fc2d57570df19455f6/raw/9710b3c69f0591bc6ca7730b0b6eebe2349b7571/DeoriaBoundary1.geojson"
  });
  map.addLayer({
  id: "tls_projection",
  type: "fill",
  source: "tls_demand",
  filter: ["==", "$type", "Polygon"],
  paint: {
    "fill-outline-color": "red",
    "fill-color": "red",
    "fill-opacity": 0.2
  }
});

    Couple of observations that I had:

    1. MultiPolygon isn't a valid filter option.

    2. The server that is hosting GeoJSON doesn't allow cross origin requests so you'd have to re-host.

    3. The GeoJSON isn't in EPSG:4326 which is the only coordinate system supported by mapboxgl-js so you'd have to project the geojson to EPSG:4326. I used ogr2ogr2 for that and the command is.

    ogr2ogr DeoriaBoundary1.geojson -t_srs "EPSG:4326" DeoriaBoundary.geojson

    1. A layer of type fill must provide fill-color paint property.

    2. To pass URL to source, you'd say "data": "https://domain.tld/url-to-geojson" instead of url property.

    You can see all of this in action here: https://codepen.io/manishraj/full/jONzBEK