How do I get a single set of country boundaries from Mapbox country boundaries

user_1717244 0
Viewed 480

https://codepen.io/m12n/pen/XWNRZMg?editors=0010

mapboxgl.accessToken =
  "pk.eyJ1IjoiaW50ZWxsaWdlbmNlZnVzaW9uIiwiYSI6ImNrM2l2cnk1NzBibGIzbm5yaHNycXltZmYifQ.tPEnnW5NAPmInCJDYVfJxA";
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/dark-v10",
  zoom: 8,
  center: [-71.4935, 41.5852]
});

map.on("load", function () {
  map.addSource("countries-no-simplification", {
    type: "vector",
    url: "mapbox://mapbox.country-boundaries-v1"
  });
  map.addLayer({
    id: "countries-simplification-data",
    type: "fill",
    source: "countries-no-simplification",
    "source-layer": "country_boundaries",

    paint: {
      "fill-color": "#ff69b4",
      "fill-opacity": 0.3
    }
  });
});

The above code and pen shows usage of the MapBox county boundaries where I fill the layer with a colour and a low opacity.

Because the source has multiple world views I get both boundaries for disputed countries showing at the same time, and therefore get the effect shown (stronger colouring).

Eventually I actually want to apply a colour based on a specific datapoint, but for now I would be happy with being able to render only a single set of boundaries (a single world view?).

I cant seem to figure out how to get only one such set of boundaries from the source.

mapbox-gl mapbox-gl-js mapbox
1 Answers

You can apply a filter to keep the boundaries of a specific world view (US, CN, IN, etc.) and remove disputed boundaries. Example:

  map.addLayer({
    id: "countries-simplification-data",
    type: "fill",
    source: "countries-no-simplification",
    "source-layer": "country_boundaries",
    filter: [
        'all',
        ['match', ['get', 'worldview'], ['all', 'US'], true, false],
        ["!=", "true", ["get", "disputed"]],
    ],
    paint: {
      "fill-color": "#ff69b4",
      "fill-opacity": 0.3
    }
  });
user_93381770
Related