'Filter by value in checkbox popup in Mapbox GL

I have changed my mind about how I want to use the Checkbox filter in Mapbox. I am using CSV2Geojson to map Google Sheets data in my map and then filter by values in one column. I know there is this https://labs.mapbox.com/education/impact-tools/finder-with-filters/ but I want to stick to my layout instead of using a config file to define options. My original spreadsheet had a function that looked at column headers and only returned cells with "Y" in them when checked. Now, I have 1 column where I need to look for 4 specific values. Below is the code and codepen for debugging. The code in question is at the bottom of the code block.

https://codepen.io/bearcats6001/project/editor/AjrPPP

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - project map 2</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<!-- partial:index.partial.html -->

<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src='https://npmcdn.com/csv2geojson@latest/csv2geojson.js'></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" type="text/css">-->

<div id="map">

  <div id="filterMenu">

    <h3>Programs</h3>

    <input type="checkbox" id="Nathan" name="srBox" value="SustainableRecreation">
    <label for="Nathan"> Nathan Shock Centers of Excellence in the Basic Biology of Aging</label><br>

    <input type="checkbox" id="Pepper" name="hlBox" value="HealthyLandscapes">
    <label for="Pepper"> Claude D. Pepper Older Americans Independence Centers</label><br>

    <input type="checkbox" id="Aging" name="ovBox" value="Overnight">
    <label for="Aging"> Centers on the Demography and Economics of Aging</label><br>
    <input type="checkbox" id="Minority" name="ovBox" value="Overnight">
    <label for="Minority"> Resource Centers for Minority Aging Research</label><br>

  </div>

</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

var transformRequest = (url, resourceType) => {
  var isMapboxRequest =
    url.slice(8, 22) === "api.mapbox.com" ||
    url.slice(10, 26) === "tiles.mapbox.com";
  return {
    url: isMapboxRequest
      ? url.replace("?", "?pluginName=sheetMapper&")
      : url,
  };
};
 
mapboxgl.accessToken = 'pk.eyJ1IjoiYWZhcm9yZyIsImEiOiJjbDIwajV3YTUwMGc3M2xwNDdiYWJiMjUzIn0.Pjt9AndPk1Axv99wez-5TA';

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [-102.182698, 37.131563],
    zoom: 3,
   
    //left, bottom, right, top
});

var nav = new mapboxgl.NavigationControl({
        showCompass: true,
        showZoom: true,
        visualizePitch: true
      });

map.addControl(nav, "bottom-right");



$(document).ready(function () {
  $.ajax({
    type: "GET",
    url: 'https://docs.google.com/spreadsheets/d/1umfhXq5WEPLEABV81-tZUayAw7WZrmqe/gviz/tq?tqx=out:csv&sheet=Sheet1',
    dataType: "text",
    success: function (csvData) { makeGeoJSON(csvData); }
  });



  function makeGeoJSON(csvData) {
    csv2geojson.csv2geojson(csvData, {
      latfield: 'Latitude',
      lonfield: 'Longitude',
      delimiter: ','
    }, function (err, data) {
      map.on('load', function () {

        map.addLayer({
          'id': 'rfovProjects',
          'type': 'circle',
          'source': {
            'type': 'geojson',
            'data': data
          },
          'paint': {
            'circle-radius': 7,
            'circle-color': "blue",
            'circle-opacity': 0.5,
          }
        });

      });

    });
  };
});

map.on('mouseenter', 'rfovProjects', function () {
  map.getCanvas().style.cursor = 'pointer';
});

map.on('mouseleave', 'rfovProjects', function () {
  map.getCanvas().style.cursor = '';
});


map.on('click', function(e) {

    if(!e.originalEvent.defaultPrevented) {
      e.originalEvent.preventDefault();
    }

    var features = map.queryRenderedFeatures(e.point, {
        layers: ['rfovProjects']
    });

    if (!features.length) {
        return;
    }

    var feature = features[0];

    var popupContent = '<h3 style="display:inline">' + feature.properties.Name + '</h3><br><p style="display:inline"><b>'
    /*popupContent += feature.properties.time ? '</b>, ' + feature.properties.time : '</b>'*/ 
    popupContent += '<br> <a href=" ' + feature.properties.Website + ' " target="_blank" rel="noopener noreferrer">Website Link</a> </p>'

    var popup = new mapboxgl.Popup({ offset: [0, 0] })
        .setLngLat(e.lngLat)
        .setHTML(popupContent)
        .addTo(map);
});


//basemap toggles
/*
var tRadio = document.getElementById('topoRadio');
tRadio.addEventListener('change', function() {
  if (this.checked) {
    map.setLayoutProperty('mapbox-satellite', 'visibility', 'none');
  }
});

var iRadio = document.getElementById('imageryRadio');
iRadio.addEventListener('change', function() {
  if (this.checked) {
    map.setLayoutProperty('mapbox-satellite', 'visibility', 'visible');
  }
});*/
//
map.doubleClickZoom.enable();
map.on('dblclick', function(e) {
map.getZoom() +10;
});
map.addControl(
  new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,


    mapboxgl: mapboxgl,

    flyTo: {
      zoom: 12,
      easing: function(t) {
        return t;
      }
    },

    marker: false

  })
);

map.addControl(new mapboxgl.NavigationControl());
var filters = {};

function updateFilters() {
  var compositeFilter = ['all'];
  for (let filterValue in filters) {
    if (filters[filterValue]) {
      compositeFilter.push(['==', ['get', filterValue], 'Y']);
    }
  }
  if (compositeFilter.length > 1)
    map.setFilter('rfovProjects', compositeFilter);
  else {
    map.setFilter('rfovProjects', null);
  }
}

var checkbox = document.getElementById('Nathan');
checkbox.addEventListener('change', function() {
  filters['Program'] = this.checked;
  updateFilters();
});

var checkbox = document.getElementById('Pepper');
checkbox.addEventListener('change', function() {
  filters['Program'] = this.checked;
  updateFilters();
});

var checkbox = document.getElementById('Aging');
checkbox.addEventListener('change', function() {
  filters['Program'] = this.checked;
  updateFilters();
});
var checkbox = document.getElementById('Minority');
checkbox.addEventListener('change', function() {
  filters['Program'] = this.checked;
  updateFilters();
});
javascripthtmlmapbox


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions