I struggle with getting data from a MapBox Vector Tile source or MapBox DataSet.
I found the example page from MapBox GL JS.
The goal is to let users put in a number (1-24) in a input field, this number relates to a "MissionName".
An example comes close but doesn't use a vectortile made with MapBox Studio.
People should also be able to put in a "PortalName" Preferably the same input box
When people put in a number the map should display the "MissionArea" which is a filled in polygon. When people fill in a "PortalName" they should see that portal lit up on the map. Either as the only Icon or a Icon with changed colour.
I looked at this one and this one, because I think they both talk about the same problems.
I made a MapBox dataset 'PortalDataSet' that contains 211 features.
I made a tileset in MapBox Studio it has the following structure:
name tileset is "PortalsTileSet"
name Layer is "PortalsTileSet"
property 1 is "MissionArea"
property 2 is "MissionName"
property 3 is "MissionNr"
property 4 is "OrderinMission"
property 5 is "Portal URL"
property 6 is "PortalName"
property 7 is "AreaName"
The Problem is that I can't seem to get data from the MapBox vector tile source, the data that does appear when clicking on "Sculpture of an eagle on top t" comes from a layer from the the map style itself dough I seem to be missing the 'AreaName' property. I tried to look at the console log, but that didn't helped me further. What is the approiate way to get the data from the vector tile source or the dataset itself?
Here is my code so far..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PopUp Works AreaName doesn't</title>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" rel="stylesheet">
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet">
<div id="map" class="mapboxgl-map"><div class="mapboxgl-missing-css">Missing Mapbox GL JS CSS</div><div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate"><canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="960" height="1107" style="position: absolute; width: 768px; height: 886px;"></canvas></div><div class="mapboxgl-control-container"><div class="mapboxgl-ctrl-top-left"></div><div class="mapboxgl-ctrl-top-right"><div class="mapboxgl-ctrl mapboxgl-ctrl-group"><button class="mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in" type="button" aria-label="Zoom In"></button><button class="mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out" type="button" aria-label="Zoom Out"></button><button class="mapboxgl-ctrl-icon mapboxgl-ctrl-compass" type="button" aria-label="Reset North"><span class="mapboxgl-ctrl-compass-arrow" style="transform: rotate(0deg);"></span></button></div></div><div class="mapboxgl-ctrl-bottom-left"><div class="mapboxgl-ctrl" style="display: block;"><a class="mapboxgl-ctrl-logo" target="_blank" href="https://www.mapbox.com/" aria-label="Mapbox logo"></a></div></div><div class="mapboxgl-ctrl-bottom-right"><div class="mapboxgl-ctrl mapboxgl-ctrl-attrib"><a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/feedback/?owner=mapbox&id=dark-v9&access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA" target="_blank">Improve this map</a></div></div></div></div>
</head>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#locations {
position: absolute;
}
.legend {
background-color: #fff;
border-radius: 3px;
bottom: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 10px;
z-index: 1;
}
.legend h4 {
margin: 0 0 10px;
}
.legend p {
margin-left: 30px;
position: absolute;
display: block;
top: 0;
}
.legend div {
position:relative;
}
.legend div span {
border-radius: 50%;
display: inline-block;
margin-right: 5px;
opacity:0.8;
background-color:#D49A66;
}
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<body>
<script>
//Put your Mapbox Public Access token here
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9yc3N1eCIsImEiOiJjaXNsZm5ld2UwMDZiMm5wa21mZTJtdTA1In0.kZRfmUVy1udXUB3kKUChrQ';
//Load a new map in the 'map' HTML div
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/forssux/cjbkpt7rv2gyl2srt78debpwo',
center: [4.4054,51.2185],
maxZoom: 20,
minZoom: 4,
zoom: 19.2
});
// When a click event occurs near a place, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, {
// layers: ['Portals']//,
// layers: ['MissionArea']
});
if (!features.length) {
return;
}
var source = ['mapbox://forssux.cjbcsiw4o15vr2rpbk37848h5-562bk'];
console.log(features);
//console.log(VectorTileFeature);
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML('<div id="popup" class="popup" style="z-index: 10;"> <h5> Detail: </h5>' +
'<ul class="list-group">' +
'<li class="list-group-item"> Mission Name: ' + feature.properties['AreaName'] + " </li>" +
'<li class="list-group-item"> Portal Name: ' + feature.properties['PortalName'] + " </li>" +
'<li class="list-group-item"> Portal Nr in Mission: ' + feature.properties['OrderInMission'] + " </li>" +
'<li class="list-group-item"> Portal URL: ' + feature.properties['Portal URL'] + " </li>" +
'<li class="list-group-item"> Mission Nummer: ' + feature.properties['MissionNr'] + " </li>" +
'</ul> </div>')
.addTo(map);
});
// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'.
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['Portals']
});
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
</script>
</body>
</html>
