mirror of
https://github.com/maplibre/martin.git
synced 2024-12-19 04:41:46 +03:00
194 lines
4.9 KiB
HTML
194 lines
4.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://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
|
|
<link
|
|
href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#menu {
|
|
background: #fff;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
border-radius: 3px;
|
|
width: 120px;
|
|
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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<nav id="menu"></nav>
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
let accessToken = localStorage.getItem('accessToken');
|
|
|
|
if (!accessToken) {
|
|
accessToken = window.prompt('Mapbox accessToken');
|
|
localStorage.setItem('accessToken', accessToken);
|
|
}
|
|
|
|
mapboxgl.accessToken = accessToken;
|
|
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/light-v9',
|
|
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 table_sources = await fetch(
|
|
'http://0.0.0.0:3000/index.json'
|
|
).then((r) => r.json());
|
|
|
|
const function_sources = await fetch(
|
|
'http://0.0.0.0:3000/rpc/index.json'
|
|
).then((r) => r.json());
|
|
|
|
const sources = Object.values(table_sources).concat(
|
|
Object.values(function_sources)
|
|
);
|
|
|
|
// 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: source.hasOwnProperty('table')
|
|
? `http://0.0.0.0:3000/${source.id}.json`
|
|
: `http://0.0.0.0:3000/rpc/${source.id}.json`
|
|
},
|
|
'source-layer': source.id,
|
|
layout: {
|
|
visibility: 'none'
|
|
},
|
|
paint: {
|
|
[`${layerType}-color`]: 'red'
|
|
}
|
|
});
|
|
|
|
// Create a link.
|
|
const link = document.createElement('a');
|
|
link.id = source.id;
|
|
link.href = '#';
|
|
link.textContent = source.id;
|
|
link.title = source.id;
|
|
|
|
// 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>
|