(() => { function MyMap(id) { var mymap; function init(id) { mymap = L.map(id).setView([38.891, 139.824], 16); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap \ contributors' }).addTo(mymap); } function mapObjs() { var pl = [ // Polyline: 連続線分 [38.892123,139.818884], [38.891187,139.819313], [38.891780,139.823411] ]; var plProp = { // polylineに与えるオプション color: "red", // 線分の色 opacity: 0.4, // 線分の透明度 weight: 9 // 線分の太さ }; L.polyline(pl, plProp).addTo(mymap); var pg = [ // Polygon: ポリゴン [38.895,139.821], [38.895,139.822], [38.894,139.822], [38.894,139.820], // 終点と始点は連結される ]; var pgOpt = { // polygonに与えるオプション color: "blue", // 線分の色 fillColor: "pink", // 塗りつぶし部分の色 fillOpacity: 0.2 // 塗りつぶし部分の透明度 }; L.polygon(pg, pgOpt).addTo(mymap); var marker1 = pl[0], marker2 = pg[0]; var m1opt = {title: "その1"}, m2opt = {title: "その2"}; var m1 = L.marker(marker1, m1opt).addTo(mymap); var m2 = L.marker(marker2, m2opt).addTo(mymap); m1.bindPopup("その1ですよ!"); m2.bindPopup("その2ですよ!"); } // ↓初期化時にすぐ実行される init(id); mapObjs(); }; document.addEventListener("DOMContentLoaded", function(){ MyMap("mymap");}, false); })();