don/pilgrim
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace sidebar

Browse Source
This commit is contained in:
don philipe
2025-05-09 18:26:43 +02:00
parent dc5245d7cd
commit 61d96b30b9
2 changed files with 129 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/main/webapp/index.html
View File

@@ -6,8 +6,8 @@
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="jquery-3.7.1.min.js"></script> <script src="jquery-3.7.1.min.js"></script>
<script src="lib.js"></script> <script src="lib.js"></script>
<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script> <script src="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet"> <link href="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css" rel="stylesheet">
<style> <style>
body { body {
margin: 0; margin: 0;
@@ -19,26 +19,95 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
#features {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 20%;
overflow: auto;
background: rgba(255, 255, 255, 0.8);
}
.maplibregl-popup { .maplibregl-popup {
max-width: 200px; max-width: 200px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
} }
.rounded-rect {
background: white;
border-radius: 10px;
box-shadow: 0 0 50px -25px black;
}
.flex-center {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.flex-center.left {
left: 0px;
}
.sidebar-content {
position: absolute;
width: 95%;
height: 95%;
font-family: Arial, Helvetica, sans-serif;
color: gray;
flex-direction: column;
}
.sidebar-toggle {
position: absolute;
width: 1.3em;
height: 1.3em;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
}
.sidebar-toggle.left {
right: -1.5em;
}
.sidebar-toggle:hover {
color: #0aa1cf;
cursor: pointer;
}
.sidebar {
transition: transform 1s;
z-index: 1;
width: 300px;
height: 100%;
}
#features {
max-height: 50%;
}
/*
The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
The toggleSidebar() function removes this class from the element in order to expand it.
*/
.left.collapsed {
transform: translateX(-295px);
}
</style> </style>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map">
<pre id="features"></pre> <div id="sidebarLeft" class="sidebar flex-center left">
<div class="sidebar-content rounded-rect flex-center">
<div>
<input type="radio" name="planningMode" id="classicPlanning">classic</input>
<input type="radio" name="planningMode" id="modernPlanning">modern</input>
</div>
<h2>Features</h2>
<div id="features"></div>
<div class="sidebar-toggle rounded-rect left"
onclick="toggleSidebar('left')"
>
&rarr;
</div>
</div>
</div>
</div>
<script> <script>
lib.init(); lib.init();
</script> </script>
</body> </body>
</html> </html>

88
src/main/webapp/lib.js
View File

@@ -1,6 +1,7 @@
const lib = new function () { const lib = new function () {
let ghbase = "" let ghbase = ""
let planningMode = "classic";
/** /**
* Initialize Map etc * Initialize Map etc
@@ -50,48 +51,48 @@ const lib = new function () {
.setHTML('<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>') .setHTML('<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>')
.addTo(map); .addTo(map);
let featbtn = document.getElementById("btn-feat"); let featbtn = document.getElementById("btn-feat");
featbtn.onclick = function () { featbtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
const features = map.queryRenderedFeatures(e.point); const features = map.queryRenderedFeatures(e.point);
const prop = features.map(function (feat) { const prop = features.map(function (feat) {
return feat["properties"]; return feat["properties"];
}); });
const featPopup = new maplibregl.Popup() const featPopup = new maplibregl.Popup()
.setLngLat(coordinates) .setLngLat(coordinates)
.setHTML(JSON.stringify(prop)) .setHTML(JSON.stringify(prop))
.addTo(map); .addTo(map);
}; };
let startbtn = document.getElementById("btn-start"); let startbtn = document.getElementById("btn-start");
startbtn.onclick = function () { startbtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map); startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
startMarker.onMap = true; startMarker.onMap = true;
if (finishMarker.onMap) { if (finishMarker.onMap) {
lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers); lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
} }
}; };
let finishbtn = document.getElementById("btn-finish"); let finishbtn = document.getElementById("btn-finish");
finishbtn.onclick = function () { finishbtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map); finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
finishMarker.onMap = true; finishMarker.onMap = true;
if (startMarker.onMap) { if (startMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers); lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
} }
}; };
let viabtn = document.getElementById("btn-via"); let viabtn = document.getElementById("btn-via");
viabtn.onclick = function () { viabtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]); const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]);
marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);}); marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
marker.addTo(map); marker.addTo(map);
marker.onMap = true; marker.onMap = true;
viaMarkers.push(marker); viaMarkers.push(marker);
if (startMarker.onMap && finishMarker.onMap) { if (startMarker.onMap && finishMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers); lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
} }
}; };
}); });
}; };
@@ -148,4 +149,7 @@ const lib = new function () {
dataType: "json" dataType: "json"
}); });
}; };
this.togglePlanningMode = function () {
};
}; };