Layers (32)
Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAdjust a layer's opacityAnimate a lineAnimate a series of imagesAnimate 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 labelsUse a fallback imageAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd hillshadingCreate a heatmap layerCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataShow and hide layersUpdate a choropleth layer by zoom levelChange worldview of administrative boundariesVariable label placementVisualize population densityAdd a GeoJSON polygon

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.
<!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.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/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.69, 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 = [
adminLayers.forEach(function(adminLayer) {
map.setFilter(adminLayer, [
['get', 'worldview'],
['all', worldview],
Was this example helpful?