var mymap = L.map("mymap").setView([38.903268,139.826660], 14); L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(mymap); /* Add some objects on a Map */ var pl = [ // Polyline: 連続線分 [38.892123,139.818884], [38.891187,139.819313], [38.891196,139.820108], [38.894832,139.820037], [38.896669,139.819908], [38.898740,139.818878], [38.908698,139.835780], [38.910011,139.837418], [38.912316,139.839821], [38.913941,139.840522], [38.920297,139.842442], [38.920390,139.842213], ]; var plProp = { // polylineのプロパティを定義 color: "red", // 線分の色 opacity: 0.4, // 線分の透明度 weight: 9 // 線分の太さ }; var plobj = L.polyline(pl, plProp).addTo(mymap); // 酒田MFの方↓------------------------------------------- var pg = [ // Polygon: ポリゴン [38.920469,139.842106], [38.920444,139.842417], [38.920256,139.842365], [38.920352,139.842074], // 終点と始点は連結される ]; var pgOpt = { // polygonに与えるオプション color: "blue", // 線分の色 fillColor: "yellow", // 塗りつぶし部分の色 fillOpacity: 0.2 // 塗りつぶし部分の透明度 }; var pgobj = L.polygon(pg, pgOpt).addTo(mymap); var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点 var m1opt = {title: "その1"}, m2opt = {title: "その2"}; var m1 = L.marker(marker1, m1opt).addTo(mymap); var m2 = L.marker(marker2, m2opt).addTo(mymap); /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */ plobj.bindPopup("大学から酒田MFまでの道"); pgobj.bindPopup("とうちゃく"); m1.bindPopup("すたーと"); // 次のようにあらかじめ1つのポップアップを開いておくことも可能 m2.bindPopup("酒田ミュージックファクトリー"); // 駐車場のポリゴン↓------------------------------------------------------------ var pg = [ [38.921252,139.844661], [38.920593,139.845008], [38.920949,139.845824], [38.921469,139.845352], ]; var pgOpt = { // polygonに与えるオプション color: "pink", // 線分の色 fillColor: "blue", // 塗りつぶし部分の色 fillOpacity: 0.2 // 塗りつぶし部分の透明度 }; var pgobj = L.polygon(pg, pgOpt).addTo(mymap); var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点 var m1opt = {title: "その1"}, m2opt = {title: "その2"}; var m3 = L.marker(marker2, m2opt).addTo(mymap); pgobj.bindPopup("駐車料金を忘れずに!"); m3.bindPopup("駐車場はここ"); // 駐車場までの道↓----------------------------------- var pl = [ // Polyline: 連続線分 [38.920297,139.842442], [38.921111,139.842646], [38.920980,139.843422], [38.921314,139.844563], [38.921002,139.844745], ]; var plProp = { // polylineのプロパティを定義 color: "blue", // 線分の色 opacity: 0.4, // 線分の透明度 weight: 9 // 線分の太さ }; var plobj = L.polyline(pl, plProp).addTo(mymap); plobj.bindPopup("駐車場までの道");