Implement a GeoJson group filter

Currently, I am utilizing Leaflete and working with a featureGroup that contains multiple features. Each feature within the group is defined by fields such as name, epoch, year, day, and length.

I am interested in creating a filter to selectively add layers to the map based on specific criteria, specifically to display only those features with an epoch of 2021 and a year of 2022. This filter should be activated by clicking the 'epoch' button labeled '2021-22'.

Any guidance or insights on how to achieve this functionality would be greatly appreciated.

Thus far, my attempts to utilize if and for loops to iterate through the array and search for the desired conditions have been unsuccessful. Additionally, using .forEach has not produced the desired results. It seems clear that I may be overlooking something crucial in my implementation. Your assistance in resolving this issue would be invaluable.

javascriptleaflet

Answer №1

To enhance the functionality of your button, consider implementing a new function that will clear the existing group and introduce a new layer with a specified filter condition. Here's an example of how you can achieve this:

function applyFilter(){
    markers.clearLayers();
    let filteredData = new L.GeoJSON(loadedData, {
        onEachFeature: customFunction, 
        pointToLayer: definePointLayer,
        filter: function(feature) {
            if(feature.properties['epoch'] == '2021' && feature.properties['year'] == '2022'){
                return true;
            }
        }
     }).addTo(markers);
}

Answer №2

Attempting to make adjustments to the function you provided has proven troublesome for me. The filter seems ineffective and the map vanishes from view once the function is incorporated.

var ciclList = L.layerGroup([DaisyLData, .....])


 lnk6162.addEventListener("click", function (feature,layers) {
                markers.clearLayers();
                let filteredData = new L.GeoJSON(loadedData, {
                    onEachFeature: function (feature, layer) {
                layer.bindTooltip(feature.properties.NAME+' ('+feature.properties.year+')');}, 
                    pointToLayer: ptl,
                    filter: function(feature) {
                        if(feature.properties.SEASON == '2021' && feature.properties.year == '2022'){
                            return true;
                        }
                    }
                 }).addTo(markers);
            
          
     });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to rotate a SVG transformation matrix around its center point

CSS .square { background-color: green; height: 40px; width: 40px; } JS var square = { sizeReal : { "width": 40, "height": 40 } , position : { "x": 100, "y": 100 } }; $(". ...

javascriptmathmatrixsvgtransform

What causes a useState to revert back to false when navigating back and forth on the screen?

Recently, I've been working on a feature to toggle favorite products and store their unique id along with an isFav property on a Firebase database. This data is then used to display the favorites on the FavoritesScreen. While testing this functionali ...

javascriptreactjsreact-nativereact-navigation

Sending the user to their destination

There is a code in place that triggers when an email is sent to the user, containing a link that leads them to a specific endpoint upon opening. I am experiencing issues with redirection at the end of the function. The redirect does not seem to be working ...

javascriptnode.jsjsonnpm

The system has encountered an issue: Unable to locate the module 'avoriaz'

I'm currently diving into Vue for the first time and have been following along with this helpful tutorial on testing. Everything was going smoothly until I encountered a perplexing error during the final step of utilizing avoriaz: ERROR in ./test/uni ...

javascriptnpmvue.jsavoriaz

How can I retrieve the array data that was sent as a Promise?

I have a database backend connected to mongoDB using mongoose. There is a controller that sends user data in a specific format: const db = require("../../auth/models"); const User = db.user const addProduct = (req, res) => { User.findOne({ ...

javascriptnode.jsreactjsmongodbexpress

Unseen columns within an HTML table are also being included in the export

In my HTML table, I have included a drop-down feature for users to select the row they want to view, along with an export button that allows them to save the data in Excel format. During the exporting process, I encountered an issue where hidden rows were ...

javascriptjquerycsshtml-table

How to toggle button states within an ng-repeat loop in AngularJS

<div ng-repeat="item in Items"> <button ng-init="checkIfDisabled[item.name] = true" ng-disabled ="checkIfDisabled[item.name] ===true "></button> </div> In my project, I am w ...

javascriptangularjs

Issue with accessing the response object and dynamically generated HTML elements beyond the function in Javascript

I am in the process of developing a todo application using Django and Ajax. Upon loading, I retrieve all tasks from the database and display them. When a user clicks on a task, my goal is to mark it as completed. However, I am encountering the following is ...

javascriptajax

The sendKeys() method in Protractor is failing due to the element being hidden/not

Hi there! I am currently new to automated testing with protractorJS for an angularJS homepage. While the code I've written so far has been successful, I'm facing an issue where I'm unable to input keys into the search field. After running th ...

javascriptangularjsprotractorautomated-tests

exchange the class using only JavaScript

I need help with a code snippet that allows for swapping classes using a loop. The objective is to click on the brown square causing it to move to the position of the blue square, while the blue square moves to the previous position of the brown square. T ...

javascripthtmlcss

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

javascripthtmlcssslideshowweb-maker

Utilizing one-way data binding with Angular 2 in HTML is similar to the approach used in Angular 1, employing the

Is there a method in Angular 2 to achieve one-way data binding similar to what we did in Angular 1? <!DOCTYPE html> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> &l ...

javascriptangularjsangular2-templatetwo-way-binding

When using the forEach method to create a new object, certain properties may appear with the symbol $$typeof as Symbol(react.element) React

As I receive an array of Objects, each containing a "attributes.seller" property, I iterate over them using forEach() to create new objects with only the necessary properties and store them in a new array. The problem arises when, despite all the received ...

javascriptreactjsobjectforeach

AngularJS ngDialog facing a problem with kendo-mobile-switch when using transform: translateX()

Utilizing the kendo-mobile-switch in my AngularJS project has been successful on pages. However, when attempting to incorporate it into an ngDialog modal, a problem arises with the transform: translateX() property. Instead of shifting 27 pixels to the righ ...

javascriptcssangularjskendo-ui

Tips for displaying the XYZ axes on a graph using JavaScript

I am working with a dataset that captures motion data over time, specifically along the XYZ axes. I want to visualize the object's movement using these values on a JavaScript graph. Which type of graph would be most suitable for visualizing this kind ...

javascriptgraphchartsplotgeometry

The error message "TypeError: module is not a function in AngularJS & Jasmine" indicates that there

In my application sample, I have a test runner setup as shown below: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <!--angular--> <script ...

javascriptangularjsjasmine

Sequential Bootstrap collapse

I'm struggling with the collapse feature in bootstrap. For example, I have three buttons that are supposed to collapse different content in the same target box. When I click on the first button, div #one collapses. However, when I try to open anothe ...

javascriptjquerytwitter-bootstrap

Getting state from two child components in React can be achieved by using props to pass the

In my tabbed modal dialog, I have two image list components rendering images based on props defined in the parent. Each component manages its own array of image objects. The challenge is that I need to update or delete these images using a single save butt ...

javascriptreactjsreact-state-management

Iterate through two jQuery collections at the same time

I am faced with the challenge of having two jQuery objects that are of equal length. var items = $('.item'); var details = $('.detail'); If these were traditional arrays, I could easily loop through them using their index, as shown be ...

javascriptjquery

The TextArea element is experiencing issues with the Jquery function

In my asp.net web application, I have implemented a JQuery function to restrict user input characters. $(document).ready(function () { $('input').on('input', function () { var c = this.selectionStart, ...

javascriptc#jqueryasp.net