Layers (31)
Display buildings in 3DAdd a 3D modelExtrude polygons for 3D indoor mappingAnimate a lineAnimate a series of imagesAdjust a layer's opacityAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesCreate and style clustersChange a layer's color with buttonsAdd a custom style layerStyle circles with a data-driven propertyStyle 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 layerCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densityAdd hillshading

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>
<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/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
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;
<div id='map'></div>
<div class='toggle-menu top'>
<div class='toggle-menu-inner'>
<label>Toggle worldview:</label>
<div id='worldviews'></div>
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 = [
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]);