How to calculate a new point (marker B) at a given distance in meter from a marker A and at a given angle in degree?
Google API has this but I can't find it in Leaflet:
var pointA = new google.maps.LatLng(25.48, -71.26);
var radiusInKm = 10;
var pointB = pointA.destinationPoint(90, radiusInKm);
You can use the destination
method of Leaflet.GeometryUtil to calculate the destination point and create a marker there :
var center = [40.69, -73.98];
var radiusInKm = 10;
var angleInDegrees = 90;
var A = L.marker(center).addTo(map);
var B = L.GeometryUtil.destination(markerA.getLatLng(), angleInDegrees, radiusInKm * 1000);
L.marker(B).addTo(map);
and a demo
var center = [40.69,-73.98];
var radiusInKm = 10;
var angleInDegrees = 90;
var map = L.map('map').setView(center, 11);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var marker = L.marker(center).addTo(map);
L.circle(marker.getLatLng(), {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.2,
radius: radiusInKm * 1000
}).addTo(map);
var to = L.GeometryUtil.destination(marker.getLatLng(), angleInDegrees, radiusInKm * 1000);
L.marker(to).addTo(map);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<script src="https://npmcdn.com/leaflet-geometryutil"></script>
<div id='map'></div>
If you want to avoid an external library, you can take inspiration from the destination
method source code (currently at line 712).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With