Newer
Older
2021-yuuji / csvmap.js
@HIROSE Yuuji HIROSE Yuuji on 10 Sep 2021 1 KB s/markerGrp/lg/g
function myInit(e) {
    /* 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */
    var mymap = L.map("csvmap").setView([38.891, 139.824], 16);
    L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);
    L.control.scale().addTo(mymap);
    var lg = L.featureGroup();
    fetch("locations.csv").then((resp) => {
	return resp.text();	// HTTPレスポンスから文字列を抜き出して返す
    }).then((txt) => {		// それを txt として受け取る
	for (let line of txt.split("\n")) {
	    if (line == "") continue;
	    let csv = line.split(","),
		lat = csv[0], lon = csv[1], place = csv[2];
	    console.log("la="+lat+", lo="+lon+", pl="+place);
	    let mk = L.marker([lat, lon]);
	    //lg.addLayer(mk.bindPopup(place));
	    mk.bindPopup(place).addTo(lg);
	}
	lg.addTo(mymap);
	if (false) {
	    document.getElementById("fit").addEventListener("click", (e) => {
		mymap.flyTo(lg.getBounds());
	    });
	} else {
	    mymap.fitBounds(lg.getBounds());
	}
    });
}
document.addEventListener("DOMContentLoaded", myInit, false);