mirror of
https://github.com/maplibre/martin.git
synced 2024-12-23 23:11:40 +03:00
Rewrite debug.html to show and inspect all layers (#820)
Try to resolve #536, but still it can't show the function source without comment... - [x] Show all layers with correct geometry type - [x] Inspect feature property - [x] Allow to scroll popup content with max-height and a vertical scroll bar - [x] Allow to stop the popup showing after click outside - [x] It's possible to select text when the popup it's fixed Maybe we should have an inspect toggle? --------- Co-authored-by: Yuri Astrakhan <YuriAstrakhan@gmail.com>
This commit is contained in:
Lucas
GitHub
parent
18ec8e4b88
commit
d6f3908b7b
358
tests/debug.html
358
tests/debug.html
@ -1,14 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<html lang="en">
|
||||
|
||||
<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" />
|
||||
<meta name="viewport" content="initial-scale=1,width=device-width"/>
|
||||
<script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css" rel="stylesheet"/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
@ -32,7 +31,8 @@
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
@ -40,11 +40,9 @@
|
||||
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;
|
||||
border-bottom: 1px solid #0000003F;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -56,16 +54,7 @@
|
||||
|
||||
#menu a:hover {
|
||||
background-color: #f8f8f8;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
#menu a.active {
|
||||
background-color: #3887be;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#menu a.active:hover {
|
||||
background: #3074a4;
|
||||
color: #a00043;
|
||||
}
|
||||
|
||||
#menu-search {
|
||||
@ -73,33 +62,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu a.active #colorbox {
|
||||
#menu label {
|
||||
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;
|
||||
margin: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#container {
|
||||
@ -107,8 +73,7 @@
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 120px;
|
||||
height: 95vh;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
@ -119,36 +84,63 @@
|
||||
top: 0;
|
||||
width: 5px;
|
||||
z-index: 1;
|
||||
background-color: #0000003F;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!-- style about popup -->
|
||||
<style>
|
||||
.maplibregl-popup-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
.inspect_popup {
|
||||
color: #333;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.inspect_feature:not(:last-child) {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.inspect_layer {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inspect_property {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.inspect_property_name {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.inspect_property_value {
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<nav id="menu">
|
||||
<input
|
||||
oninput="handleSearch()"
|
||||
id="menu-search"
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<label for="menu-search">Tile Sources</label>
|
||||
<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
|
||||
</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);
|
||||
x = e.clientX;
|
||||
w = parseInt(styles.width, 10);
|
||||
|
||||
document.addEventListener('mousemove', mouseMoveHandler);
|
||||
@ -157,8 +149,6 @@
|
||||
|
||||
const mouseMoveHandler = function (e) {
|
||||
const dx = e.clientX - x;
|
||||
const dy = e.clientY - y;
|
||||
|
||||
container.style.width = `${w + dx}px`;
|
||||
};
|
||||
|
||||
@ -168,8 +158,8 @@
|
||||
document.removeEventListener('mousemove', mouseMoveHandler);
|
||||
document.removeEventListener('mouseup', mouseUpHandler);
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
</script>
|
||||
<script>
|
||||
function handleSearch() {
|
||||
const search = document.getElementById("menu-search").value;
|
||||
const links = document.querySelectorAll("#menu a");
|
||||
@ -182,19 +172,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
const string2RandColor = function (str) {
|
||||
const luminosity = "bright";
|
||||
const hues = ["pink", "blue", "orange", "monochrome", "yellow", "dark", "green"];
|
||||
let hue = hues[Math.floor(Math.random() * hues.length)];
|
||||
|
||||
return randomColor({
|
||||
luminosity: luminosity,
|
||||
hue: hue,
|
||||
seed: str,
|
||||
format: 'rgbArray'
|
||||
}).join(',');
|
||||
}
|
||||
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',
|
||||
@ -203,99 +193,152 @@
|
||||
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';
|
||||
const QUERY_THRESHOLD = 10;
|
||||
const popup = new maplibregl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false
|
||||
});
|
||||
|
||||
const renderProperty = function (pName, pValue) {
|
||||
return `<div class="inspect_property">
|
||||
<div class="inspect_property_name">
|
||||
${pName}
|
||||
</div>
|
||||
<div class="inspect_property_value">
|
||||
${pValue}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const renderProperties = function (feature) {
|
||||
const geomDiv = renderProperty("$type", feature.geometry.type);
|
||||
const propertiesDivs = Object.keys(feature.properties).map(propName => {
|
||||
return renderProperty(propName, feature.properties[propName]);
|
||||
}).join('');
|
||||
|
||||
return `${geomDiv}
|
||||
${propertiesDivs}`;
|
||||
}
|
||||
|
||||
const renderFeature = function (feature) {
|
||||
const srcLayer = feature.layer['source-layer'];
|
||||
let layerName = feature.layer.source;
|
||||
if (srcLayer && srcLayer !== layerName) {
|
||||
layerName = `${layerName} / ${srcLayer}`;
|
||||
}
|
||||
return `<div class="inspect_feature">
|
||||
<div class="inspect_layer">
|
||||
${layerName}
|
||||
</div>
|
||||
${renderProperties(feature)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const renderFeatures = function (features) {
|
||||
const featureDOMS = features.map(feat => renderFeature(feat)).join('');
|
||||
return `<inspect_popup class="inspect_popup">
|
||||
${featureDOMS}
|
||||
</inspect_popup>`;
|
||||
}
|
||||
|
||||
const tryShowPopup = function (e) {
|
||||
const queryBox = [
|
||||
[
|
||||
e.point.x - QUERY_THRESHOLD,
|
||||
e.point.y + QUERY_THRESHOLD
|
||||
],
|
||||
[
|
||||
e.point.x + QUERY_THRESHOLD,
|
||||
e.point.y - QUERY_THRESHOLD
|
||||
]
|
||||
];
|
||||
|
||||
let features = map.queryRenderedFeatures(queryBox) || [];
|
||||
features = features.filter(f => f.source !== 'carto');
|
||||
popup.setLngLat(e.lngLat);
|
||||
if (features.length !== 0) {
|
||||
const renderedPopup = renderFeatures(features);
|
||||
popup.setHTML(renderedPopup);
|
||||
popup.addTo(map);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
let isPopupFixed = false;
|
||||
map.on("click", e => {
|
||||
//remove the popup immediately if it's benn shown already
|
||||
if (popup.isOpen()) {
|
||||
popup.remove();
|
||||
isPopupFixed = false;
|
||||
}
|
||||
isPopupFixed = tryShowPopup(e);
|
||||
});
|
||||
|
||||
map.on("mousemove", function (e) {
|
||||
if (isPopupFixed) return;
|
||||
let showOk = tryShowPopup(e);
|
||||
if (!showOk) {
|
||||
popup.remove();
|
||||
}
|
||||
});
|
||||
|
||||
map.on('load', async function () {
|
||||
const catalog = await fetch('http://0.0.0.0:3000/catalog');
|
||||
const sources = (await catalog.json()).tiles;
|
||||
|
||||
// Set up the corresponding toggle button for each layer.
|
||||
// TODO: we may want to show each source metadata on hover or some other way?
|
||||
for (const [id, source] of Object.entries(sources)) {
|
||||
for (const sourceName of Object.keys(sources)) {
|
||||
// Skip layers that already have a button set up.
|
||||
if (document.getElementById(id)) {
|
||||
if (document.getElementById(sourceName)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const layerType = geometryTypeToLayerType(source.geometry_type);
|
||||
|
||||
map.addLayer({
|
||||
id: id,
|
||||
type: layerType,
|
||||
source: {
|
||||
map.addSource(sourceName, {
|
||||
type: 'vector',
|
||||
url: `http://0.0.0.0:3000/${id}`
|
||||
},
|
||||
'source-layer': id,
|
||||
layout: {
|
||||
visibility: 'none'
|
||||
},
|
||||
paint: {
|
||||
[`${layerType}-color`]: stringToColour(id)
|
||||
}
|
||||
url: `http://0.0.0.0:3000/${sourceName}`
|
||||
});
|
||||
|
||||
map.on('click', id, (e) => {
|
||||
console.log(e.features);
|
||||
});
|
||||
|
||||
const colorbox = document.createElement("input");
|
||||
colorbox.type = "color";
|
||||
colorbox.id = "colorbox";
|
||||
colorbox.value = stringToColour(id);
|
||||
colorbox.style.backgroundColor = stringToColour(id);
|
||||
colorbox.onclick = function(e){
|
||||
e.stopPropagation();
|
||||
}
|
||||
colorbox.onchange = function(e){
|
||||
map.setPaintProperty(id, `${layerType}-color`, e.target.value);
|
||||
colorbox.style.backgroundColor = e.target.value;
|
||||
}
|
||||
|
||||
// Create a link.
|
||||
const link = document.createElement('a');
|
||||
link.id = id;
|
||||
link.id = sourceName;
|
||||
link.href = '#';
|
||||
link.textContent = id;
|
||||
link.title = id;
|
||||
link.appendChild(colorbox);
|
||||
link.textContent = sourceName;
|
||||
link.title = sourceName;
|
||||
|
||||
// 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 = '';
|
||||
const sourceLayers = map.style.sourceCaches[sourceName]._source.vectorLayerIds;
|
||||
if (!sourceLayers) {
|
||||
return;
|
||||
}
|
||||
const isShowing = this.classList.contains('active')
|
||||
const color = string2RandColor(sourceName);
|
||||
for (const sourceLayer of sourceLayers) {
|
||||
for (const [type, geoType, alpha] of [["circle", "Point", 0.8], ["line", "LineString", 0.8], ["fill", "Polygon", 0.4]]) {
|
||||
const layerId = `${sourceName}_${sourceLayer}_${type}`;
|
||||
if (isShowing) {
|
||||
map.removeLayer(layerId)
|
||||
} else {
|
||||
this.className = 'active';
|
||||
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
|
||||
map.addLayer({
|
||||
id: layerId,
|
||||
source: sourceName,
|
||||
type: type,
|
||||
'source-layer': sourceLayer,
|
||||
filter: ['==', '$type', geoType],
|
||||
paint: {[`${type}-color`]: `rgba(${color},${alpha})`}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isShowing) {
|
||||
this.classList.remove('active');
|
||||
link.style.cssText = '';
|
||||
} else {
|
||||
this.classList.add('active');
|
||||
link.style.cssText = `background: rgb(${color});
|
||||
background: linear-gradient(90deg, rgba(${color},0) 15%, rgba(${color},1) 100%);`;
|
||||
}
|
||||
};
|
||||
|
||||
@ -303,6 +346,7 @@
|
||||
layers.appendChild(link);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user