Replace sidebar
This commit is contained in:
don philipe
@@ -6,8 +6,8 @@
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<script src="jquery-3.7.1.min.js"></script>
|
||||
<script src="lib.js"></script>
|
||||
<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -19,26 +19,95 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#features {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20%;
|
||||
overflow: auto;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.maplibregl-popup {
|
||||
max-width: 200px;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<pre id="features"></pre>
|
||||
<div id="map">
|
||||
<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')"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
lib.init();
|
||||
lib.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
const lib = new function () {
|
||||
|
||||
let ghbase = ""
|
||||
let planningMode = "classic";
|
||||
|
||||
/**
|
||||
* 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>')
|
||||
.addTo(map);
|
||||
|
||||
let featbtn = document.getElementById("btn-feat");
|
||||
featbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
const features = map.queryRenderedFeatures(e.point);
|
||||
const prop = features.map(function (feat) {
|
||||
return feat["properties"];
|
||||
});
|
||||
const featPopup = new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML(JSON.stringify(prop))
|
||||
.addTo(map);
|
||||
};
|
||||
let startbtn = document.getElementById("btn-start");
|
||||
startbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
startMarker.onMap = true;
|
||||
if (finishMarker.onMap) {
|
||||
lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
|
||||
}
|
||||
};
|
||||
let finishbtn = document.getElementById("btn-finish");
|
||||
finishbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
finishMarker.onMap = true;
|
||||
if (startMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
|
||||
}
|
||||
};
|
||||
let viabtn = document.getElementById("btn-via");
|
||||
viabtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
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.addTo(map);
|
||||
marker.onMap = true;
|
||||
viaMarkers.push(marker);
|
||||
if (startMarker.onMap && finishMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
|
||||
}
|
||||
};
|
||||
let featbtn = document.getElementById("btn-feat");
|
||||
featbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
const features = map.queryRenderedFeatures(e.point);
|
||||
const prop = features.map(function (feat) {
|
||||
return feat["properties"];
|
||||
});
|
||||
const featPopup = new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML(JSON.stringify(prop))
|
||||
.addTo(map);
|
||||
};
|
||||
let startbtn = document.getElementById("btn-start");
|
||||
startbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
startMarker.onMap = true;
|
||||
if (finishMarker.onMap) {
|
||||
lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
|
||||
}
|
||||
};
|
||||
let finishbtn = document.getElementById("btn-finish");
|
||||
finishbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
finishMarker.onMap = true;
|
||||
if (startMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
|
||||
}
|
||||
};
|
||||
let viabtn = document.getElementById("btn-via");
|
||||
viabtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
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.addTo(map);
|
||||
marker.onMap = true;
|
||||
viaMarkers.push(marker);
|
||||
if (startMarker.onMap && finishMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
@@ -148,4 +149,7 @@ const lib = new function () {
|
||||
dataType: "json"
|
||||
});
|
||||
};
|
||||
|
||||
this.togglePlanningMode = function () {
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user