Contents

JavaScriptではじめるWebマップアプリケーション: Chapter2-2

Contents

JavaScriptではじめるWebマップアプリケーション (PDF版)』の内容を淡々と試してみます。Mapbox GL JSで地図を表示してみます:

コード

こんな形になります:

 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div id="mapbox-map"></div>

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">

<style type="text/css">
<!--
#mapbox-map {
  height: 600px;
}
-->
</style>

<script>
// MIERUNE MONO読み込み
let map = new mapboxgl.Map({
    container: "mapbox-map",
    style: {
        version: 8,
        sources: {
            m_mono: {
                type: "raster",
                tiles: ["https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png"],
                tileSize: 256
            }
        },
        layers: [{
            id: "m_mono",
            type: "raster",
            source: "m_mono",
            minzoom: 0,
            maxzoom: 18
        }]
    },
    center: [139.7670, 35.6810],
    zoom: 13
});

map.on("load", function() {

});

// ズームコントロール
let nc = new mapboxgl.NavigationControl();
map.addControl(nc, 'top-left');
</script>