mirror of
https://github.com/maptiler/tileserver-gl.git
synced 2024-09-20 16:37:40 +03:00
135 lines
4.0 KiB
Cheetah
135 lines
4.0 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>
|
|
{{#is_vector}}
|
|
<link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
|
|
<script src="/mapbox-gl.js{{&key_query}}"></script>
|
|
<style>
|
|
body {background:#000;color:#ccc;}
|
|
#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:60%;width:240px;overflow:auto;}
|
|
#layerList div div {width:15px;height:15px;display:inline-block;}
|
|
#propertyList {position:absolute;top:40%;bottom:0;right:0;width:240px;overflow:auto;color:#fff;}
|
|
</style>
|
|
{{/is_vector}}
|
|
{{^is_vector}}
|
|
<link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" />
|
|
<script src="/mapbox.js{{&key_query}}"></script>
|
|
<script src="/leaflet-hash.js{{&key_query}}"></script>
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
</style>
|
|
{{/is_vector}}
|
|
</head>
|
|
<body>
|
|
{{#is_vector}}
|
|
<h1>{{name}}</h1>
|
|
<div id="map"></div>
|
|
<div id="layerList"></div>
|
|
<pre id="propertyList"></pre>
|
|
<script>
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
hash: true
|
|
});
|
|
map.addControl(new mapboxgl.Navigation());
|
|
|
|
function generateColor(str) {
|
|
var rgb = [0, 0, 0];
|
|
for (var i = 0; i < str.length; i++) {
|
|
var v = str.charCodeAt(i);
|
|
rgb[v % 3] = (rgb[i % 3] + (13*(v%13))) % 12;
|
|
}
|
|
var r = 4 + rgb[0];
|
|
var g = 4 + rgb[1];
|
|
var b = 4 + rgb[2];
|
|
r = (r * 16) + r;
|
|
g = (g * 16) + g;
|
|
b = (b * 16) + b;
|
|
return [r, g, b, 1];
|
|
};
|
|
|
|
function initLayer(data) {
|
|
var layer;
|
|
var layerList = document.getElementById('layerList');
|
|
var layers_ = [];
|
|
data['vector_layers'].forEach(function(el) {
|
|
var color = generateColor(el['id']);
|
|
var colorText = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
|
|
layers_.push({
|
|
id: el['id'] + Math.random(),
|
|
source: 'vector_layer_',
|
|
'source-layer': el['id'],
|
|
interactive: true,
|
|
type: 'line',
|
|
paint: {'line-color': colorText}
|
|
});
|
|
var item = document.createElement('div');
|
|
item.innerHTML = '<div style="' +
|
|
'background:rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1);' +
|
|
'"></div> ' + el['id'];
|
|
layerList.appendChild(item);
|
|
});
|
|
map.setStyle({
|
|
version: 8,
|
|
sources: {
|
|
'vector_layer_': {
|
|
type: 'vector',
|
|
tiles: data['tiles'],
|
|
minzoom: data['minzoom'],
|
|
maxzoom: data['maxzoom']
|
|
}
|
|
},
|
|
layers: layers_
|
|
});
|
|
|
|
return layer;
|
|
}
|
|
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (xhttp.readyState == 4 && xhttp.status == 200) {
|
|
initLayer(xhttp.response);
|
|
}
|
|
};
|
|
xhttp.responseType = 'json';
|
|
xhttp.open('GET', '/data/{{id}}.json{{&key_query}}', true);
|
|
xhttp.send();
|
|
|
|
var propertyList = document.getElementById('propertyList');
|
|
map.on('mousemove', function(e) {
|
|
propertyList.innerHTML = '';
|
|
var width = 3, height = 3;
|
|
var features = map.queryRenderedFeatures([
|
|
[e.point.x - width / 2, e.point.y - height / 2],
|
|
[e.point.x + width / 2, e.point.y + height / 2]
|
|
]);
|
|
if (features) {
|
|
var html = '';
|
|
features.forEach(function(feature) {
|
|
html += JSON.stringify(feature.properties, null, 2) + '\n';
|
|
});
|
|
propertyList.innerHTML = html;
|
|
}
|
|
});
|
|
</script>
|
|
{{/is_vector}}
|
|
{{^is_vector}}
|
|
<h1 style="display:none;">{{name}}</h1>
|
|
<div id='map'></div>
|
|
<script>
|
|
var map = L.mapbox.map('map', '/data/{{id}}.json{{&key_query}}', { zoomControl: false });
|
|
new L.Control.Zoom({ position: 'topright' }).addTo(map);
|
|
setTimeout(function() {
|
|
new L.Hash(map);
|
|
}, 0);
|
|
</script>
|
|
{{/is_vector}}
|
|
</body>
|
|
</html>
|