[Gist] https://gist.github.com/Hirosaji/b5345387ac5bf0eb5df64f400be3a1fb
Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
#mapid { height: 700px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script>
// check ua
var ua = navigator.userAgent;
var isSp = (ua.indexOf('Android') > 0 || ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('iPad') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0));
// set bounds to Japan, Japan
var bounds = [
[100.0, 15], // Southwest coordinates
[175.0, 52] // Northeast coordinates
];
// load data
var p1 = d3.json("japan_ver81.geojson");
Promise.all([p1]).then(function (dataList) {
// set mapbox object
mapboxgl.accessToken = "pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2szOWlqZWNzMDJueTNjcWhyNjhqdXBnOSJ9._6mJT202QqpnMuK-jvMr3g";
var map = new mapboxgl.Map({
container: "mapid",
style: "mapbox://styles/hirosaji/ck489nuw400wb1cnsbshpaah5", // 2 values
center: [136.5, 38.5],
minZoom: (isSp) ? 3.5 : 4.5,
maxZoom: 9.5,
zoom: (isSp) ? 3.5 : 4.5,
maxBounds: bounds,
});
// set data
var cityData = dataList[0];
// fix data
cityData.features.forEach(function (feature) {
var placeName = (feature.properties.SIKUCHOSON) ? feature.properties.SIKUCHOSON : feature.properties.SEIREI;
if (feature.properties.KEN === "福岡県" && placeName === "那珂川町") {
feature.properties.SIKUCHOSON = "那珂川市";
feature.properties.JCODE = "40231";
}
});
map.on("load", function () {
// draw layer
map.addSource("city", {
"type": "geojson",
"data": cityData,
});
map.addLayer({
"id": "cityFill",
"type": "fill",
"source": "city",
"paint": {
"fill-color": "#ffffff",
"fill-opacity": 1,
}
});
map.addLayer({
"id": "cityLine",
"type": "line",
"source": "city",
"paint": {
"line-color": "rgba(200, 200, 200, 1)",
"line-opacity": 0.5,
"line-width": 0.5,
}
});
});
});
</script>
</body>
https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js
https://d3js.org/d3.v5.min.js