Leaflet.jsでMapboxのタイルを用いて地図を表示してみます:
チュートリアルなどにしたがって進めてみます。
チュートリアルなどに従って地図を表示してみました。国土地理院・Open Street Map・Mapboxの3つのタイルを切り替えられるようにしてみました。
地図は上野駅が中心になるように指定しています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div id='mapid'></div>
<script>
// タイルレイヤーを作成する
var cyberjapandata = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
}),
openstreetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
}),
mapbox = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q'
});
var baseMaps = {
"国土地理院": cyberjapandata,
"OpenStreetMap": openstreetmap,
"Mapbox": mapbox
};
// 地図を作成する
var mymap = L.map('mapid', {layers: [cyberjapandata]});
L.control.layers(baseMaps).addTo(mymap);
// 地図の中心座標とズームレベルを設定する
mymap.setView([35.7142,139.7774], 13);
</script>
|
以下のように指定して、マーカーを設置します:
1
2
3
4
| <script>
var marker = L.marker(["35.7142", "139.7774"]).addTo(mymap);
marker.bindPopup("上野駅だよ").openPopup();
</script>
|
以下のように指定して、サークルを設置します:
1
2
3
4
5
6
7
8
| <script>
var circle = L.circle([35.7237, 139.7653], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
</script>
|
複数の経度・緯度を指定し、その点を結んだ図形を描画します。
1
2
3
4
5
6
7
| <script>
var polygon = L.polygon([
[35.7173, 139.7657],
[35.7142, 139.7774],
[35.7068, 139.7700]
]).addTo(mymap);
</script>
|
こんな感じで描画できます:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script>
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "御徒町駅",
"amenity": "駅",
"popupContent": "御徒町駅だよ"
},
"geometry": {
"type": "Point",
"coordinates": [139.7734, 35.7080]
}
};
L.geoJSON(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(mymap);
</script>
|
GeoJSONだけでなく、TopoJSONという形式もあるようです。ここでは外部のTopoJSONを読み込んで、描画してみます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
// Changing topojson to geojson
L.TopoJSON = L.GeoJSON.extend({
addData: function(jsonData) {
if (jsonData.type === "Topology") {
for (let key in jsonData.objects) {
if (jsonData.objects.hasOwnProperty(key)) {
let geojson = topojson.feature(jsonData, jsonData.objects[key]);
L.GeoJSON.prototype.addData.call(this, geojson);
}
}
} else {
L.GeoJSON.prototype.addData.call(this, jsonData);
}
}
});
const topoLayer = new L.TopoJSON();
fetch('https://raw.githubusercontent.com/dataofjapan/land/master/tokyo.topojson')
.then(response => {
return response.json();
})
.then(data => {
topoLayer.addData(data);
topoLayer.addTo(mymap);
});
</script>
|