管理バウンダリーのworldviewを変更

worldview値を使用して、マップの対象ユーザーに基づいて管理バウンダリーを調整します。この例では、worldview変数内のワールドビューオプションを確認できます。次のとおりです。 CN: 中国本土のユーザー/wordview用のバウンダリーですが、公式には承認されていません。 IN: インドの地図作成要件に準拠したバウンダリー。米国:アメリカのユーザー用バウンダリーです。中国とインド以外の国で一般的に使用します。ラインは必ずしも米国の外交政策を反映しているわけではありません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>管理バウンダリーのworldviewを変更</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" />
<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.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>