mirror of
https://github.com/maplibre/martin.git
synced 2024-12-22 06:11:33 +03:00
f5e19ddf9a
Migrates the HTML test files to use `maplibre-gl` instead of `mapbox-gl`. I kept the same version as in `tests/debug-maplibre.html` and used the Carto Positron style on `tests/debug.html` because it was the closet to Mapbox's light style.
186 lines
4.7 KiB
HTML
186 lines
4.7 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;
|
|
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>
|
|
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 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'
|
|
}
|
|
});
|
|
|
|
map.on('click', source.id, (e) => {
|
|
console.log(e.features);
|
|
});
|
|
|
|
// 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>
|