Newer
Older
ryuei / map / App3 / mapobj.js
/* Add some objects on a Map */

var pl = [			// Polyline: 連続線分
    [38.892123,139.818884],
    [38.891187,139.819313],
    [38.891171,139.820273],
    [38.890237,139.820589],
    [38.888659,139.821394],
    [38.887340,139.822124],
    [38.884960,139.823385],
    [38.882940,139.824489],
    [38.882237,139.824999],
    [38.881581,139.825745],
    [38.881105,139.826506],
    [38.880500,139.828271],
    [38.880295,139.831114],
    [38.880308,139.833185],
    [38.880646,139.836522],
    [38.880788,139.838346],
    [38.882539,139.837973],
    [38.883644,139.838453],
    [38.885841,139.841537],
    [38.889615,139.847127],
    [38.891077,139.848973],
    [38.891922,139.850153],
    [38.890191,139.851971],
    [38.889853,139.852470],
    [38.889580,139.852900],
    [38.888809,139.854734],
    [38.889766,139.855394]
];
var plProp = {			// polylineに与えるオプション
    color: "#6E37A7",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    weight: 9		// 線分の太さ
};
var plobj = L.polyline(pl, plProp).addTo(mymap);

var pg = [			// Polygon: ポリゴン
    [38.888935,139.854691],
    [38.889895,139.852572],
    [38.893849,139.855099],
    [38.893098,139.855705],
    [38.892191,139.856842]  // 終点と始点は連結される
];
var pgOpt = {			// polygonに与えるオプション
    color: "#0C7500",		// 線分の色
    fillColor: "#1EA606",		// 塗りつぶし部分の色
    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("ポップアップ出るかな!");
pgobj.bindPopup("ポリゴンですよ!");
m1.bindPopup("東北公益文科大学ですよ!");
// 次のようにあらかじめ1つのポップアップを開いておくことも可能
m2.bindPopup("日本海総合病院ですよ!").openPopup();