github-mirrors/3lips
1
0
Fork 0
mirror of https://github.com/30hours/3lips.git synced 2024-11-18 12:33:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Frontend fixed and Cesium map working

Browse source
This commit is contained in:
30hours 2024-02-07 12:44:56 +00:00
parent f3921d5385
commit 24620e1bf5
10 changed files with 211 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/main.py
View file

@ -14,12 +14,15 @@ servers = [
associators = [ associators = [
{"name": "ADSB Associator", "id": "adsb-associator"} {"name": "ADSB Associator", "id": "adsb-associator"}
] ]
# coordregs = [
# {"name": "Ellipse Analytic Intersection", "id": "ellipse-conic-int"},
# {"name": "Ellipse Parametric", "id": "ellipse-parametric"},
# {"name": "Ellipse Parametric (Arc Length)", "id": "ellipse-parametric-arc"},
# {"name": "Ellipsoid Parametric", "id": "ellipsoid-parametric"},
# {"name": "Ellipsoid Parametric (Arc Length)", "id": "ellipsoid-parametric-arc"}
# ]
coordregs = [ coordregs = [
{"name": "Ellipse Analytic Intersection", "id": "ellipse-conic-int"}, {"name": "Ellipse Parametric", "id": "ellipse-parametric"}
{"name": "Ellipse Parametric", "id": "ellipse-parametric"},
{"name": "Ellipse Parametric (Arc Length)", "id": "ellipse-parametric-arc"},
{"name": "Ellipsoid Parametric", "id": "ellipsoid-parametric"},
{"name": "Ellipsoid Parametric (Arc Length)", "id": "ellipsoid-parametric-arc"}
] ]
adsbs = [ adsbs = [

BIN
src/map/icon/esri.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/map/icon/mapBoxDark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/map/icon/mapBoxStreets.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/map/icon/opentopomap.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

20
src/map/index.html
View file

@ -2,18 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<!-- Use correct character set. --> <!-- Use correct character set. -->
<meta charset="utf-8" /> <meta charset="utf-8"/>
<!-- Tell IE to use the latest, best version. --> <!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
name="viewport" <title>3lips Map</title>
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" <script src="/cesium/Build/Cesium/Cesium.js"></script>
/>
<title>Hello World!</title>
<script src="/public/cesium/Build/CesiumUnminified/Cesium.js"></script>
<style> <style>
@import url(/public/cesium/Build/CesiumUnminified/Widgets/widgets.css); @import url(/cesium/Build/Cesium/Widgets/widgets.css);
html, html,
body, body,
#cesiumContainer { #cesiumContainer {
@ -27,8 +24,7 @@
</head> </head>
<body> <body>
<div id="cesiumContainer"></div> <div id="cesiumContainer"></div>
<script> <script src="lib/jquery-3.6.0.min.js"></script>
const viewer = new Cesium.Viewer("cesiumContainer"); <script src="main.js"></script>
</script>
</body> </body>
</html> </html>

2
src/map/lib/jquery-3.6.0.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

135
src/map/main.js Normal file
View file

@ -0,0 +1,135 @@
// default camera to Australia
var extent = Cesium.Rectangle.fromDegrees(138.44, -35.19, 138.93, -34.51);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
var imageryProviders = [];
imageryProviders.push(new Cesium.ProviderViewModel({
name: "ESRI Adelaide",
iconUrl: './icon/esri.jpg',
tooltip: 'ESRI Adelaide Tiles',
category: 'Offline',
creationFunction: function() {
return new Cesium.UrlTemplateImageryProvider({
url: 'https://tile.datr.dev/data/esri-adelaide/{z}/{x}/{y}.jpg',
credit: 'Esri, Maxar, Earthstar Geographics, USDA FSA, USGS, Aerogrid, IGN, IGP, and the GIS User Community',
maximumLevel: 20,
});
}
}));
imageryProviders.push(new Cesium.ProviderViewModel({
name: "MapBox Streets v11",
iconUrl: './icon/mapBoxStreets.png',
tooltip: 'MapBox Streets v11 Tiles',
category: 'Offline',
creationFunction: function() {
return new Cesium.UrlTemplateImageryProvider({
url: 'https://tile.datr.dev/data/mapbox-streets-v11/{z}/{x}/{y}.png',
credit: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
maximumLevel: 16,
});
}
}));
imageryProviders.push(new Cesium.ProviderViewModel({
name: "MapBox Dark v10",
iconUrl: './icon/mapBoxDark.png',
tooltip: 'MapBox Dark v10 Tiles',
category: 'Offline',
creationFunction: function() {
return new Cesium.UrlTemplateImageryProvider({
url: 'https://tile.datr.dev/data/mapbox-dark-v10/{z}/{x}/{y}.png',
credit: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
maximumLevel: 16,
});
}
}));
imageryProviders.push(new Cesium.ProviderViewModel({
name: "ESRI",
iconUrl: './icon/esri.jpg',
tooltip: 'ESRI Tiles',
category: 'Offline',
creationFunction: function() {
return new Cesium.UrlTemplateImageryProvider({
url: 'https://tile.datr.dev/data/esri/{z}/{x}/{y}.jpg',
credit: 'Esri, Maxar, Earthstar Geographics, USDA FSA, USGS, Aerogrid, IGN, IGP, and the GIS User Community',
maximumLevel: 16,
});
}
}));
imageryProviders.push(new Cesium.ProviderViewModel({
name: "OpenTopoMap",
iconUrl: './icon/opentopomap.png',
tooltip: 'OpenTopoMap Tiles',
category: 'Offline',
creationFunction: function() {
return new Cesium.UrlTemplateImageryProvider({
url: 'https://tile.datr.dev/data/opentopomap/{z}/{x}/{y}.png',
credit: '<code>Kartendaten: © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende, SRTM | Kartendarstellung: © <a href="http://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)</code>',
maximumLevel: 8,
});
}
}));
var terrainProviders = [];
terrainProviders.push(new Cesium.ProviderViewModel({
name: "WGS84 Ellipsoid",
iconUrl: './icon/opentopomap.png',
tooltip: 'WGS84 Ellipsoid Terrain',
category: 'Offline',
creationFunction: function() {
return new Cesium.EllipsoidTerrainProvider({
});
}
}));
terrainProviders.push(new Cesium.ProviderViewModel({
name: "30m Adelaide",
iconUrl: './icon/opentopomap.png',
tooltip: '30m Adelaide Terrain',
category: 'Offline',
creationFunction: function() {
return Cesium.CesiumTerrainProvider.fromUrl(
'https://terrain.datr.dev/data/30m_adelaide/'
);
}
}));
terrainProviders.push(new Cesium.ProviderViewModel({
name: "90m Australia",
iconUrl: './icon/opentopomap.png',
tooltip: '90m Australia Terrain',
category: 'Offline',
creationFunction: function() {
return Cesium.CesiumTerrainProvider.fromUrl(
'https://terrain.datr.dev/data/90m_australia/'
);
}
}));
terrainProviders.push(new Cesium.ProviderViewModel({
name: "90m South Australia",
iconUrl: './icon/opentopomap.png',
tooltip: '90m South Australia Terrain',
category: 'Offline',
creationFunction: function() {
return Cesium.CesiumTerrainProvider.fromUrl(
'https://terrain.datr.dev/data/90m_south_australia/'
);
}
}));
var viewer = new Cesium.Viewer("cesiumContainer", {
baseLayerPicker: true,
imageryProviderViewModels: imageryProviders,
terrainProviderViewModels: terrainProviders,
geocoder: false,
shouldAnimate: true,
selectionIndicator: false
});

58
src/public/js/index.js
View file

@ -1,3 +1,25 @@
// function toggle_button(button) {
// button.classList.toggle('active');
// var pressed = button.getAttribute('aria-pressed') === 'false' ? 'true' : 'false';
// button.setAttribute('aria-pressed', pressed);
// // fix button states
// if (pressed === 'true') {
// button.classList.add("btn-success");
// button.classList.remove("btn-secondary");
// } else {
// button.classList.add("btn-secondary");
// button.classList.remove("btn-success");
// // Remove the corresponding hidden input when the button is deselected
// var serverUrl = button.getAttribute('value');
// var hiddenInputs = document.querySelectorAll('input[name="url"][value="' + serverUrl + '"]');
// hiddenInputs.forEach(function (input) {
// input.parentNode.removeChild(input);
// });
// }
// }
function toggle_button(button) { function toggle_button(button) {
button.classList.toggle('active'); button.classList.toggle('active');
var pressed = button.getAttribute('aria-pressed') === 'false' ? 'true' : 'false'; var pressed = button.getAttribute('aria-pressed') === 'false' ? 'true' : 'false';
@ -7,6 +29,18 @@ function toggle_button(button) {
if (pressed === 'true') { if (pressed === 'true') {
button.classList.add("btn-success"); button.classList.add("btn-success");
button.classList.remove("btn-secondary"); button.classList.remove("btn-secondary");
// Add the hidden input when the button is pressed
var serverUrl = button.getAttribute('value');
var inputExists = document.querySelector('input[name="url"][value="' + serverUrl + '"]');
if (!inputExists) {
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'url');
hiddenInput.setAttribute('value', serverUrl);
document.querySelector('form').appendChild(hiddenInput);
}
} else { } else {
button.classList.add("btn-secondary"); button.classList.add("btn-secondary");
button.classList.remove("btn-success"); button.classList.remove("btn-success");
@ -14,8 +48,28 @@ function toggle_button(button) {
// Remove the corresponding hidden input when the button is deselected // Remove the corresponding hidden input when the button is deselected
var serverUrl = button.getAttribute('value'); var serverUrl = button.getAttribute('value');
var hiddenInputs = document.querySelectorAll('input[name="url"][value="' + serverUrl + '"]'); var hiddenInputs = document.querySelectorAll('input[name="url"][value="' + serverUrl + '"]');
hiddenInputs.forEach(function (input) { hiddenInputs.forEach(function (input) {
input.parentNode.removeChild(input); // Check if the input element exists before removing it
if (input && input.parentNode) {
input.parentNode.removeChild(input);
}
}); });
} }
} }
// redirect to map with REST API
document.getElementById('buttonMap').addEventListener('click', function() {
// Get the form values
var servers = document.querySelectorAll('.toggle-button.active');
var associator = document.querySelector('[name="associator"]').value;
var coordreg = document.querySelector('[name="coordreg"]').value;
var adsb = document.querySelector('[name="adsb"]').value;
// Construct the URL with the form values
var apiUrl = '?url=' + Array.from(servers).map(server => server.value).join('&');
var mapUrl = '/map/index.html' + apiUrl + '&associator=' + associator + '&coordreg=' + coordreg + '&adsb=' + adsb;
// Redirect to the constructed URL
window.location.href = mapUrl;
});

4
src/templates/index.html
View file

@ -91,10 +91,10 @@
<div class="mb-1"> <div class="mb-1">
<label class="form-label fw-bold">Run:</label> <label class="form-label fw-bold">Run:</label>
<button type="submit" class="btn btn-dark w-100">API</button> <button type="submit" class="btn btn-dark w-100" id="buttonApi">API</button>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<button type="button" class="btn btn-dark w-100">Map</button> <button type="button" class="btn btn-dark w-100" id="buttonMap">Map</button>
</div> </div>
</form> </form>
</div> </div>