b0a2c546df
Makes the popup only show on click. if you right click the popup goes away. (this was the behavior on the viewer pages before)
128 lines
3.8 KiB
Cheetah
128 lines
3.8 KiB
Cheetah
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{name}} - TileServer GL</title>
|
|
<link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
|
|
<link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
|
|
<script src="{{public_url}}maplibre-gl.js{{&key_query}}"></script>
|
|
<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"></script>
|
|
{{#is_vector}}
|
|
<style>
|
|
body {background:#fff;color:#333;font-family:Arial, sans-serif;}
|
|
#map {position:absolute;top:0;left:0;right:250px;bottom:0;}
|
|
h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
|
|
#layerList {position:absolute;top:35px;right:0;bottom:0;width:240px;overflow:auto;}
|
|
#layerList div div {width:15px;height:15px;display:inline-block;}
|
|
</style>
|
|
{{/is_vector}}
|
|
{{^is_vector}}
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
.leaflet-control-layers-toggle {
|
|
background-image: url({{public_url}}images/layers.png{{&key_query}});
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
.leaflet-retina .leaflet-control-layers-toggle {
|
|
background-image: url({{public_url}}images/layers-2x.png{{&key_query}});
|
|
background-size: 26px 26px;
|
|
}
|
|
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
|
|
background-image: url({{public_url}}images/marker-icon.png{{&key_query}});
|
|
}
|
|
</style>
|
|
{{/is_vector}}
|
|
</head>
|
|
<body>
|
|
{{#is_vector}}
|
|
<h1>{{name}}</h1>
|
|
<div id="map"></div>
|
|
<div id="layerList"></div>
|
|
<pre id="propertyList"></pre>
|
|
<script>
|
|
const { searchParams } = new URL(document.location);
|
|
const accessKey = searchParams.get('key');
|
|
const keyParam = accessKey ? `?key=${accessKey}` : '';
|
|
|
|
var map = new maplibregl.Map({
|
|
container: 'map',
|
|
maplibreLogo: true,
|
|
hash: true,
|
|
style: {
|
|
version: 8,
|
|
sources: {
|
|
'vector_layer_': {
|
|
type: 'vector',
|
|
url: '{{public_url}}data/{{id}}.json' + keyParam
|
|
}
|
|
},
|
|
layers: []
|
|
}
|
|
});
|
|
map.addControl(new maplibregl.NavigationControl());
|
|
var inspect = new MaplibreInspect({
|
|
showInspectMap: true,
|
|
showInspectButton: false,
|
|
showMapPopupOnHover: false,
|
|
showInspectMapPopupOnHover: false,
|
|
selectThreshold: 5
|
|
});
|
|
map.addControl(inspect);
|
|
map.on('styledata', function() {
|
|
var layerList = document.getElementById('layerList');
|
|
layerList.innerHTML = '';
|
|
Object.keys(inspect.sources).forEach(function(sourceId) {
|
|
var layerIds = inspect.sources[sourceId];
|
|
layerIds.forEach(function(layerId) {
|
|
var item = document.createElement('div');
|
|
item.innerHTML = '<div style="' +
|
|
'background:' + inspect.assignLayerColor(layerId) + ';' +
|
|
'"></div> ' + layerId;
|
|
layerList.appendChild(item);
|
|
});
|
|
})
|
|
});
|
|
</script>
|
|
{{/is_vector}}
|
|
{{^is_vector}}
|
|
<h1 style="display:none;">{{name}}</h1>
|
|
<div id='map'></div>
|
|
<script>
|
|
const { searchParams } = new URL(document.location);
|
|
const accessKey = searchParams.get('key');
|
|
const keyParam = accessKey ? `?key=${accessKey}` : '';
|
|
|
|
var map = new maplibregl.Map({
|
|
container: 'map',
|
|
maplibreLogo: true,
|
|
hash: true,
|
|
style: {
|
|
version: 8,
|
|
sources: {
|
|
'RasterSource': {
|
|
type: 'raster',
|
|
url: '{{public_url}}data/{{id}}.json' + keyParam,
|
|
tileSize: 256
|
|
}
|
|
},
|
|
layers: [
|
|
{
|
|
id: 'RasterLayer',
|
|
type: 'raster',
|
|
source: 'RasterSource'
|
|
}
|
|
]
|
|
}
|
|
});
|
|
map.addControl(new maplibregl.NavigationControl({
|
|
visualizePitch: true,
|
|
showZoom: true,
|
|
showCompass: true
|
|
}));
|
|
</script>
|
|
{{/is_vector}}
|
|
</body>
|
|
</html>
|