Leaflet - drawing arc
HTML
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-arc/bin/leaflet-arc.min.js"></script>
<script src="https://raw.githubusercontent.com/jieter/Leaflet-semicircle/master/Semicircle.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="map"></div>
CSS
#map {
height: 350px;
}
JavaScript
// Create the map
var map = L.map('map').setView([43.529427, 1.6266376], 11);
var multiple = L.layerGroup([]);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
// A - start of straight
L.marker([43.680008, 1.4600015]).bindTooltip('A').addTo(map);
// B - end of straight / start of turn
L.marker([43.529427, 1.6266376]).bindTooltip('B').addTo(map);
// C - mid of turn
L.marker([43.494312, 1.633946]).bindTooltip('C').addTo(map);
// D - end of of turn / start of straight
L.marker([43.47227, 1.5956908]).bindTooltip('D').addTo(map);
// E - end of straight
L.marker([43.465004, 1.5266705]).bindTooltip('E').addTo(map);
// inbound green line (~ straight line)
var inbound = L.Polyline.Arc(
[43.680008, 1.4600015],
[43.529427, 1.6266376], {
color: 'green',
weight: '1',
}
).addTo(map);
// inbound red line (~ straight line)
var outbound = L.Polyline.Arc(
[43.47227, 1.5956908],
[43.465004, 1.5266705], {
color: 'red',
weight: '1',
}
).addTo(map);
// TODO
// create Curved ARCs between B and C and D and E.
// RADIUS: 2.1217206 Nautical Miles - right curve == Clock wise
// Inputs are :
// - LAT LON of B
// - LAT LON of C
// - RADIUS
// - right or left turn
// Note: arc function I am looking for, shall be capable to draw also if only two points, radius and turn direction is given. It just happened in this case I have also C available. There will be 2 arcs. Between B-C and C-D, if arc is created between B and D, Arc between B and D shall go through C (control point)... Thus C can be used as control point.