CODEWITHSUNDEEP
javascriptjqueryhtmlmapbox
iskandarblue
iskandarblue

Reputation: 7526

Attaching multiple values to a single div

I am using the following mapbox.js example to filter features from a geojson file. The example is self-explanatory - the first step is to find all checkboxes that are checked and to build a list of their values.

At the moment, the checkbox values are all single strings. My question is simple, can value in the checkboxes be an array of integers (or an array of strings?), and if so, how would attach an array of integers to value in a div input so that you can filter by multiple values at once? 

for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);

<div id='filters' class='ui-select'>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='fast-food' value='fast-food'/><label for='fast-food'>fast-food</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bicycle' value='bicycle'/><label for='bicycle'>bicycle</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bar' value='bar'/><label for='bar'>bar</label></div>
</div>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg';
var map = L.mapbox.map('map', 'mapbox.dc-markers');
var filters = document.getElementById('filters');
var checkboxes = document.getElementsByClassName('filter');

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);
    }
    // The filter function takes a GeoJSON feature object
    // and returns true to show it or false to hide it.
    map.featureLayer.setFilter(function (f) {
        // check each marker's symbol to see if its value is in the list
        // of symbols that should be on, stored in the 'on' array
        return on.indexOf(f.properties['marker-symbol']) !== -1;
    });
    return false;
}

// When the form is touched, re-filter markers
filters.onchange = change;
// Initially filter the markers
change();
</script>

Upvotes: 1

Views: 1424

Answers (1)

Jason Towne
Jason Towne

Reputation: 8050

You could take advantage of jQuery's .data() method which allows you to assign a property name and value to an element on the DOM. You could set the data element's value to a comma-delimited list of integers which can be parsed into its own array.

Some (untested) pseudocode as an example:

<div id='filters' class='ui-select'>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='fast-food' value='fast-food' data-filter='fast-food,restaurants'/><label for='fast-food'>fast-food</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bicycle' value='bicycle'/><label for='bicycle' data-filter='bicycle, transportation'>bicycle</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bar' value='bar' data-filter='bar, restaurants'/><label for='bar'>bar</label></div>
</div>

...

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          var array = $(checkboxes[i]).data("filter").split(',');
          Array.prototype.push.apply(on,array);
        }
    }

    ...
}

Upvotes: 1

Related Questions