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);

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);

• javascript
• leaflet

1 Answer 1

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/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm/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./[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg./[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
 
 <script src="https://npmcdn./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).