-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathleaflet-celltowers.html
100 lines (81 loc) · 3.97 KB
/
leaflet-celltowers.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<title>CloudRF Cell-Tower Leaflet Demo</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<link rel="stylesheet" href="CloudRF.css">
</head>
<body class="p-2">
<h1>CloudRF Cell-Tower Leaflet Demo</h1>
<div class="alert alert-danger d-none" role="alert" id="dangerAlert"></div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">API Key</span>
<input id="apiKey" type="password" class="form-control" placeholder="Your API Key for service defined below.">
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">API Service Base URL</span>
<input id="apiServiceBaseUrl" type="text" class="form-control" value="https://api.cloudrf.com" placeholder="The base URL of where your API requests will be made to.">
</div>
<p>Enter your API key above and then click on polygon shapes, representing cell tower panels.</p>
<p>These shapes have been assigned custom attributes, such as azimuth, which are used to customise a cellular template request which is sent to the CloudRF API.</p>
<p><a href="index.html">Click here</a> to see reference documentation and other demos.</p>
<div id="mapCellTowers" class="map"></div>
<div class="d-flex justify-content-between">
<div class="w-50 mx-4">
<h2>Request</h2>
<pre id="requestRawOutput" class="p-3 bg-dark text-white font-monospace overflow-x-scroll">No data to show yet...</pre>
</div>
<div class="w-50 mx-4">
<h2>Response</h2>
<pre id="responseRawOutput" class="p-3 bg-dark text-white font-monospace overflow-x-scroll">No data to show yet...</pre>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="CloudRF.js"></script>
<script>
var map = L.map('mapCellTowers').setView([38.92609, 1.4406], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function onMapClick(e) {
var crfOptions = e.sourceTarget.options.cloudrf;
console.log(crfOptions);
createRFSectorRequest(crfOptions.lat, crfOptions.lon, crfOptions.azi, crfOptions.txh, crfOptions.col, "leaflet");
}
var latlngs = [[38.92609, 1.4406], [38.931382, 1.429067], [38.93055, 1.4506]]; // N
L.polygon(latlngs, {
color: 'red',
cloudrf: { 'azi': 0, 'lat': 38.92609, 'lon': 1.4406, 'txh': 15, 'col': 2 }
}).addTo(map).on("click", onMapClick);
var latlngs = [[38.92609, 1.4406], [38.93055, 1.4506], [38.91695, 1.4406]]; // SE
L.polygon(latlngs, {
color: 'green',
cloudrf: { 'azi': 120, 'lat': 38.92609, 'lon': 1.4406, 'txh': 15, 'col': 3 }
}).addTo(map).on("click", onMapClick);
var latlngs = [[38.92609, 1.4406], [38.931382, 1.429067], [38.91695, 1.4406]]; // SW
L.polygon(latlngs, {
color: 'blue',
cloudrf: { 'azi': 240, 'lat': 38.92609, 'lon': 1.4406, 'txh': 15, 'col': 4 }
}).addTo(map).on("click", onMapClick);
</script>
</body>
</html>