67979

Leaflet - create a marker with latLon + distance (meter) + angle (degree)

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

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/9Zedh.png" alt="enter image description here">

Answer1:

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

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

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: '&copy; <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/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.2.0/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).

Recommend

  • Icon url in mapbox
  • How do I change the marker of Mapbox with directionsjs? It shows A and B markers [duplicate]
  • Popups no longer function after filtering markers in mapbox
  • Why is my click function not working as expected?
  • Mongoose update multiple documents
  • Leaflet custom icon resize on zoom. Performance icon vs divicon
  • Json file dosen't show up in google chrome
  • ReactJS with Leaflet: tiles not correctly displayed until page refresh
  • Leaflet popup for geojson Ajax
  • Get average outer pixel color of image
  • Checking if an array of structs is empty or not
  • Convert javascript to json?
  • add image to rect polygon in leaflet
  • Adding custom icon and marker data together using Mapbox
  • Google Apps Engine PHP Mail API - $image_data
  • Dynamic table, insert items in cells, sorted corresponding to thead
  • Getting Uncaught TypeError: Cannot read property 'length' of undefined on leafletjs
  • Tiles generated from mbutil does not render using leafletjs
  • Translate C code into Haskell
  • setBounds to two different featureGroups at once mapbox leaflet?
  • How to create a draggable menu div (desktop and mobile) [closed]
  • how I add view helper in zend
  • Python 2.7 - IPython 'raw_input' and appending to a list - adds 'u' before each
  • leaflet how to make dynamic picture popup using js
  • Custom number picker inside fragment
  • Leaflet circle radius doesn't matter
  • Transparent Background and No Buttons When Customizing Content of an AlertDialog on onPrepareDialog
  • Custom AlertDialog Borders
  • In Mapbox.js, how to smooth a polyline?
  • Can't connect using mysql_connect to Database in ipage.com hosting?
  • Update Google Maps traffic layer without page reloading
  • Installing iPhone App to iPhone
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • script to move all files from one location to another location
  • Error creating VM instance in Google Compute Engine
  • Hits per day in Google Big Query
  • JTable with a ScrollPane misbehaving
  • how does django model after text[] in postgresql [duplicate]
  • Running Map reduces the dimensions of the matrices
  • Android Heatmap on canvas or ImageView