Having trouble with the select feature in OpenLayers? The selected feature isn't highlighting as expected

When searching for a feature by its attribute, the issue arises where the feature is not highlighted.

A popup appears, but the selected feature remains unhighlighted. Below is the code being used:

    this.showparcel = function(getpin){
        for(var f=0;f<layer_agao.features.length;f++) {
                    if(layer_agao.features[f].attributes.newpin === getpin) {
                        featsel = layer_agao.features[f];
                        selectControl.select(featsel);
                        break;
                    }
                    else{
                        selectControl.unselect(featsel);
                    }
                }
    }
javascriptopenlayers

Answer №1

To ensure smooth operation, utilize jquery to modify selectControl.select(featsel); to 

selectControl.clickFeature(featsel);
in order to prevent multiple selection of features during search.

Below is the revised code snippet:

$("#forminput").change(function(){
        for (var f = 0; f < layer_agao.features.length; f++) {
            if (layer_agao.features[f].attributes.newpin == this.value) {
                featsel = layer_agao.features[f];
                $("#mybutton").click(function(){
                    selectControl.clickFeature(featsel);
                });
                break;
            }
        }
    });

This code section should be incorporated within your init() function, as shown in the following HTML markup.

<form class="navbar-form navbar-right">
                        {% csrf_token %}
                            <select name="q" class="form-control" id="forminput">
                                <option type="text" value=""><b>Select Land PIN</b></option>
                                {% for getlandpins in query_map %}
                                 <option type="text" value="{{ getlandpins.newpin }}">{{ getlandpins.newpin }}</option>
                                {% endfor %}
                            </select>
                        <input type="button" class="btn btn-primary" value="Show Info" id="mybutton">
    </form>

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

Using the array.prototype.map method on props in React.js results in an array that is devoid

Recently, I've started exploring the world of React and encountered a problem while attempting to convert the value of props into a JSX element using array.prototype.map(). You can learn more about this method at this link. Here is a snippet of a Rea ...

javascriptarraysreactjs

Is there a way for me to store the retrieved information from an API into a global variable using Node.js?

function request2API(option){ const XMLHttpRequest = require('xhr2');//Cargar módulo para solicitudes xhr2 const request = new XMLHttpRequest(); request.open('GET', urlStart + ChList[option].videosList + keyPrefix + key); request. ...

javascriptnode.js

JavaScript design not aligning

I'm currently attempting to find a pattern that includes the pipe (|) operator. Here is the code I've used to match the pattern: var format = /[ \\|]/; // This is the pattern for matching the pipe pattern if ("Near raghavendra temple ...

javascript

Flot causes the x-axis display to show incorrect time after a certain period of time

Recently, I encountered an issue with jquery flot while working on a real-time chart. Everything seemed to be functioning properly at first, but after some time had passed, I noticed a significant problem. Initially, the chart was updating correctly; howe ...

javascriptjqueryplotchartsflot

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...

javascripthtmlcss

Tips for accessing the value of an unchecked checkbox in AngularJS

This is a snippet of HTML code: <p> <input type="checkbox" ng-model='add_product.kids' class="filled-in" id="filled-in-box1" /> <label for="filled-in-box1">Kids</label> </p> My goal is to obtain the value "fa ...

javascriptjqueryangularjscheckbox

AngularJS enables the creation of a checkbox that toggles the visibility of content

As I develop a form, selecting 'Next Section' will reveal a new group of input fields organized into 8 sub-forms. Through checkboxes, I aim to dynamically display the relevant sub-form based on user selections. For example, if there are 5 checkbo ...

javascriptangularjscheckbox

transform a zipped file stream into a physical file stored on the disk

I have a Node application named MiddleOne that communicates with another Node App called BiServer. BiServer has only one route set up like this: app.get("/", (req, res) => { const file = `./zipFiles.zip`; return res.download(file); }); When Middl ...

javascriptnode.jsexpresshttpzip

Guide to ensuring jQuery Ajax requests are fully processed with WatiN

Currently, I am in the process of developing WatiN tests to evaluate an Ajax web application. However, I have encountered a timing issue with Ajax requests. My main objective is to ensure that WatiN waits for the Ajax request to be completed before valida ...

javascriptjqueryajaxwatin

Ways to manually trigger a reevaluation of Vuelidate validation

Is there a way to trigger Vuelidate to re-check a validation? For example, I have a form field where users can input the name of a remote directory. There is a Vuelidate validation in place that communicates with the server to verify if the directory exis ...

javascriptvue.jsvuelidate

Multiple web pages utilizing Angular app/widget

I have successfully built a chat application similar to Google Hangouts. However, I am facing a challenge with the angular app/widget running on other pages when URL's are changed, causing the app to either remain fixed or restart on the new web page. ...

javascriptangularjshtmlweb

What could be the reason for the sudden failure of my jQuery + AJAX functionality?

As a novice in JavaScript/jQuery/AJAX, I have a suspicion that the issue lies in some typo that I may have overlooked. Everything was working perfectly, but when I made some edits, the hide() + show() methods stopped functioning (I tested it on both Firefo ...

javascriptjqueryajax

Confusion surrounding the concept of returning an arrow function from a Vuex storage getter

I delved into a Vuex course and the journey was smooth sailing until they introduced an arrow function in a getter, then utilized it in a computed property and action. Behold the code: item structure: const _products = [ { id: 1, title: "iPad 4 Mini", ...

javascriptvue.jsvuexgetterarrow-functions

How can I effectively separate the impact of Next.js onChange from my onClick function?

The buttons in my code are not functioning properly unless I remove the onChange. Adding () to my functions inside onClick causes them to run on every keystroke. How can I resolve this issue? In order to post my question, I need to include some dummy text. ...

javascriptreactjsnext.js

Definitions for TypeScript related to the restivus.d.ts file

If you're looking for the TypeScript definition I mentioned, you can find it here. I've been working with a Meteor package called restivus. When using it, you simply instantiate the constructor like this: var Api = new Restivus({ useDefaultA ...

javascriptmeteortypescript

Experiencing difficulties in installing opensea-js using NPM

While working on my project, I encountered an issue when trying to install opensea-js as a dependency. My Node version is v14.16.0 and NPM version is v7.7.5. Every time I run the command npm install --save opensea-js, it results in an error. I attempted c ...

javascriptnode.jsnpm

Guy discussing the ins and outs of JavaScript variables

I am facing an issue with retrieving the value in the jQuery script. The value should be taken from route_path_images, but it's not showing up. var route_path_images="http://www.domain.com" jQuery("#header_background_night_star").fadeIn(2000).css("b ...

javascriptjquery

Top method for filling an array with strings

Imagine having an array called 'newArray'. var newArray = []; You can add strings to it like this: var thisString = 'watch'; newArray.push(thisString); Now, if you want to have 50 instances of the 'thisString' in the newAr ...

javascriptjqueryarrays

If a user enters an incorrect path, the goal is to automatically redirect them to the homepage while displaying the correct URL in AngularJS

When the URL is manually edited, the webpage displays the same content with a different URL structure. For instance, http://www.example.com/# and http://www.example.com/#/abc both show identical content. I would like to implement a redirect for any edite ...

javascriptangularjs

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

javascriptjqueryhtmlangularjsclick