-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
78 lines (61 loc) · 2.47 KB
/
index.html
File metadata and controls
78 lines (61 loc) · 2.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<head>
<meta charset="UTF-8">
<title>offset</title>
</head>
<body>
<div id="mapid"></div>
</body>
</html>
<style>
#mapid { height: 800px; }
</style>
<script>
var url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var attribution = "<a href="http://osm.org/copyright">OpenStreetMap</a>____";
var center = [21.2901808, -157.8299651];
var mymap = L.map('mapid').setView([21.2901808, -157.8299651], 18);
L.tileLayer(url, { attribution: attribution, maxZoom: 18 }).addTo(mymap);
var markersLayer = new L.LayerGroup();
function marker(lat,lng){
return L.marker([lat,lng]).addTo(mymap);
}
function findOffset(lat, lng, n, e){ // math :)
var eartRadius=6378137;
var distanceNorthOffset = n;
var distanceEastOffset = e;
var dLat = distanceNorthOffset/eartRadius;
var dLng = distanceEastOffset/(eartRadius*Math.cos(Math.PI*lat/180));
var latOffset = lat + dLat * 180/Math.PI
var lngOffset = lng + dLng * 180/Math.PI
return [latOffset,lngOffset];
}
function makePlot(lat,lng){
var distances = [10,20,30,40,50,60,70,80,90,100]; // distance in meters
var N = distances.map(e => findOffset(lat,lng,e,0));
var S = distances.map(e => findOffset(lat,lng,-e,0));
var E = distances.map(e => findOffset(lat,lng,0,e));
var W = distances.map(e => findOffset(lat,lng,0,-e));
var NE = distances.map(e => findOffset(lat,lng,e,e));
var SE = distances.map(e => findOffset(lat,lng,-e,e));
var NW = distances.map(e => findOffset(lat,lng,e,-e));
var SW = distances.map(e => findOffset(lat,lng,-e,-e));
return [...N,...S,...E,...W,...NE,...SE,...NW,...SW]; // concat all arrays into one array to loop
}
mymap.on('click', function(e) { // e = event object contains coords
var lat = e.latlng.lat;
var lng = e.latlng.lng;
var arr = makePlot(lat,lng);
arr.map(e => { // loop through all [lat,lng]
markersLayer.addLayer(marker(e[0],e[1]).bindPopup(`lat:${e[0]},lng:${e[1]}`));
})
});
</script>