/* Add some objects on a Map */ document.addEventListener("DOMContentLoaded", () => { var pl = [ // Polyline: 連続線分 [38.895127,139.819371], [38.894903,139.819361], [38.894907,139.819951], [38.896461,139.819897], [38.897229,139.819586], [38.898849,139.818916], [38.903195,139.816936], [38.903950,139.816582], [38.904418,139.814345], [38.904576,139.814356], [38.904551,139.814620], [38.904706,139.814587] ]; var plProp = { stroke:true, // polylineに与えるオプション color: "#D92B04", // 線分の色 opacity: 0.7, // 線分の透明度 weight: 9 // 線分の太さ }; var plobj = L.polyline(pl, plProp).addTo(mymap); var pg = [ // Polygon: ポリゴン [38.904586,139.814572], [38.904589,139.814415], [38.904768,139.814447], [38.904760,139.814849], [38.904647,139.814844], [38.904647,139.814571] // 終点と始点は連結される ]; var pgOpt = { stroke:true, // polygonに与えるオプション color: "black", // 線分の色 fillColor: "yellow", // 塗りつぶし部分の色 fillOpacity: 0.5 // clickable:false // 塗りつぶし部分の透明度 }; var pgobj = L.polygon(pg, pgOpt).addTo(mymap); var marker1 = pl[0], marker2 = pg[0], marker3 = pl[7];// polylineとpolygon各々の始点 var m1opt = {title: "その1"}, m2opt = {title: "その2"},m3opt={title: "その3"}; var m1 = L.marker(marker1, m1opt).addTo(mymap); var m2 = L.marker(marker2, m2opt).addTo(mymap); var m3 = L.marker(marker3, m3opt).addTo(mymap); var circle1 = L.circle(pl[11],{radius: 200, color:'', fillColor: '#399ade'}).addTo(mymap); // /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */ // 次のようにあらかじめ1つのポップアップを開いておくことも可能 var osmTile = // OSMのタイル L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> \ contributors' }); var gsiTile = // 国土地理院タイル L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>' }); m1.bindPopup("公益大学カフェテリア側駐車場スタート!!!").openPopup(); m2.bindPopup("〒998-0054 山形県酒田市宮野浦2丁目3−3 酒田市宮野浦学区コミュニティ防災センター"); m3.bindPopup("斜め左方向です"); plobj.bindPopup("多分坂道"); circle1.bindPopup("目的地周辺です");