ACDLを提唱します。その22

概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
アプリ作ったので、plunkerに上げてみた。

機能

マップから、２点間の距離を求める。

写真

サンプルコード

var map = L.map('map').setView([38.3748331, 139.9574997], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var info = L.control();
info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
    return this._div;
};
info.addTo(map);
info.update = function (stats) {
    const totalDistance = (stats.totalDistance ? (stats.totalDistance > 10000) ?(stats.totalDistance / 1000).toFixed(0) + ' km' : (stats.totalDistance).toFixed(0) + ' m' : 'invalid')
    this._div.innerHTML = '<h4>Statistics</h4><b>totalDistance</b><br/>' + totalDistance + '<br/><br/><b>Points</b><br/>' + stats.points +        '<br/><br/><b>Vertices</b><br/>' + stats.vertices;
};
var Berlin = new L.LatLng(38, 140);
var LosAngeles = new L.LatLng(38, 141);
var A = L.marker(LosAngeles, { 
    draggable: true 
}).addTo(map);
var B = L.marker(Berlin, { 
    draggable: true 
}).addTo(map).bindPopup("Drag me.").openPopup();
const geodesic = L.geodesic([A.getLatLng(), B.getLatLng()], {
    weight: 20,
    opacity: 0.5,
    color: 'red',
    steps: 4
}).addTo(map);
info.update(geodesic.statistics);
A.on('drag', (e) => {
    geodesic.setLatLngs([e.latlng, B.getLatLng()])
    info.update(geodesic.statistics);
});
B.on('drag', (e) => {
    geodesic.setLatLngs([A.getLatLng(), e.latlng])
    info.update(geodesic.statistics);
});

成果物

以上。