Newer
Older
2022-yuto / map / domon / mapobj.js
/* Add some objects on a Map */

var pl = [			// Polyline: 連続線分
    [38.892123,139.818884],
    [38.892123,139.8200],
    [38.89099,139.82015],
    [38.8844,139.8236],
    [38.8844,139.8236],
    [38.8814,139.8258],
    [38.88027,139.82866],
    [38.8806,139.8384],
    [38.8822,139.8379],
    [38.8838,139.8386],
    [38.89275,139.85142,],
    [38.89195,139.85260,]
];
var plProp = {			// polylineに与えるオプション
    color: "green",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    weight: 9			// 線分の太さ
};
var plobj = L.polyline(pl, plProp).addTo(mymap);

var pg = [			// Polygon: ポリゴン
	// 終点と始点は連結される
    [38.89263,139.85264],
    [38.89244,139.85324],
    [38.89127,139.85248],
    [38.89147,139.85186]
];
var pgOpt = {			// polygonに与えるオプション
    color: "#ba55d3",		// 線分の色
    fillColor: "red",		// 塗りつぶし部分の色
    fillOpacity: 0.2		// 塗りつぶし部分の透明度
};
var pgobj = L.polygon(pg, pgOpt).addTo(mymap);

var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点
var m1opt = {title: "東北公益文科大学"}, m2opt = {title: "イオン酒田南店"};
var m1 = L.marker(marker1, m1opt).addTo(mymap);
var m2 = L.marker(marker2, m2opt).addTo(mymap);

/* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
plobj.bindPopup("ポリラインですよ!");
pgobj.bindPopup("ポリゴンですよ!");
m1.bindPopup("東北公益文科大学ですよ!");
// 次のようにあらかじめ1つのポップアップを開いておくことも可能
m2.bindPopup("イオン酒田南店ですよ!").openPopup();