Newer
Older
2022-naoyuki / leaflet / domon.js
@naoyuki naoyuki on 9 Dec 2022 3 KB edit
var mymap = L.map("mymap").setView([38.903268,139.826660], 14);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <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("駐車場までの道");