Skip to content

Instantly share code, notes, and snippets.

@briandaviddavidson

briandaviddavidson/index.html Secret

Last active October 1, 2018 16:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save briandaviddavidson/c81b06997c6bb086ed2e6152ef998fab to your computer and use it in GitHub Desktop.
Save briandaviddavidson/c81b06997c6bb086ed2e6152ef998fab to your computer and use it in GitHub Desktop.
Download ZIP
A WFS Client for the OGC Vector Tiles Pilot
Raw
index.html
<!DOCTYPE html >
<html>
<head>
<meta charset='utf-8' />
<title>Add a third party vector tile source</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
<script src="https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0,0,0,0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
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;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
#menu a.active:hover {
background: #3074a4;
}
</style>
</head>
<body>
<nav id="menu"></nav>
<div id='map'></div>
<script>
var dataLoaded = false;
mapboxgl.accessToken = 'pk.eyJ1IjoiYmRkYXZpZHNvbiIsImEiOiJjamx6aG0yaHoyMjc1M2tvZ3cyY3kzYWZwIn0.CPBljso5lfebKWQNxStP6Q';
var map = new mapboxgl.Map({
container: 'map',
center: [0, 0],
zoom: 1,
style: 'mapbox://styles/mapbox/dark-v9',
hash: true
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
const sources = {
"ecere": [{
"url": "http://maps.ecere.com/hms/layers/vtp/Daraa/UtilityInfrastructurePnt/items",
"layer": "UtilityInfrastructurePnt_ecere",
"type": "geojson"
}],
"geosolutions": [{
"url": "https://backoffice-maps.geo-solutions.it/geoserver/wfs3/collections/vtp__UtilityInfrastructurePnt/items?f=application%2Fgeo%2Bjson&limit=50",
"layer": "vtp__UtilityInfrastructurePnt",
"type": "geojson"
}],
"cubewerx": [{
"url": "http://tb14.cubewerx.com/cubewerx/cubeserv/vt/wfs/3.0.0/vtpilot/collections/UtilityInfrastructurePnt/items?count=10&outputFormat=application%2Fgeo%2Bjson",
"layer": "UtilityInfrastructurePnt_cubewerx",
"type": "geojson"
}],
"ii": [{
"url": "https://services.interactive-instruments.de/vtp/daraa/collections/utilityinfrastructurepnt/tiles/default/{z}/{x}/{y}?f=mvt",
"layer": "utilityinfrastructurepnt",
"type": "mvt"
}],
"mbx": [{
"url": "http://ec2-54-88-75-105.compute-1.amazonaws.com/collections/utility_infrastructure_pnt/items/{z}/{x}/{y}.mvt",
"layer": "utility_infrastructure_pnt",
"type": "mvt"
}]
}
map.on('load', function() {
for (key in sources) {
let data = sources[key][0];
let visibility = (key === 'mbx' ? 'visible' : 'none');
if (data.type === 'geojson') {
fetch(data.url)
.then(r => r.json())
.then((geojson, index) => {
map.addLayer({
"id": data.layer,
"type": "circle",
"source": {
"type": "geojson",
"data": geojson
},
'layout': {
'visibility': visibility
},
"paint": {
"circle-color": getRandomColor(),
'circle-radius': {
'base': 1.75,
'stops': [
[12, 2],
[22, 180]
]
},
},
}, 'waterway-label');
});
} else {
let visibility = (key === 'mbx' ? 'visible' : 'none');
map.addLayer({
"id": data.layer,
"type": "circle",
"source": {
"type": "vector",
"tiles": [data.url],
"minzoom": 0,
"maxzoom": 22
},
"source-layer": data.layer,
'layout': {
'visibility': visibility
},
"paint": {
"circle-color": getRandomColor(),
'circle-radius': {
'base': 1.75,
'stops': [
[12, 2],
[22, 180]
]
},
}
}, 'waterway-label');
}
}
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeOnClick: true
});
map.on('mousemove', 'utility_infrastructure_pnt', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var f_code = e.features[0].properties.f_code;
var id = e.features[0].properties.id;
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(e.lngLat)
.setHTML(`<h4>f_code: ${f_code}<br />id: ${id}</h4>`)
.addTo(map);
});
map.on('mouseleave', 'utility_infrastructure_pnt', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
})
var toggleableLayerIds = Object.keys(sources);
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = (id === 'mbx' ? 'active' : '');
link.textContent = id;
link.onclick = function (e) {
var clickedLayer = sources[this.textContent][0].layer;0
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment