0

Below I have a code that basically filters as I move along the view which is good. However I would like to also include a portion within here that would make points disappear as I type in my search bar.

function renderListings(features) {
  listingEl.innerHTML = '';
  var sortedFeatures = sortedFeatures = features.sort(function (a, b) {
    if (a.properties.Project_Year < b.properties.Project_Year) {
      return 1;
    }

    if (a.properties.Project_Year > b.properties.Project_Year) {
      return -1;
    }

    return a.properties.Project_Name.localeCompare(b.properties.Project_Name);
  });

  if (sortedFeatures.length) {
    sortedFeatures.forEach(function (f) {
      var prop = f.properties;
      var name = prop.Project_Name;
      var date = prop.Project_Year;
      var link = "http://placekitten.com/200/300";
      var card = ppgcard(name, date, link);
      listingEl.innerHTML += card;
    });
  } else {
    var empty = document.createElement('p');
    empty.textContent = 'No records currently in view';
    listingEl.appendChild(empty);
    ppg_map.setFilter('point_layer', ['has', 'Project_Name']);
  }
}

function getUniqueFeatures(array, comparatorProperty) {
  var existingFeatureKeys = {};
  var uniqueFeatures = array.filter(function (el) {
    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
      return false;
    } else {
      existingFeatureKeys[el.properties[comparatorProperty]] = true;
      return true;
    }
  });
  return uniqueFeatures;
}

var searchTerms = projects.features.map(function (p) {
  return p.properties.Project_Name;
}); // console.log(projects);

ppg_map.on('load', function () {
  ppg_map.addSource('line', {
    "type": "geojson",
    "data": line_source
  }); // // line.features.forEach((feature) =>{
  // //   let line_layer = feature.properties['Project_Name']
  //
  // //   if (!ppgmap.getLayer(line_layer)){
  //     ppg_map.addLayer({
  //       "id": "line_layer",
  //       // "id": line_layer,
  //       "type": "line",
  //       "source":"line",
  //       "minzoom": 13,
  //       "paint": {
  //           "line-color": "#e9421c",
  //           "line-width": 8,
  //           "line-opacity": 0.3
  //       },
  //       "layout": {
  //           "line-join": "round",
  //           "line-cap": "round"
  //       }//,
  //     //  "filter": ["==","Project_Name", line_layer]
  //     });
  //
  // //     line_layers.push(line_layer);
  // //   }
  // // });

  ppg_map.addLayer({
    "id": "line_layer",
    "type": "line",
    "source": "line",
    "minzoom": 13,
    "paint": {
      "line-color": "#e9421c",
      "line-width": 8,
      "line-opacity": 0.3
    },
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    }
  });
  ppg_map.addSource('point', {
    "type": "geojson",
    "data": point_source
  });
  ppg_map.addLayer({
    "id": "point_shadow",
    "source": "point",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "#000000",
      "circle-opacity": 0.5,
      "circle-blur": 2,
      "circle-translate": [6, 6]
    }
  });
  ppg_map.addLayer({
    "id": "point_layer",
    "source": "point",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "#e9421c",
      "circle-stroke-width": 3,
      "circle-stroke-color": "#FFFFFF"
    }
  }); // let envelope = envelope('point_layer');
  // console.log(envelope);

Mapbox has a sample of the code here

https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

However I am not sure how to incorporate it into my code and include my current and new features.

Your Answer

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

Browse other questions tagged or ask your own question.