3

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&amp;id=dark-v9&amp;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>
  • If you cut down this question into something minimally demonstrating your problem and something generic that other people who might be having a similar problem could benefit from, I can take a look, but at the moment there is too much code not relevant to your problem to review. – AndrewHarvey Dec 23 '17 at 1:43
  • Thanks for cleaning up the question. I looked at the code and removed the click function. It seems there's no way to just use the data that' in a MapBox tileset vector source. I hope you can prove me wrong. – Guy Forssman Dec 23 '17 at 13:51
1

There's no specification for using vector tiles as a dataset. You'll probably need to add a dataset or source (such as GeoJSON) with the data you want as a layer.

Reference: https://www.mapbox.com/vector-tiles/specification/#not-included

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.