title: MapBox draw Polygon of Feature on Click
body: <p>So my idea seems pretty straight forward to me but I struggle nevertheless. What I want to do is basically click on any point of my map and draw a polygon on the main feature, i.e. if I click on a park or a building that specific polygon is displayed and highlighted. </p>
  
  <p>I used a lot of this code: <a href="https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/" rel="nofollow noreferrer">https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/</a></p>
  
  <p>But instead of giving it a set of geojson I want my javascript to select to needed geojson data on <em>mousover</em> (eventhough i am not sure whether that works in general). Right now my code snipped compiles but doesn't show anything. </p>
  
  <p>In a later step I want to collect all polygons of the same feature, i.e. all parks, and display them as highlighted polygons and then export them as a svg file which only consists of the map representations of the feature clicked on. Maybe someone has an idea for that as well? </p>
  
  <p>Thanks in regard :)</p>
  
  <p>This is my javascript as of now:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Set AccessToken from MapBox
  mapboxgl.accessToken = 'pk.eyJ1IjoidG1pbGRuZXIiLCJhIjoiY2o1NmlmNWVnMG5rNzMzcjB5bnV3YTlnbiJ9.r0BCga0qhRaHh0CnDdcGBQ';
  
  //Setup starting view point at Uni-Bremen campus
  var map = new mapboxgl.Map({
   container: 'content-map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [8.85307, 53.10810],
      zoom: 16
  });
  
  
  //Add a search bar -&gt; hidden for presentation
  /*map.addControl(new MapboxGeocoder({
      accessToken: mapboxgl.accessToken
  }));*/
  
  //Function to show all Features of a certian point
  map.on('mousemove', function (e) {
      var features = map.queryRenderedFeatures(e.point);
      document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
      console.log(JSON.stringify(features, null, 2));
  
      drawPolygon();
  });
  
  
  
  //Draw a Polygon
  function drawPolygon () {
  
   //set boundary box as 5px rectangle area around clicked point
   var bbox = [[e.point.x - 5, e.point.y - 5], [e.pont.x + 5, e.point.y + 5]];
  
   //set the data on pointer using the bbox
   var data = map.queryRenderedFeatures(bbox);
  
   map.on('load', function() {
    
    var dataSource = 'school';
  
    //set school to the feature and use 'setJsonData' as data source.
    map.addSource(dataSource, {
     'type': 'geojson',
     'data': data
    });
    //adding a new layer for the general display
    map.addLayer({
     'id': 'dataSet',
     'type': 'fill',
     'source': dataSource,
     'source-layer': 'original',
     'paint': {
      'fill-outline-color': 'rgba(0,0,0,0.1)',
      'fill-color': 'rgba(0,0,0,0.1)'
     }
    }, 'place-city-sm' ); //place polygon under these labels
  
    
    //adding a new layer for the polygon to be drawn
    map.addLeyer({
     'id': 'dataSet-highlighted',
     'type': 'fill',
     'source': dataSource,
     'source-layer': 'original',
     'paint': {
               'fill-outline-color': '#484896',
               'fill-color': '#6e599f',
               'fill-opacity': 0.75
              },
              'filter': ['in', 'FIPS', '']
    }, 'place-city-sm'); //place polygon under these labels
  
    
    //action on click to show the polygon and change their color
    map.on('click', function (e) {
     
     //retrieve data from 'dataSource'
     var dataFromSource = map.queryRenderedFeatures(bbox, {layers: ['dataSource'] });
  
  
     // Run through the selected features and set a filter
           // to match features with unique FIPS codes to activate
           // the `counties-highlighted` layer.
     var filter = dataSource.reduce(function(memo, dataSource) {
      memo.push(dataSource, properties.FIPS);
      return memo;
     } ['in', 'FIPS'] );
     
     map.setFilter('dataSet-highlighted', filter);
    });
  
  
   });
  }</code></pre>
  </div>
  </div>
  </p>