-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathleaflet-multisite.html
108 lines (89 loc) · 4.37 KB
/
leaflet-multisite.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
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<title>CloudRF Multisite 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 Multisite 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 the map to add an RF coverage layer to the Leaflet map calculated by the CloudRF API. RF settings are taken from the <code>CloudRF.js</code> file.</p>
<p>Please note that in order to make use of the multiste demo you are required to have a plan with GPU support.</p>
<p><a href="index.html">Click here</a> to see reference documentation and other demos.</p>
<div id="mapMultisite" 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('mapMultisite').setView([50.333, 6.941], 14);
var cars = [];
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [32, 32],
iconAnchor: [16, 16],
popupAnchor: [0, 0]
}
});
function addCar(latitude, longitude) {
car = new L.marker([latitude, longitude], { title: `Car${cars.length + 1}`, draggable: 'true', icon: new LeafIcon({iconUrl: 'images/car.png'}) });
map.addLayer(car);
car.on('dragend', function (event) {
var marker = event.target;
var position = marker.getLatLng();
marker.setLatLng(new L.LatLng(position.lat, position.lng), { draggable: 'true' });
createMultisiteRequest(cars);
});
cars.push(car);
}
function onMapClick(e) {
marker = addCar(e.latlng.lat, e.latlng.lng);
createMultisiteRequest(cars);
};
map.on('click', onMapClick);
addCar(50.33508780839669, 6.946938369950825);
addCar(50.33630126946575, 6.943714563675718);
addCar(50.33094332349924, 6.938598138059326);
addCar(50.32554681914269, 6.93672434416994);
</script>
</body>
</html>