Examples
Layers (30)
Extrude polygons for 3D indoor mappingDisplay buildings in 3DAdjust a layer's opacityAdd a 3D modelAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesChange a layer's color with buttonsCreate and style clustersStyle circles with a data-driven propertyAdd a custom style layerStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataChange worldview of administrative boundariesShow and hide layersUpdate a choropleth layer by zoom levelVisualize population density

Change worldview of administrative boundaries

Uses the worldview value to adjust administrative boundaries based on the map's audience. You can see the worldview options within the worldviews variable in this example. They are as follows:

  • CN: Boundaries for a mainland Chinese audience/worldview, but not officially approved for use in the PRC.
  • IN: Boundaries conforming to cartographic requirements for use in India.
  • US: Boundaries for an American audience, & which are generally appropriate outside of China & India. Lines do not necessarily reflect official US foreign policy.
Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change worldview of administrative boundaries</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
label {
font-size: 20px;
}
.toggle-menu {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 400px;
top: 0;
right: 0;
padding: 10px;
}
.toggle-menu .toggle-menu-inner {
text-align: center;
background-color: #fff;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.toggle-menu-inner button {
color: #000;
display: inline-block;
width: 50px;
height: 20px;
border: none;
margin: 10px;
cursor: pointer;
}
.toggle-menu-inner button:hover {
box-shadow:inset 0 0 0 4px pink;
}
</style>
<div id='map'></div>
<div class='toggle-menu top'>
<div class='toggle-menu-inner'>
<label>Toggle worldview:</label>
<div id='worldviews'></div>
</div>
</div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
/* Note: The worldview data field is only available in styles that use the Mapbox Streets v8 tileset https://www.mapbox.com/vector-tiles/mapbox-streets-v8/ */
style: 'mapbox://styles/mapbox/streets-v11',
center: [95.690, 25.251],
zoom: 3
});
var worldviewButtons = document.getElementById('worldviews');
var worldviews = [
'CN',
'IN',
'US'
];
map.on('load', function() {
worldviews.forEach(function(worldview) {
var worldviewButton = document.createElement('button');
worldviewButton.innerHTML = worldview.toString();
worldviewButton.addEventListener('click', function() {
var adminLayers = ['admin-0-boundary', 'admin-1-boundary', 'admin-0-boundary-disputed',
'admin-1-boundary-bg', 'admin-0-boundary-bg'];
adminLayers.forEach(function(adminLayer) {
map.setFilter(adminLayer, ["match", ["get", "worldview"], ["all", worldview], true, false]);
});
});
worldviewButtons.appendChild(worldviewButton);
});
});
</script>
</body>
</html>