From c6922beb3a5a1601aba0c74739f5e889daa65c2a Mon Sep 17 00:00:00 2001
From: Kazuhiro MUSASHI <simoom634@yahoo.co.jp>
Date: Sat, 29 Jun 2019 19:40:51 +0800
Subject: [PATCH] =?UTF-8?q?Chapter3-2=E3=81=AE=E8=A8=98=E4=BA=8B=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../005-display-raster-style-data-mapbox.md   | 221 ++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 content/labs/leaflet-js-mapbox-js/005-display-raster-style-data-mapbox.md

diff --git a/content/labs/leaflet-js-mapbox-js/005-display-raster-style-data-mapbox.md b/content/labs/leaflet-js-mapbox-js/005-display-raster-style-data-mapbox.md
new file mode 100644
index 0000000..bd7cd76
--- /dev/null
+++ b/content/labs/leaflet-js-mapbox-js/005-display-raster-style-data-mapbox.md
@@ -0,0 +1,221 @@
++++
+title = "JavaScriptではじめるWebマップアプリケーション: Chapter3-2"
+date = 2019-06-29T18:41:00+07:00
+Description = "JavaScriptではじめるWebマップアプリケーションの内容を淡々と試してみます。"
+Categories = ["Mapbox GL JS"]
++++
+
+『[JavaScriptではじめるWebマップアプリケーション \(PDF版\)](https://booth.pm/ja/items/1314906)』の内容を淡々と試してみます。`Mapbox.js`でラスタ形式の地図を表示してみます:
+
+<nav id="menu"></nav>
+<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;
+}
+
+#menu {
+  background: #fff;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  right: 10px;
+  border-radius: 3px;
+  width: 180px;
+  border: 1px solid rgba(0,0,0,0.4);
+}
+
+#menu a{
+  font-size: 13 px;
+  color: #404040;
+  display: block;
+  margin: 0;
+  padding: 10px;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(0,0,0,0.25);
+  text-align: centerl
+}
+
+#menu a:last-child {
+  border: none;
+}
+
+#menu a:hover {
+  background-color: #f8f8f8;
+  color: #404040;
+}
+
+#menu a.active {
+  background-color: #8DCF3F;
+  color: #ffffff;
+}
+
+#menu a.active:hover {
+  background: #79bb2b;
+}
+-->
+</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() {
+
+  // MIERUNE Color 読み込み
+  map.addSource("m_color", {
+    type: "raster",
+    tiles: ["https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png"],
+    tileSize: 256
+  });
+  map.addLayer({
+    id: "m_color",
+    type: "raster",
+    source: "m_color",
+    minzoom: 0,
+    maxzoom: 18
+  });
+
+  // 地理院タイル 淡色読み込み
+  map.addSource("t_pale", {
+    type: "raster",
+    tiles: ["http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png"],
+    tileSize: 256
+  });
+  map.addLayer({
+    id: "t_pale",
+    type: "raster",
+    source: "t_pale",
+    minzoom: 0,
+    maxzoom: 18
+  });
+
+  // 地理院タイル オルソ読み込み
+  map.addSource("t_ort", {
+    type: "raster",
+    tiles: ["http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg"],
+    tileSize: 256
+  });
+  map.addLayer({
+    id: "t_ort",
+    type: "raster",
+    source: "t_ort",
+    minzoom: 0,
+    maxzoom: 18
+  });
+
+  // OpenStreetMap 読み込み
+  map.addSource("o_std", {
+    type: "raster",
+    tiles: [
+      "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    ],
+    tileSize: 256
+  });
+  map.addLayer({
+    id: "o_std",
+    type: "raster",
+    source: "o_std",
+    minzoom: 0,
+    maxzoom: 18
+  });
+
+  // レイヤ設定
+  let Map_BaseLayer = {
+    m_mono: "MIERUNE MONO",
+    m_color: "MIERUNE Color",
+    t_pale: "地理院タイル 淡色",
+    t_ort: "地理院タイル オルソ",
+    o_std: "OpenStreetMap"
+  };
+
+  // レイヤメニュー作成
+  for (let i = 0; i < Object.keys(Map_BaseLayer).length; i++) {
+    // レイヤID取得
+    let id = Object.keys(Map_BaseLayer)[i];
+    // aタグ作成
+    let link = document.createElement("a");
+    link.href = "#";
+    // id追加
+    link.id = id;
+    // 名称追加
+    link.textContent = Map_BaseLayer[id];
+
+    // 初期表示 m_mono 以外非表示
+    if (id === "m_mono") {
+      link.className = "active";
+    } else {
+      map.setLayoutProperty(id, "visibility", "none");
+      link.className = "";
+    }
+
+    // aタグクリック処理
+    link.onclick = function (e) {
+      // id取得
+      let clickedLayer = this.id;
+      e.preventDefault();
+      e.stopPropagation();
+
+      // ON/OFF状態取得
+      let visibility = map.getLayoutProperty(clickedLayer, "visibility");
+
+      // ON/OFF 判断
+      if (visibility === "visible") {
+      } else {
+        for (let j = 0; j < Object.keys(Map_BaseLayer).length; j++) {
+          // レイヤID取得
+          let ch_id = Object.keys(Map_BaseLayer)[j];
+
+          // レイヤの表示・非表示
+          if (ch_id === clickedLayer) {
+            // クリックしたレイヤを表示
+            this.className = "active";
+            map.setLayoutProperty(clickedLayer, "visibility", "visible");
+          } else {
+            // クリックしたレイヤ以外を非表示
+            let ch_obj = document.getElementById(ch_id);
+            ch_obj.className = "";
+            map.setLayoutProperty(ch_id, "visibility", "none");
+          }
+        }
+      }
+    };
+
+    // レイヤメニューにレイヤ追加
+    let layers = document.getElementById("menu");
+    layers.appendChild(link);
+  };
+});
+
+// ズームコントロール
+let nc = new mapboxgl.NavigationControl();
+map.addControl(nc, 'top-left');
+</script>
+