0

I'm currently using google fusion tables to store research data and visualize it in the Google Maps Javascript API. I'm new to coding and am having trouble developing some functional components of the web map. I was hoping someone here could help me out with a filtering by checkboxes component.

I am currently working off the IN query Google Fusion Tables Layer example found here: https://developers.google.com/fusiontables/docs/samples/in

Basically what I'm trying to develop is a series of checkboxes so that users can filter the dataset by year. Below is the code I have so far, some of which I tried to steal and alter from the example. I think there is an error in my Javascript logic but like I said, I'm a novice at best.

Below is my code:

https://gist.github.com/cv26/1452706d9513215cb5e90ef9b13d070d

1 Answer 1

2

As to your code, sorry if it is kind of late just saw this about a year and some months later, I think a nice and simple way to do so is what is listed in this codepen example. Hope it helps.

Example: https://codepen.io/apsolut/pen/rWGEWV

//k00rdinate http://www.mapcoordinates.net/en
//this is MAPbox 
//also google API is here: https://appendto.com/2016/09/advanced-google-maps-with-javascript-filtering-and-displaying-information/

L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg'; var map = L.mapbox.map('map', 'mapbox.light') .setView([45.2671352, 19.8335496], 6);;

var featureLayerGeoJSON = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "marker-color": "#dc1000", "marker-size": "medium", "marker-symbol": "heliport", "CAT_CODE": "novisad" }, "geometry": { "type": "Point", "coordinates": [ 19.8335496, 45.2671352 ] } }, { "type": "Feature", "properties": { "marker-color": "#2095c8", "marker-size": "large", "marker-symbol": "1", "CAT_CODE": "beograd" }, "geometry": { "type": "Point", "coordinates": [ 20.4589216, 44.786568 ] } }, { "type": "Feature", "properties": { "marker-color": "#dc0000", "marker-size": "medium", "marker-symbol": "", "CAT_CODE": "beograd" }, "geometry": { "type": "Point", "coordinates": [ 20.5589216, 44.986568 ] } }, { "type": "Feature", "properties": { "marker-color": "#f19", "marker-size": "medium", "marker-symbol": "3", "CAT_CODE": "sarajevo" }, "geometry": { "type": "Point", "coordinates": [ 18.4130763, 43.8562586 ] } }, { "type": "Feature", "properties": { "marker-color": "#3bd2d7", "marker-size": "medium", "marker-symbol": "2", "CAT_CODE": "zagreb" }, "geometry": { "type": "Point", "coordinates": [ 15.981919, 45.8150108 ] } }, { "type": "Feature", "properties": { "marker-color": "#dc1000", "marker-size": "medium", "marker-symbol": "", "CAT_CODE": "novisad", "moj_filter": "mojfilter" }, "geometry": { "type": "Point", "coordinates": [ 19.8335496, 45.2671352 ] } } ] };

map.featureLayer.setGeoJSON(featureLayerGeoJSON);

// Find and store a variable reference to the list of filters. var filters = document.getElementById('filters');

// Wait until the marker layer is loaded in order to build a list of possible // types. If you are doing this with another featureLayer, you should change // map.featureLayer to the variable you have assigned to your featureLayer. var makeCheckboxes = function() { // Collect the types of symbols in this layer. you can also just // hardcode an array of types if you know what you want to filter on, // like var types = ['foo', 'bar']; var typesObj = {}, types = [];

map.featureLayer.eachLayer(function (entity) { typesObj[entity.feature.properties['CAT_CODE']] = true; }) for (var k in typesObj) types.push(k);

var checkboxes = []; // Create a filter interface. for (var i = 0; i < types.length; i++) { // Create an an input checkbox and label inside. var item = filters.appendChild(document.createElement('div')); var checkbox = item.appendChild(document.createElement('input')); var label = item.appendChild(document.createElement('label')); checkbox.type = 'checkbox'; checkbox.id = types[i]; checkbox.checked = true; // create a label to the right of the checkbox with explanatory text label.innerHTML = types[i]; label.setAttribute('for', types[i]); // Whenever a person clicks on this checkbox, call the update(). checkbox.addEventListener('change', update); checkboxes.push(checkbox); }

// This function is called whenever someone clicks on a checkbox and changes // the selection of markers to be displayed. function update() { var enabled = {}; // Run through each checkbox and record whether it is checked. If it is, // add it to the object of types to display, otherwise do not. for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) enabled[checkboxes[i].id] = true; } map.featureLayer.setFilter(function(feature) { // If this symbol is in the list, return true. if not, return false. // The 'in' operator in javascript does exactly that: given a string // or number, it says if that is in a object. // 2 in { 2: true } // true // 2 in { } // false return (feature.properties['CAT_CODE'] in enabled); }); } } makeCheckboxes()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.