From 9cffb5d26735dd4575267d59ff54f37fbac279f2 Mon Sep 17 00:00:00 2001
From: Kazuhiro MUSASHI <simoom634@yahoo.co.jp>
Date: Tue, 9 Apr 2019 08:53:53 +0800
Subject: [PATCH 1/5] Add `leaflet-map.html` as a short code for the map.

---
 layouts/shortcodes/leaflet-map.html | 31 +++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 layouts/shortcodes/leaflet-map.html

diff --git a/layouts/shortcodes/leaflet-map.html b/layouts/shortcodes/leaflet-map.html
new file mode 100644
index 0000000..ad68261
--- /dev/null
+++ b/layouts/shortcodes/leaflet-map.html
@@ -0,0 +1,31 @@
+<div id='{{ .Get "id" }}'></div>
+
+<script>
+	// タイルレイヤーを作成する
+	var cyberjapandata = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+		  maxZoom: 18,
+		  attribution: '&copy; <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: '&copy; <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 &copy; <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('{{ .Get "id" }}', {layers: [mapbox]});
+	L.control.layers(baseMaps).addTo(mymap);
+
+	// 地図の中心座標とズームレベルを設定する
+	mymap.setView([{{ .Get "lat" }}, {{ .Get "long" }}], 15);
+</script>

From 78fd1b8673c23c1a7189aec929813645c51549bb Mon Sep 17 00:00:00 2001
From: Kazuhiro MUSASHI <simoom634@yahoo.co.jp>
Date: Thu, 11 Apr 2019 00:51:27 +0800
Subject: [PATCH 2/5] Add `leaflet-marker.html` as a shortcode for map marker.

---
 layouts/shortcodes/leaflet-marker.html | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 layouts/shortcodes/leaflet-marker.html

diff --git a/layouts/shortcodes/leaflet-marker.html b/layouts/shortcodes/leaflet-marker.html
new file mode 100644
index 0000000..6d84e32
--- /dev/null
+++ b/layouts/shortcodes/leaflet-marker.html
@@ -0,0 +1,4 @@
+<script>
+  var marker = L.marker([{{ .Get "lat" }}, {{ .Get "long" }}]).addTo(mymap);
+  marker.bindPopup("{{ .Get "msg" }}").openPopup();
+</script>

From 7e1fc240f3926ea8abd0b3aef11b4b9dc9660e0b Mon Sep 17 00:00:00 2001
From: Kazuhiro MUSASHI <simoom634@yahoo.co.jp>
Date: Sun, 14 Apr 2019 00:00:20 +0800
Subject: [PATCH 3/5] Add `leaflet-circle.html` as a shorcode for map circle.

---
 layouts/shortcodes/leaflet-circle.html | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 layouts/shortcodes/leaflet-circle.html

diff --git a/layouts/shortcodes/leaflet-circle.html b/layouts/shortcodes/leaflet-circle.html
new file mode 100644
index 0000000..3b44176
--- /dev/null
+++ b/layouts/shortcodes/leaflet-circle.html
@@ -0,0 +1,8 @@
+<script>
+    var circle = L.circle([{{ .Get "lat" }}, {{ .Get "long" }}], {
+      color: 'red',
+      fillColor: '#f03',
+      fillOpacity: 0.5,
+      radius: 500
+    }).addTo(mymap);
+</script>

From c1cc2467e75c107c3e5091082d900eaf935d58d0 Mon Sep 17 00:00:00 2001
From: Kazuhiro MUSASHI <simoom634@yahoo.co.jp>
Date: Sun, 14 Apr 2019 00:00:44 +0800
Subject: [PATCH 4/5] Add a shorcode for TopoJSON support.

---
 layouts/partials/labs-header-content.html |  1 +
 layouts/shortcodes/leaflet-topojson.html  | 29 +++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 layouts/shortcodes/leaflet-topojson.html

diff --git a/layouts/partials/labs-header-content.html b/layouts/partials/labs-header-content.html
index ba6c6af..c72ff0f 100644
--- a/layouts/partials/labs-header-content.html
+++ b/layouts/partials/labs-header-content.html
@@ -51,6 +51,7 @@
   {{ if .Params.leaflet }}
   <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
   {{ end }}
 
   <!-- OGP Settings
diff --git a/layouts/shortcodes/leaflet-topojson.html b/layouts/shortcodes/leaflet-topojson.html
new file mode 100644
index 0000000..0381274
--- /dev/null
+++ b/layouts/shortcodes/leaflet-topojson.html
@@ -0,0 +1,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('{{ .Get "url" | plainify }}')
+    .then(response => {
+      return response.json();
+    })
+    .then(data => {
+      topoLayer.addData(data);
+      topoLayer.addTo(mymap);
+    });
+</script>
+

From d6b773f8e8ed7345b2a79c5d71a412f439cba1ec Mon Sep 17 00:00:00 2001
From: Kazuhiro MUSASHI <simoom634@yahoo.co.jp>
Date: Tue, 9 Apr 2019 23:33:12 +0800
Subject: [PATCH 5/5] Modify contents to demonstrate `Leaflet.js` shorcodes.

---
 .../leaflet-js/001-leaflet-js-tutorial.md     | 233 ++++++++++++++++--
 1 file changed, 210 insertions(+), 23 deletions(-)

diff --git a/content/labs/leaflet-js/001-leaflet-js-tutorial.md b/content/labs/leaflet-js/001-leaflet-js-tutorial.md
index 01511aa..888ac1d 100644
--- a/content/labs/leaflet-js/001-leaflet-js-tutorial.md
+++ b/content/labs/leaflet-js/001-leaflet-js-tutorial.md
@@ -9,40 +9,227 @@ leaflet=true
 
 [Leaflet.js](https://leafletjs.com/)でMapboxのタイルを用いて地図を表示してみます:
 
-<div id="mapid"></div>
+{{< leaflet-map id="mapid" lat="35.7142" long="139.7774" >}}
+
+{{< leaflet-marker lat="35.7142" long="139.7774" msg="上野駅だよ" >}}
+
+{{< leaflet-circle lat="35.7237" long="139.7653" >}}
 
 <script>
-  var mymap = L.map('mapid').setView([35.7142, 139.7774], 13)
-
-  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q', {
-    attribution: 'Map data &copy; <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'
-  }).addTo(mymap);
-
-  var marker = L.marker([35.7142, 139.7774]).addTo(mymap);
-  marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
+	var polygon = L.polygon([
+	    [35.7173, 139.7657],
+	    [35.7142, 139.7774],
+	    [35.7068, 139.7700]
+	]).addTo(mymap);
 </script>
 
+<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>
+
+<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>
+
+{{< leaflet-topojson url="https://raw.githubusercontent.com/dataofjapan/land/master/tokyo.topojson" >}}
+
 ## コード
-こんな感じになります:
+チュートリアルなどにしたがって進めてみます。
+
+### 地図を表示する
+チュートリアルなどに従って地図を表示してみました。国土地理院・Open Street Map・Mapboxの3つのタイルを切り替えられるようにしてみました。
+
+地図は上野駅が中心になるように指定しています。
 
 ```
-<div id="mapid"></div>
+<div id='mapid'></div>
 
 <script>
-  var mymap = L.map('mapid').setView([35.7142, 139.7774], 13)
+	// タイルレイヤーを作成する
+	var cyberjapandata = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+		  maxZoom: 18,
+		  attribution: '&copy; <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: '&copy; <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 &copy; <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'
+		  });
 
-  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<access_token>' {
-    attribution: 'Map data &copy; <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: 'access_token'
-  }).addTo(mymap);
+	var baseMaps = {
+	    "国土地理院": cyberjapandata,
+	    "OpenStreetMap": openstreetmap,
+	    "Mapbox": mapbox
+	};
 
-  var marker = L.marker([35.7142, 139.7774]).addTo(mymap);
-  marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
+	// 地図を作成する
+	var mymap = L.map('mapid', {layers: [cyberjapandata]});
+	L.control.layers(baseMaps).addTo(mymap);
+
+	// 地図の中心座標とズームレベルを設定する
+	mymap.setView([35.7142,139.7774], 13);
 </script>
 ```
 
+### マーカーを設置する
+以下のように指定して、マーカーを設置します:
+
+```
+<script>
+  var marker = L.marker(["35.7142", "139.7774"]).addTo(mymap);
+  marker.bindPopup("上野駅だよ").openPopup();
+</script>
+```
+
+### サークルを設置する
+以下のように指定して、サークルを設置します:
+
+```
+<script>
+	var circle = L.circle([35.7237, 139.7653], {
+	    color: 'red',
+	    fillColor: '#f03',
+	    fillOpacity: 0.5,
+	    radius: 500
+	}).addTo(mymap);
+</script>
+```
+
+### ポリゴンを設置する
+複数の経度・緯度を指定し、その点を結んだ図形を描画します。
+
+```
+<script>
+	var polygon = L.polygon([
+	    [35.7173, 139.7657],
+	    [35.7142, 139.7774],
+	    [35.7068, 139.7700]
+	]).addTo(mymap);
+</script>
+```
+
+### GeoJSONからデータを読み込んで描画する
+こんな感じで描画できます:
+
+```
+<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>
+```
+
+### 外部のTopoJSONを読み込んで描画する
+GeoJSONだけでなく、TopoJSONという形式もあるようです。ここでは外部のTopoJSONを読み込んで、描画してみます。
+
+```
+<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>
+```
+
+## 参考
+- [Tutorials - Leaflet - a JavaScript library for interactive maps](https://leafletjs.com/examples.html)
+- [【JavaScript】fetchを使ったAPIデータの取得方法 | Web白熱教室](https://tsuyopon.xyz/2019/01/05/how-to-use-the-fetch-api-in-js/)
+- [Maps with Leaflet,  TopoJSON &amp; Chroma](http://blog.webkid.io/maps-with-leaflet-and-topojson/)
+- [leaflet.jsの地図に駅をプロットする - 小さなエンドウ豆](http://h-piiice16.hatenablog.com/entry/2017/06/11/104155)
+- [オープンデータを地図上に表示してみる | 深ノオト](http://www.inqsite.net/weblog/4538/)
+- [Leaflet.js を使って GeoJSON データを地図上に表示してみる その１ - Qiita](https://qiita.com/sin164/items/1ed25130fa5a1de00ea8)
+- [GitHub - dataofjapan/land](https://github.com/dataofjapan/land)
+- [GitHub - niiyz/JapanGeoGo: GeoJson of Japan.](https://github.com/niiyz/JapanGeoGo)
+- [Continental GeoJson · GitHub](https://gist.github.com/cmunns/76fb72646a68202e6bde)
+