2016-03-17 13:31:33 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>{{name}} - TileServer GL</title>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/mapbox-gl.css" />
|
|
|
|
|
<script src="/mapbox-gl.js"></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;}
|
2016-04-15 16:42:54 +03:00
|
|
|
#layerList {position:absolute;top:35px;right:0;bottom:60%;width:240px;overflow:auto;}
|
2016-03-17 13:31:33 +03:00
|
|
|
#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>
|
|
|
|
|
<body>
|
|
|
|
|
<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';
|
2016-04-21 19:23:13 +03:00
|
|
|
xhttp.open('GET', '/data/{{id}}.json', true);
|
2016-03-17 13:31:33 +03:00
|
|
|
xhttp.send();
|
|
|
|
|
|
|
|
|
|
var propertyList = document.getElementById('propertyList');
|
|
|
|
|
map.on('mousemove', function(e) {
|
|
|
|
|
propertyList.innerHTML = '';
|
|
|
|
|
map.featuresAt(e.point, {radius: 3}, function(err, features) {
|
|
|
|
|
if (err) throw err;
|
|
|
|
|
if (features[0]) {
|
|
|
|
|
propertyList.innerHTML = JSON.stringify(features[0].properties, null, 2);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
