Getting started (1)Display a mapStyles (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 (40)Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAdd 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 mapAdjust 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 labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingAdd an imageDisplay line that crosses 180th meridianCreate 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 placementAdd a videoVisualize population densityUse a fallback imageSources (16)Animate a lineAnimate a series of imagesAnimate a pointAdd a canvas sourceJoin local JSON data with vector tile geometriesAdd hillshadingAdd an imageDisplay line that crosses 180th meridianAdd live realtime dataUpdate a feature in realtimeAdd a raster tile sourceAdd a third party vector tile sourceCreate a time sliderAdd a vector tile sourceAdd a videoAdd a WMS sourceUser interaction (27)Adjust a layer's opacityCustomize camera animationsCenter the map on a clicked symbolChange a layer's color with buttonsAnimate 3D buildings based on ambient soundsDisable map rotationCreate a draggable MarkerCreate a draggable pointFilter features within map viewFilter symbols by text inputFilter symbols by toggling a listCreate a hover effectDisplay a non-interactive mapChange a map's languageMeasure distancesGet coordinates of the mouse pointerHighlight features containing similar dataSelect features around a clicked pointGet features under the mouse pointerRestrict map panning to an areaChange a map's styleCreate a time sliderToggle interactionsChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelHighlight features within a bounding boxFit to the bounds of a LineStringCamera (13)Animate map camera around a pointAnimate a point along a routeCustomize camera animationsCenter the map on a clicked symbolFit a map to a bounding boxSlowly 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 bearingControls and overlays (17)Animate a markerChange the default position for attributionAdd custom icons with MarkersDisable scroll zoomView a fullscreen mapLocate the userSwipe between mapsDisplay driving directionsShow drawn polygon areaAdd 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 (10)Supplement forward geocoding search results from another data sourceAccept coordinates as input to a geocoderLimit geocoder results to a named regionUse a custom render function with a geocoderUse the geocoder without a mapPlace the geocoder input outside the mapUse a custom camera animation with a geocoderLocalize the geocoder to a given languageAdd a geocoderSet 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. Read more about worldviews.

<!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.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#menu {
position: absolute;
background: #fff;
padding: 20px;
margin: 20px;
font-family: 'Open Sans', sans-serif;
max-width: 180px;
}
#worldview-options {
margin-top: 10px;
}
</style>
<div id="map"></div>
<div id="menu">
<div>
Display administrative boundaries consistent with the following
worldview:
</div>
<!-- The worldview options will be built dynamically using JavaScript (below). -->
<div id="worldview-options"></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',
// The worldview data field is only available in styles
// that use the Mapbox Streets v8 tileset
// https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/
// or Mapbox Boundaries v3 tileset
// https://docs.mapbox.com/vector-tiles/reference/mapbox-boundaries-v3/
style: 'mapbox://styles/mapbox/light-v10',
center: [88, 26],
zoom: 4
});
// List the worldviews options you want users to select from. For
// available worldviews, see https://docs.mapbox.com/help/glossary/worldview/.
var availableWorldviews = [
{
code: 'CN',
name: 'China'
},
{
code: 'IN',
name: 'India'
},
{
code: 'JP',
name: 'Japan'
},
{
code: 'US',
name: 'United States'
}
];
// Choose a worldview you want to use when the map is first loaded.
// Styles created by Mapbox default to "US" as the initial worldview.
var worldviewOnMapLoad = 'US';
// Build the menu.
// Alternatively, you could hard code the menu in your HTML directly.
var worldviewOptions = document.getElementById('worldview-options');
// Iterate through all availableWorldviews.
availableWorldviews.forEach(function (worldview) {
// Create three new elements for each worldview.
var radioItem = document.createElement('div');
var radioInput = document.createElement('input');
var radioLabel = document.createElement('label');
// Assign attributes based on the worldview.
radioInput.type = 'radio';
radioInput.name = 'toggle-worldview';
radioInput.id = worldview.code;
radioInput.value = worldview.code;
radioInput.checked = worldview.code === worldviewOnMapLoad;
radioLabel.htmlFor = worldview.code;
radioLabel.innerText = worldview.code + ' (' + worldview.name + ')';
// Append the input and label elements to the radioItem div.
radioItem.appendChild(radioInput);
radioItem.appendChild(radioLabel);
// Append the radioItem div to the worldviewOptions div that
// will contain all the radio buttons.
worldviewOptions.appendChild(radioItem);
});
// Wait for the map to finish loading.
map.on('load', function () {
// Filter the "admin-0-*" layers to display
// administrative boundaries consistent with the
// initial worldview defined above ("CN").
filterLayers(worldviewOnMapLoad);
// Get all the worldview option inputs and loop through them.
var inputs = worldviewOptions.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
// Specify that the switchWorldview function
// (defined below) should run every time an input
// is clicked.
inputs[i].onclick = switchWorldview;
}
});
// Create a function that will identify which worldview
// is currently selected and run the filterLayers function
// with that worldview as an argument.
function switchWorldview(option) {
filterLayers(option.target.id);
}
// Update the filter for each "admin-0-*" layer, which contain
// administrative boundaries at the country level.
// These are the same filters used in the Mapbox Light
// style except that the worldview is based on user input.
function filterLayers(worldview) {
// The "admin-0-boundary-disputed" layer shows boundaries
// at this level that are known to be disputed.
map.setFilter('admin-0-boundary-disputed', [
'all',
['==', ['get', 'disputed'], 'true'],
['==', ['get', 'admin_level'], 0],
['==', ['get', 'maritime'], 'false'],
['match', ['get', 'worldview'], ['all', worldview], true, false]
]);
// The "admin-0-boundary" layer shows all boundaries at
// this level that are not disputed.
map.setFilter('admin-0-boundary', [
'all',
['==', ['get', 'admin_level'], 0],
['==', ['get', 'disputed'], 'false'],
['==', ['get', 'maritime'], 'false'],
['match', ['get', 'worldview'], ['all', worldview], true, false]
]);
// The "admin-0-boundary-bg" layer helps features in both
// "admin-0-boundary" and "admin-0-boundary-disputed" stand
// out visually.
map.setFilter('admin-0-boundary-bg', [
'all',
['==', ['get', 'admin_level'], 0],
['==', ['get', 'maritime'], 'false'],
['match', ['get', 'worldview'], ['all', worldview], true, false]
]);
}
</script>
</body>
</html>
Was this example helpful?