Skip to content

Instantly share code, notes, and snippets.

@Hirosaji

Hirosaji/.block

Last active Dec 9, 2019
Embed
What would you like to do?
Mapbox GL JS - Interactive Choropleth Map
# Mapbox GL JS - Interactive Choropleth Map
license: mit
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2szOWljb210MDJxcjNjcXRwZGF6bmJnMiJ9.gin_FUY4wc61PoNKnUWL5Q';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [137.6850225, 38.258595], // starting position [lng, lat]
zoom: 4 // starting zoom
});
var loadFiles = [
d3.json("pref.geojson"),
d3.tsv("japan_population.tsv")
];
Promise.all(loadFiles).then(function (data) {
data[0].features = data[0].features.map(feature => {
data[1].forEach(prefData => {
if (feature.properties.KEN === prefData['都道府県']) {
feature.properties.total = Number(prefData['合計']);
feature.properties.male = Number(prefData['男']);
feature.properties.female = Number(prefData['女']);
feature.properties.genderRatio = parseFloat(prefData['性比']);
}
});
return feature;
});
var margedGeoJSON = data[0];
var thresholdsNum = [75, 80, 85, 90, 95, 100, 105, 10000];
var thresholdsColor = ['#b30000', '#e34a33', '#fc8d59', '#fdcc8a', '#fef0d9', '#ffffff', '#f1eef6', 'black'];
var stepsList = thresholdsNum.map((num, i) => {
return [num, thresholdsColor[i]];
});
var selectedValue, selectedKEN;
map.on('load', function () {
map.addSource('pref', {
type: 'geojson',
data: margedGeoJSON
});
map.addLayer({
'id': 'pref',
'type': 'fill',
'source': 'pref',
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
},
'paint': {
'fill-color': {
property: 'genderRatio',
stops: stepsList
},
'fill-opacity': 0.75
}
});
map.on('click', 'pref', function (e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.KEN)
.addTo(map);
var selectedFeature = map.queryRenderedFeatures(e.point, { layers: ["pref"] })[0];
margedGeoJSON.features.forEach(feature => {
if (feature.properties.KEN === selectedKEN) {
feature.properties.genderRatio = selectedValue;
}
})
margedGeoJSON.features.forEach(feature => {
if(feature.properties.KEN === selectedFeature.properties.KEN) {
selectedValue = feature.properties.genderRatio;
selectedKEN = feature.properties.KEN;
feature.properties.genderRatio = 10000;
}
})
map.getSource('pref').setData(margedGeoJSON);
});
map.on('mouseenter', 'pref', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'pref', function () {
map.getCanvas().style.cursor = '';
});
});
function httpGet(theUrl) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
})
</script>
</body>
</html>
都道府県 合計 性比
北海道 5,292 2,494 2,797 89.2
青森県 1,274 599 675 88.7
岩手県 1,249 602 647 93.1
宮城県 2,305 1,127 1,178 95.7
秋田県 992 467 526 88.8
山形県 1,095 529 567 93.3
福島県 1,871 927 944 98.2
茨城県 2,847 1,420 1,427 99.5
栃木県 1,930 962 968 99.3
群馬県 1,913 945 969 97.5
埼玉県 7,174 3,582 3,592 99.7
千葉県 6,141 3,056 3,084 99.1
東京都 13,273 6,538 6,735 97.1
神奈川県 8,989 4,486 4,502 99.6
新潟県 2,253 1,093 1,160 94.2
富山県 1,043 505 537 94.1
石川県 1,136 550 586 94.0
福井県 767 373 394 94.7
山梨県 811 398 414 96.1
長野県 2,047 999 1,047 95.4
岐阜県 1,970 956 1,014 94.2
静岡県 3,605 1,776 1,828 97.2
愛知県 7,328 3,668 3,659 100.2
三重県 1,763 859 904 95.0
滋賀県 1,390 686 705 97.3
京都府 2,551 1,219 1,331 91.6
大阪府 8,657 4,162 4,495 92.6
兵庫県 5,417 2,583 2,834 91.1
奈良県 1,338 631 707 89.2
和歌山県 939 442 497 89.0
鳥取県 561 269 293 91.8
島根県 678 326 351 92.9
岡山県 1,888 907 980 92.5
広島県 2,789 1,352 1,438 94.0
山口県 1,369 649 720 90.1
徳島県 739 353 386 91.3
香川県 959 464 494 93.9
愛媛県 1,354 640 714 89.5
高知県 710 334 376 88.9
福岡県 5,051 2,386 2,665 89.5
佐賀県 819 387 431 89.7
長崎県 1,346 632 714 88.6
熊本県 1,754 828 926 89.5
大分県 1,142 541 601 90.0
宮崎県 1,083 510 573 89.0
鹿児島県 1,617 761 856 88.9
沖縄県 1,429 702 728 96.4
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.