JSFiddle - React, Tailwind, and code Playground

by Jonatas Walker

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css">
<div id="map" style="width=100%; height:500px;"></div>

JavaScript

$(document).ready(function(){
    L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
    map = L.mapbox.map('map', 'inclanfunk.l4mg4b99').setView([39.72, -101.68], 5);
    
    var coord1 = [39.72, -101.68];
    var latLng1 = L.latLng(coord1[0], coord1[1]);
    map.setView(coord1, 15);
    var marker = L.marker(coord1).addTo(map);
    
    var coord2 = getCoordinate(coord1, 100);
    var latLng2 = L.latLng(coord2[0], coord2[1]);
    var marker2 = L.marker(coord2).addTo(map);
    
    //check distance with leaflet
    var distance = latLng1.distanceTo(latLng2);
    console.info(distance);
    console.info(coord1, coord2);
    
    // Let us assume radius is 100. How do I plot another marker 100 units away?
    // Do I convert the 100 units to latitude or longitude and then plot the difference?
    
    
    // I also need to make the other marker draggable which is easy
    // But only on the in a fixed path, which is something I am confused about
});
function getCoordinate(coord, radius){
    var r = radius / 111300
        , y0 = coord[0]
        , x0 = coord[1]
        , u = Math.random()
        , v = Math.random()
        , w = r * Math.sqrt(u)
        , t = 2 * Math.PI * v
        , x = w * Math.cos(t)
        , y1 = w * Math.sin(t)
        , x1 = x / Math.cos(y0)
    
    var newY = y0 + y1,
        newX = x0 + x1;
    return [newY, newX];
}