Merge pull request #103 from lukasmartinelli/master
Use Mapbox GL Inspect for X-Ray View
This commit is contained in:
Petr Sloup
GitHub
commit
473e7b6f4a
5 changed files with 352 additions and 339 deletions
40
public/resources/mapbox-gl-inspect.css
Normal file
40
public/resources/mapbox-gl-inspect.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.mapbox-gl-inspect_popup {
|
||||
color: #333;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.mapbox-gl-inspect_feature:not(:last-child) {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.mapbox-gl-inspect_layer:before {
|
||||
content: '#';
|
||||
}
|
||||
|
||||
.mapbox-gl-inspect_layer {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mapbox-gl-inspect_property {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.mapbox-gl-inspect_property-value {
|
||||
display: table-cell;
|
||||
|
||||
}
|
||||
|
||||
.mapbox-gl-inspect_property-name {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-inspect {
|
||||
background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#333333%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20viewBox=%22-10%20-10%2060%2060%22%3E%3Cg%3E%3Cpath%20d=%22m15%2021.6q0-2%201.5-3.5t3.5-1.5%203.5%201.5%201.5%203.5-1.5%203.6-3.5%201.4-3.5-1.4-1.5-3.6z%20m18.4%2011.1l-6.4-6.5q1.4-2.1%201.4-4.6%200-3.4-2.5-5.8t-5.9-2.4-5.9%202.4-2.5%205.8%202.5%205.9%205.9%202.5q2.4%200%204.6-1.4l7.4%207.4q-0.9%200.6-2%200.6h-20q-1.3%200-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3%201-2.3t2.3-0.9h13.4l10%2010v19.3z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-map {
|
||||
background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#333333%22%20viewBox=%22-10%20-10%2060%2060%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%3E%3Cpath%20d=%22m25%2031.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z%20m9.140000000000008-26.640000000000004q0.8599999999999923%200%200.8599999999999923%200.8600000000000003v25.156666666666666q0%200.625-0.625%200.783333333333335l-9.375%203.1999999999999993-10-3.5133333333333354-8.906666666666668%203.4383333333333326-0.2333333333333334%200.07833333333333314q-0.8616666666666664%200-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625%200.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334%2010%203.5133333333333336%208.905000000000001-3.4383333333333344z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
1
public/resources/mapbox-gl-inspect.min.js
vendored
Normal file
1
public/resources/mapbox-gl-inspect.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -70,17 +70,20 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
|
||||
.mapboxgl-ctrl-icon {
|
||||
padding: 5px;
|
||||
}
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
|
||||
}
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
|
||||
padding: 5px;
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
|
||||
}
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
|
||||
padding: 5px;
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNMTAgNEM5IDQgOSA1IDkgNUw5IDUuMUE1IDUgMCAwIDAgNS4xIDlMNSA5QzUgOSA0IDkgNCAxMCA0IDExIDUgMTEgNSAxMUw1LjEgMTFBNSA1IDAgMCAwIDkgMTQuOUw5IDE1QzkgMTUgOSAxNiAxMCAxNiAxMSAxNiAxMSAxNSAxMSAxNUwxMSAxNC45QTUgNSAwIDAgMCAxNC45IDExTDE1IDExQzE1IDExIDE2IDExIDE2IDEwIDE2IDkgMTUgOSAxNSA5TDE0LjkgOUE1IDUgMCAwIDAgMTEgNS4xTDExIDVDMTEgNSAxMSA0IDEwIDR6TTEwIDYuNUEzLjUgMy41IDAgMCAxIDEzLjUgMTAgMy41IDMuNSAwIDAgMSAxMCAxMy41IDMuNSAzLjUgMCAwIDEgNi41IDEwIDMuNSAzLjUgMCAwIDEgMTAgNi41ek0xMCA4LjNBMS44IDEuOCAwIDAgMCA4LjMgMTAgMS44IDEuOCAwIDAgMCAxMCAxMS44IDEuOCAxLjggMCAwIDAgMTEuOCAxMCAxLjggMS44IDAgMCAwIDEwIDguM3oiIGZpbGw9IiMzMzMiLz48L3N2Zz4=");
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23333%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
|
||||
}
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.watching {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%2300f%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
|
||||
|
|
@ -94,9 +97,36 @@
|
|||
|
||||
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
|
||||
padding: 0 5px;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
margin: 0;
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.compact {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
margin: 0 10px 10px 10px;
|
||||
position: relative;
|
||||
padding-right: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px 12px 12px 3px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.compact:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
.mapboxgl-ctrl-attrib.compact:after {
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%09%3Cpath%20fill%3D%27%23333333%27%20fill-rule%3D%27evenodd%27%20d%3D%27M4%2C10a6%2C6%200%201%2C0%2012%2C0a6%2C6%200%201%2C0%20-12%2C0%20M9%2C7a1%2C1%200%201%2C0%202%2C0a1%2C1%200%201%2C0%20-2%2C0%20M9%2C10a1%2C1%200%201%2C1%202%2C0l0%2C3a1%2C1%200%201%2C1%20-2%2C0%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
visibility: visible;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.mapboxgl-ctrl-attrib a {
|
||||
color: rgba(0,0,0,0.75);
|
||||
text-decoration: none;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,14 +6,15 @@
|
|||
<title>{{name}} - TileServer GL</title>
|
||||
{{#is_vector}}
|
||||
<link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
|
||||
<link rel="stylesheet" type="text/css" href="/mapbox-gl-inspect.css{{&key_query}}" />
|
||||
<script src="/mapbox-gl.js{{&key_query}}"></script>
|
||||
<script src="/mapbox-gl-inspect.min.js{{&key_query}}"></script>
|
||||
<style>
|
||||
body {background:#000;color:#ccc;}
|
||||
body {background:#fff;color:#333;}
|
||||
#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}}
|
||||
|
|
@ -35,99 +36,37 @@
|
|||
<script>
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
hash: true
|
||||
});
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
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}
|
||||
});
|
||||
layers_.push({
|
||||
id: el['id'] + Math.random(),
|
||||
source: 'vector_layer_',
|
||||
'source-layer': el['id'],
|
||||
interactive: true,
|
||||
type: 'circle',
|
||||
paint: {'circle-color': colorText,
|
||||
'circle-radius': 3},
|
||||
filter: ["==", "$type", "Point"]
|
||||
});
|
||||
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({
|
||||
hash: true,
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
'vector_layer_': {
|
||||
type: 'vector',
|
||||
tiles: data['tiles'],
|
||||
minzoom: data['minzoom'],
|
||||
maxzoom: data['maxzoom']
|
||||
url: '/data/{{id}}.json{{&key_query}}'
|
||||
}
|
||||
},
|
||||
layers: layers_
|
||||
});
|
||||
|
||||
return layer;
|
||||
}
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4 && xhttp.status == 200) {
|
||||
initLayer(xhttp.response);
|
||||
layers: []
|
||||
}
|
||||
};
|
||||
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 +=
|
||||
'[Layer: ' + feature.layer['source-layer'] + ']\n' +
|
||||
JSON.stringify(feature.properties, null, 2) + '\n\n';
|
||||
});
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
var inspect = new MapboxInspect({
|
||||
showInspectMap: true,
|
||||
showInspectButton: false
|
||||
});
|
||||
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);
|
||||
});
|
||||
propertyList.innerHTML = html;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
{{/is_vector}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue