概要
ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
アプリ作ったので、plunkerに上げてみた。
機能
位置情報のCSVを読んで、MAPのマーカーします。
P1, 38.077908, 139.542229
P2, 38.075618, 139.642032
P3, 38.0738618, 139.441726
写真
サンプルコード
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:100%; height:70vh"></div>
<input id='btn' type='submit' value='run' onclick='run()'><br>
<textarea id='src'rows='4' cols='30'>
P1, 38.077908, 139.542229
P2, 38.075618, 139.642032
P3, 38.0738618, 139.441726
</textarea>
<script type='text/javascript'>
var map = L.map('map').setView([38.0748331, 139.4574997], 9);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function run() {
var line = src.value.split('\n');
for (var i = 0; i < line.length; i++)
{
var item = line[i].split(',');
var marker = new L.Marker([item[1], item[2]], {
title: item[0]
});
marker.addTo(map);
};
}
</script>
</body>
</html>
成果物
以上