How can I make a layer visible in OpenLayers?

I can't figure out what I'm doing wrong. I believe everything is written correctly:

The HTML code I have looks like this:

    <b>&nbspSelect Area</b>
    <select id="mySelect_1" onchange="showSelectedArea();" > 
    <option selected disabled hidden value=''></option>"
    <option value="1">Center</option> 
    <option value="2">New jersey</option>
    </select>

and the Javascript is as follows:

    layer1.setVisibility(false);    
    layer2.setVisibility(false);    
    layer3.setVisibility(false);
    layer4.setVisibility(false);    

    }

    function showSelectedArea() {

    var e = document.getElementById("mySelect_1");
    var valueEpilogi_1 = e.options[e.selectedIndex].value;

    if (valueEpilogi_1 == "1") {
          layer3.setVisibility(true);   
    }

    }

I don't think the issue lies in the if statement or passing the value, even setting true == true doesn't change visibility to true. It seems like there might be an issue with triggering the function at the select tag.

Could someone please review my external js file and let me know what the problem might be? I've defined all layers in the init function which runs on body load - could that be causing the problem? snk.to/f-cdh90xd4

javascriptopenstreetmapopenlayers-3

Answer №1

Make sure to carefully read the select try value here:

var valueChoice_1 = document.getElementById('mySelect_1').value ;

modification : If you plan on using 'layer' outside of the init() function, it needs to be declared as a global variable

for instance :

function init(){
/* this variable is global and declared without 'var', making it accessible outside of the function*/
areas = new OpenLayers.Layer.Vector("Polygon Layer");
...
map.addLayer(areas); 
..
areas.setVisibility(false); 
...
}

function displaySelectedArea() {

var valueChoice_1 = document.getElementById('mySelect_1').value ;

if (valueChoice_1 == "1") {
layer.setVisibility(true);   
}

}

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

Materialize CSS is throwing an error: 'velocity is not a function'

Encountering an issue with Materialize CSS. A JavaScript error appears 'I('.velocity is not a function', for certain actions. For instance, clicking the collapse icon on the sidenav results in e.velocity is not a function error. Similarly, u ...

javascripthtmlcssmaterialize

Tips for utilizing the Toggle Slider JS functionality

I'm attempting to change a value using a slider in HTML, here is my approach: html file : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script scr="./scripts.js" ...

javascripthtmlcheckbox

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...

javascriptjqueryhtml

Issue found: React-Redux action is not being dispatched

I'm currently working on setting up Google authentication in my React Next.js application. The process involves sending the access token to my backend, where it is validated before a new token is returned in the header for accessing protected resource ...

javascriptreactjsreduxnext.jsredux-thunk

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...

javascripthtmlcssvue.jsfigma

Leveraging the Google Feed API using jQuery's AJAX functionality

Currently, I am attempting to utilize Google's Feed API in order to load an RSS feed that returns a JSON string. (For more information, please refer to: https://developers.google.com/feed/). Despite this, my approach involves using jQuery's AJ ...

javascriptjqueryajaxgoogle-feed-api

Is there a way to alter the color of options within a select tag when hovering the mouse over them

After searching through multiple websites, I couldn't find a solution on how to change the option background color on hover from blue to green. The screenshot provided below illustrates what I am requesting for in a clearer manner. I attempted to use ...

javascripthtmljquerycss

Populating dropdown menu with data from redux state upon component mounting

I am new to working with react-redux and have successfully implemented dependent dropdown functionality in a react component (Country => State => City). My goal now is to dynamically update the dropdown values based on data received from the redux s ...

javascriptreactjsreduxreact-redux

Unable to retrieve API data on local server port 5000. Utilizing a database sourced from a CSV file. Unexpected undefined promise response

I have been struggling for the past few days with a persistent issue. Seeking assistance. Currently working on a project involving a CSV database and creating my own API. It is a small React App Fullstack MERN setup. The specific challenge I am facing is ...

javascriptnode.jsreactjsapiexpress

Angular.js hierarchical model issue: grandchildren functionality not functioning as expected

Currently, I am delving into the world of Angular and exploring its functionalities. My main goal is to construct a hierarchical data structure that can be easily manipulated using a hierarchical view: Root: - addChild - child 1: { remove, addChild, c ...

javascriptangularjsdata-bindinghierarchical-data

Ways to stop jQuery from stripping the <script> elements

Is there a way to stop jquery from removing my JS default behavior? function loadPageSuccess(data) { var data = $(data).find('#content'); alert($(data).html()); $("#content").html(data); $("#page").fadeTo(100,1); } function loadP ...

javascriptajaxjquery

Why does the Ajax POST method convert my "+" value to a string?

I am having trouble understanding why the "+" sign is converting to a space in Ajax post requests. Can someone please explain this phenomenon? ...

javascriptajax

Why isn't my Enum functioning properly to display the colored background?

Why isn't the Background Color showing up when I pass in the BGColor Prop dynamically in my next.js + Tailwind app? I have tried passing in the prop for my component, but the color is not appearing. <Title title='This is HOME' descripti ...

javascripttypescriptnext.jstailwind-css

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

The AJAX onreadystatechange function may not be consistently triggered

I have an issue with my AJAX call to retrieve XML data. It seems that the code does not enter the onreadystatechange function until the last iterations of my foreach loop. This delay is likely due to the time it takes for the calls to "www.webpage.com/" ...

javascriptajaxxmlreadystateonreadystatechange

Tips for Dynamically Binding Data in Angular ChartsWant to learn how to dynamically bind

I have integrated angular-charts directives into my application and everything works perfectly when initializing the data. However, I encountered an issue when reading the data from a JSON file and assigning it to the chart. The x-axis and y-axis are gener ...

javascriptjsonangularjschartsangularjs-controller

What could be causing the promises in Promise.all to remain in a pending state?

After restructuring my code to correctly utilize promises, I encountered a challenge with ensuring that the lastStep function can access both the HTML and URL of each page. To overcome this issue, I'm attempting to return an object in nextStep(). Alt ...

javascriptnode.jsweb-scrapingpromise

External JS file not executing function in AJAX response (only runs when function is directly included in AJAX response)

My issue involves an AJAX response not executing a simple jQuery function that is located in an external JS file. The function only runs when its code is directly placed within the AJAX response view. The page containing a link for dynamically loading AJA ...

javascriptjqueryajax

Tips on removing either the date or time when input type date and input type time share the same ng-model

In my Ionic app built with AngularJS, I have a form where the date and time are displayed separately but share the same data-ng-model: <input type="date" id ="actualVisitDate" data-ng-model="actualVisitDate" required> <input type="time" id ="actu ...

javascriptangularjsdatetimeionic-framework

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

javascriptjqueryhtmlcss