Visualiser des données dynamiques en utilisant mapbox

Question

Je suis ce example pour visualiser des données sur une carte en utilisant mapbox. J'utilise le code suivant:

<script> mapboxgl.accessToken = 'ACCESS_TOKEN; var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/light-v9', 
    zoom: 12, 
    center: [-122.447303, 37.753574] }); 

map.on('load', function() { 

    map.addLayer({ 
     'id': 'population', 
     'type': 'circle', 
     'source': { 
      type: 'vector', 
      url: 'mapbox://examples.8fgz4egr' 
     }, 
     'source-layer': 'sf2010', 
     'paint': { 
      // make circles larger as the user zooms from z12 to z22 
      'circle-radius': { 
       'base': 1.75, 
       'stops': [[12, 2], [22, 180]] 
      }, 
      // color circles by ethnicity, using data-driven styles 
      'circle-color': { 
       property: 'ethnicity', 
       type: 'categorical', 
       stops: [ 
        ['White', '#fbb03b'], 
        ['Black', '#223b53'], 
        ['Hispanic', '#e55e5e'], 
        ['Asian', '#3bb2d0'], 
        ['Other', '#ccc']] 
      } 
     } 
    }); }); </script> 

Ma question est que j'ai un ensemble de données de taille variable, ce qui est le résultat des requêtes des utilisateurs, et je voudrais visualiser mon ensemble de données. Comment utiliser mapbox pour obtenir ce comportement? Merci.

Answer 1

Si les données sont suffisamment petites, vous pouvez simplement les charger dans le navigateur en tant qu'objet GeoJSON, puis les afficher avec une source geojson. Voir this example.

Si les données changent, vous mettez simplement à jour l'objet source avec .setData(newdata): example.