Examples
Styles (11)Add a default markerAdd an animated icon to the mapAdd a generated icon to the mapGenerate and add a missing icon to the mapAdd a stretchable image to the mapAdd an icon to the mapDisplay a map with a custom styleRender world copiesDisplay a satellite mapChange a map's styleDisplay a mapLayers (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 pointsCreate a heatmap layerAdd a GeoJSON polygonAdd hillshadingCreate 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 densitySources (10)Add a canvas sourceJoin local JSON data with vector tile geometriesAdd an imageAdd live realtime dataUpdate a feature in realtimeAdd a raster tile sourceAdd a third party vector tile sourceAdd a vector tile sourceAdd a videoAdd a WMS sourceUser interaction (21)Customize camera animationsAnimate 3D buildings based on ambient soundsDisable map rotationCreate a draggable MarkerCreate a draggable pointFilter features within map viewFilter symbols by text inputCreate a hover effectDisplay a non-interactive mapChange a map's languageMeasure distancesGet coordinates of the mouse pointerHighlight features containing similar dataGet features under the mouse pointerSelect features around a clicked pointRestrict map panning to an areaFilter symbols by toggling a listCreate a time sliderHighlight features within a bounding boxFit to the bounds of a LineStringToggle interactionsCamera (12)Animate map camera around a pointAnimate a point along a routeCenter the map on a clicked symbolSlowly fly to a locationFly to a locationNavigate the map with game-like controlsJump to a series of locationsOffset the vanishing point using paddingPlay map locations as a slideshowFly to a location based on scroll positionSet pitch and bearingFit a map to a bounding boxControls and overlays (17)Animate a markerChange the default position for attributionAdd custom icons with MarkersDisable scroll zoomView a fullscreen mapLocate the userSwipe between mapsShow drawn polygon areaDisplay driving directionsAdd a geocoderAdd a marker using a place nameDisplay map navigation controlsShow polygon information on clickDisplay a popup on clickDisplay a popup on hoverDisplay a popupAttach a popup to a marker instanceGeocoder (9)Supplement forward geocoding search results from another data sourceAccept coordinates as input to a geocoderUse a custom render function with a geocoderUse the geocoder without a mapLimit geocoder results to a named regionUse a custom camera animation with a geocoderPlace the geocoder input outside the mapLocalize the geocoder to a given languageSet a point after Geocoder resultBrowser support (1)Check if Mapbox GL JS is supportedInternationalization support (2)Use locally generated ideographsAdd support for right-to-left scripts

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>
<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.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.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>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
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 = [
'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>
Was this example helpful?