Newer
Older
Program-Storage / map / web / mymap.js
(() => {
function MyMap(id) {
    var mymap;
    function init(id) {
	mymap = L.map(id).setView([38.891, 139.824], 16);
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	    attribution:
	    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
		contributors'
	}).addTo(mymap);
    }
    function mapObjs() {
	var pl = [			// Polyline: 連続線分
	    [38.892123,139.818884],
	    [38.891187,139.819313],
	    [38.891780,139.823411]
	];
	var plProp = {			// polylineに与えるオプション
	    color: "red",		// 線分の色
	    opacity: 0.4,		// 線分の透明度
	    weight: 9			// 線分の太さ
	};
	L.polyline(pl, plProp).addTo(mymap);

	var pg = [			// Polygon: ポリゴン
	    [38.895,139.821],
	    [38.895,139.822],
	    [38.894,139.822],
	    [38.894,139.820],		// 終点と始点は連結される
	];
	var pgOpt = {			// polygonに与えるオプション
	    color: "blue",		// 線分の色
	    fillColor: "pink",		// 塗りつぶし部分の色
	    fillOpacity: 0.2		// 塗りつぶし部分の透明度
	};
	L.polygon(pg, pgOpt).addTo(mymap);

	var marker1 = pl[0], marker2 = pg[0];
	var m1opt = {title: "その1"}, m2opt = {title: "その2"};
	var m1 = L.marker(marker1, m1opt).addTo(mymap);
	var m2 = L.marker(marker2, m2opt).addTo(mymap);
	m1.bindPopup("その1ですよ!");
	m2.bindPopup("その2ですよ!");
    }
    // ↓初期化時にすぐ実行される
    init(id);
    mapObjs();
};
document.addEventListener("DOMContentLoaded", function(){
    MyMap("mymap");}, false);
})();