diff --git a/map/layers/markerlayer.html b/map/layers/markerlayer.html
new file mode 100644
index 0000000..6164b97
--- /dev/null
+++ b/map/layers/markerlayer.html
@@ -0,0 +1,19 @@
+
+
+
+MarkerLayer
+
+
+
+
+
+
+
+
+
+
+
diff --git a/map/layers/markerlayer.js b/map/layers/markerlayer.js
new file mode 100644
index 0000000..0656dce
--- /dev/null
+++ b/map/layers/markerlayer.js
@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", () => {
+ // 例: コントロールレイヤ
+ var mlCenter = [38.891, 139.824];
+ var otherPoint = [38.890, 139.822];
+ var osmTile = // OSMのタイル
+ L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution:
+ '© OpenStreetMap \
+contributors'
+ });
+ var gsiTile = // 国土地理院タイル
+ L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
+ attribution:
+ '国土地理院'
+ });
+ var markerLayer1 = L.marker(mlCenter);
+ var markerLayer2 = L.marker(otherPoint);
+ var mlmap = L.map("markerlayer", {
+ layers: [gsiTile, markerLayer1, markerLayer2],
+ center: mlCenter, zoom: 16, scrollWheelZoom: false
+ });
+ /* 上記4行は以下のようにするのと同じ効果
+ var mlmap = L.map("markerlayer").setView(mlCenter, 16);
+ gsiTile.addTo(mlmap);
+ markerLayer1.addTo(mlmap);
+ markerLayer2.addTo(mlmap); */
+ // 以下、コントロールレイヤの設定
+ // ベースレイヤはOSMと国土地理院2つをJSON形式で指定
+ var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
+ // マーカーを2つオーバーレイレイヤに指定
+ var ovlLayers = {'マーク1': markerLayer1, 'マーク2': markerLayer2};
+ // ベースレイヤとオーバーレイレイヤをマップに追加
+ L.control.layers(baseLayers, ovlLayers).addTo(mlmap);
+}, false); // HTML文書がロードされたら上のアロー関数を呼ばせる