mirror of
https://github.com/maplibre/martin.git
synced 2024-12-21 05:41:55 +03:00
309 lines
7.9 KiB
HTML
309 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Martin Debug Page</title>
|
|
<meta
|
|
name="viewport"
|
|
content="initial-scale=1,maximum-scale=1,user-scalable=no"
|
|
/>
|
|
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
|
|
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#menu {
|
|
background: #fff;
|
|
position: absolute;
|
|
right: 5px;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
font-family: 'Open Sans', sans-serif;
|
|
overflow: scroll;
|
|
}
|
|
|
|
#menu a {
|
|
font-size: 13px;
|
|
color: #404040;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding: 10px;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#menu a:last-child {
|
|
border: none;
|
|
}
|
|
|
|
#menu a:hover {
|
|
background-color: #f8f8f8;
|
|
color: #404040;
|
|
}
|
|
|
|
#menu a.active {
|
|
background-color: #3887be;
|
|
color: #ffffff;
|
|
}
|
|
|
|
#menu a.active:hover {
|
|
background: #3074a4;
|
|
}
|
|
|
|
#menu-search {
|
|
padding: 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
#menu a.active #colorbox {
|
|
display: block;
|
|
}
|
|
|
|
#menu a #colorbox {
|
|
display: none;
|
|
}
|
|
|
|
#colorbox {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 15px;
|
|
width: 15px;
|
|
border: 1px solid white;
|
|
outline: none;
|
|
float: right;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#colorbox::-webkit-color-swatch {
|
|
border: none;
|
|
}
|
|
|
|
#colorbox::-moz-color-swatch {
|
|
border: none;
|
|
}
|
|
|
|
#container {
|
|
position: absolute;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
width: 120px;
|
|
height: 95vh;
|
|
}
|
|
|
|
.resizer {
|
|
position: absolute;
|
|
cursor: col-resize;
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
width: 5px;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<nav id="menu">
|
|
<input
|
|
oninput="handleSearch()"
|
|
id="menu-search"
|
|
type="search"
|
|
placeholder="Search..."
|
|
/>
|
|
</nav>
|
|
<div class="resizer"></div>
|
|
</div>
|
|
<div id="map"></div>
|
|
<script>
|
|
//ignore this ,it's just to allow user resize menu by drag
|
|
const container = document.getElementById('container');
|
|
|
|
let x = 0;
|
|
let y = 0;
|
|
let w = 0;
|
|
|
|
const mouseDownHandler = function (e) {
|
|
x = e.clientX;
|
|
y = e.clientY;
|
|
|
|
const styles = window.getComputedStyle(container);
|
|
w = parseInt(styles.width, 10);
|
|
|
|
document.addEventListener('mousemove', mouseMoveHandler);
|
|
document.addEventListener('mouseup', mouseUpHandler);
|
|
};
|
|
|
|
const mouseMoveHandler = function (e) {
|
|
const dx = e.clientX - x;
|
|
const dy = e.clientY - y;
|
|
|
|
container.style.width = `${w + dx}px`;
|
|
};
|
|
|
|
container.addEventListener('mousedown', mouseDownHandler)
|
|
|
|
const mouseUpHandler = function () {
|
|
document.removeEventListener('mousemove', mouseMoveHandler);
|
|
document.removeEventListener('mouseup', mouseUpHandler);
|
|
};
|
|
</script>
|
|
<script>
|
|
function handleSearch() {
|
|
const search = document.getElementById("menu-search").value;
|
|
const links = document.querySelectorAll("#menu a");
|
|
for (const link of links) {
|
|
if (link.textContent.toLowerCase().includes(search.toLowerCase())) {
|
|
link.style.display = "block";
|
|
} else {
|
|
link.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reference from: https://stackoverflow.com/a/16348977/11522644
|
|
const stringToColour = function (str) {
|
|
let hash = 0;
|
|
for (let i = 0; i < str.length; i++) {
|
|
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
|
}
|
|
let colour = "#";
|
|
for (let i = 0; i < 3; i++) {
|
|
const value = (hash >> (i * 8)) & 0xff;
|
|
colour += ("00" + value.toString(16)).substr(-2);
|
|
}
|
|
return colour;
|
|
};
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
|
zoom: 0,
|
|
center: [0, 0],
|
|
hash: true
|
|
});
|
|
|
|
function geometryTypeToLayerType(geometryType) {
|
|
switch (geometryType) {
|
|
case 'POINT':
|
|
case 'GEOMETRY':
|
|
return 'circle';
|
|
case 'LINESTRING':
|
|
case 'MULTILINESTRING':
|
|
case 'COMPOUNDCURVE':
|
|
return 'line';
|
|
case 'POLYGON':
|
|
case 'MULTIPOLYGON':
|
|
case 'CURVEPOLYGON':
|
|
case 'SURFACE':
|
|
case 'MULTISURFACE':
|
|
return 'fill';
|
|
default:
|
|
return 'circle';
|
|
}
|
|
}
|
|
|
|
map.on('load', async function () {
|
|
const sources = Object.values(await fetch(
|
|
'http://0.0.0.0:3000/catalog'
|
|
).then((r) => r.json()));
|
|
|
|
// Set up the corresponding toggle button for each layer.
|
|
for (const source of sources) {
|
|
// Skip layers that already have a button set up.
|
|
if (document.getElementById(source.id)) {
|
|
continue;
|
|
}
|
|
|
|
const layerType = geometryTypeToLayerType(source.geometry_type);
|
|
|
|
map.addLayer({
|
|
id: source.id,
|
|
type: layerType,
|
|
source: {
|
|
type: 'vector',
|
|
url: `http://0.0.0.0:3000/${source.id}`
|
|
},
|
|
'source-layer': source.id,
|
|
layout: {
|
|
visibility: 'none'
|
|
},
|
|
paint: {
|
|
[`${layerType}-color`]: stringToColour(source.id)
|
|
}
|
|
});
|
|
|
|
map.on('click', source.id, (e) => {
|
|
console.log(e.features);
|
|
});
|
|
|
|
const colorbox = document.createElement("input");
|
|
colorbox.type = "color";
|
|
colorbox.id = "colorbox";
|
|
colorbox.value = stringToColour(source.id);
|
|
colorbox.style.backgroundColor = stringToColour(source.id);
|
|
colorbox.onclick = function(e){
|
|
e.stopPropagation();
|
|
}
|
|
colorbox.onchange = function(e){
|
|
map.setPaintProperty(source.id, `${layerType}-color`, e.target.value);
|
|
colorbox.style.backgroundColor = e.target.value;
|
|
}
|
|
|
|
// Create a link.
|
|
const link = document.createElement('a');
|
|
link.id = source.id;
|
|
link.href = '#';
|
|
link.textContent = source.id;
|
|
link.title = source.id;
|
|
link.appendChild(colorbox);
|
|
|
|
// Show or hide layer when the toggle is clicked.
|
|
link.onclick = function (e) {
|
|
const clickedLayer = this.textContent;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const visibility = map.getLayoutProperty(
|
|
clickedLayer,
|
|
'visibility'
|
|
);
|
|
|
|
// Toggle layer visibility by changing the layout object's visibility property.
|
|
if (visibility === 'visible') {
|
|
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
|
|
this.className = '';
|
|
} else {
|
|
this.className = 'active';
|
|
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
|
|
}
|
|
};
|
|
|
|
const layers = document.getElementById('menu');
|
|
layers.appendChild(link);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|