Newer
Older
2021-masuko / csvmap.js
@masuko keigo masuko keigo on 10 Sep 2021 1019 bytes 追加
function myInit() {
    /* 北緯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);
    fetch("locations.csv").then((resp) => {
	return resp.text();	// HTTPレスポンスから文字列を抜き出して返す
    }).then((csvlines) => {	// それを csvlines として受け取る
var line, x, lon, lat, desc, lg=L.featureGroup();
for (line of csvlines.split("\n")) {
  if (line == "") continue;	
  x = line.split( "," );
  lon = x[0], lat = x[1], desc = x[2];
  
  L.marker([lon,lat]).bindPopup(desc).addTo(lg);
}	/* ここに csvlines を複数のCSV行として処理するものを書く */
  lg.addTo(mymap);
  mymap.fitBounds(lg.getBounds());
    });
}

document.addEventListener("DOMContentLoaded", myInit, false);