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

Selenium - Activating a flash button

Currently, I am facing an issue while trying to load a URL using Selenium on Mozilla browser. The webpage contains a 'Login' button created in flash that I need to click on. I have explored the following resources: 1.How to click an element in Se ...

javascriptjavaflashselenium

Pytest is not able to locate any elements on the webpage, yet the same elements can be easily found using the console

When using CSS or XPath in the console (F12), I am able to locate the element on the page. $$("span.menu-item[data-vars-category-name='Most Popular']") However, when trying to find the same elements with Selenium (pytest) using: driver.find_el ...

javascripthtmlpython-3.xseleniumpytest

I'm having trouble with my AJAX Update Panel. Can someone please help me figure out what I'm doing wrong?

--------------Handling Gridviews DataBound Event ----------------- protected void grdShowCallingList_DataBound(object sender, EventArgs e) { if (grdShowCallingList.Rows.Count > 0) { foreach (GridViewRow row in grdShowCallingList.Rows) ...

javascriptasp.netajaxgridviewupdatepanel

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

javascripthtmlangularjs

Is it feasible to maintain a variable as a reference across views while utilizing ng-view?

I am facing a unique challenge: I have a webpage with two tabs that need to utilize ng-view from AngularJS. The twist is that both tabs must share the same variable, similar to referencing a variable in C# using the "ref" keyword. If you want to see an ex ...

javascriptangularjsng-view

The removeAttribute function has the ability to remove the "disabled" attribute, but it does not have the capability to remove

When it comes to my JavaScript code, I have encountered an issue with two specific lines: document.getElementsByName('group')[0].removeAttribute('disabled'); document.getElementsByName('group')[0].removeAttribute('checke ...

javascripthtml

Having trouble incorporating a variable into a jQuery selector

Trying to crack this puzzle has been an ongoing battle for me. I seem to be missing something crucial but just can't pinpoint what. I recently discovered that using a variable in the jQuery selector can make a significant difference, like so: var na ...

javascriptjqueryselectorlightbox

"Mastering the art of displaying real-time data on a thermometer using D3.js

Welcome to the sample code for a thermometer created using D3.js. You can view the code on jsfiddle. I've developed a web page displaying a dynamic thermometer with values updating every second. Here's the function: setInterval(function(){ getN ...

javascriptjqueryspringjspd3.js

Using Asynchronous JavaScript and XML (AJAX) to make calls to a web service

My program is showing an internal server error var parameters = "<?xml version='1.0' encoding='utf-8'?>" + "<soap:envelope xmlns:xsi='ttp://www.w3.org/2001/xmlschema-instance' xmlns:xsd='http://www.w3. ...

javascriptasp.netjsonajaxsoap

JavaScript having trouble parsing JSON, despite Chrome console being able to parse it flawlessly

I've hit a roadblock while attempting to retrieve coordinates from a database for the Google Maps API in order to create a polygon. First, I fetch my data from the database using Laravel Framework: MapController - public function getallmapcoords(re ...

javascriptphpjsonlaravel

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

I am working with JSON data that looks like this: [ { "taxonomy_slug": "product_cat", "taxonomy_name": "Categories", "frontend_slug": "product-category" }, { ...

javascriptreactjsnext.js

Using JavaScript variables within an @if statement in Laravel within the innerHTML segment

How can I incorporate a JavaScript variable 'x' into an @if statement in Laravel? I have tried placing it both inside and outside of the @if statement. When placed outside, it works perfectly fine, but I really need to perform an action based on ...

javascriptphplaravel

Integrating JQuery with Sencha Touch: A Comprehensive Guide

Can you show me how to use JQuery with Sencha Touch? I have a Sencha button but when I click on it, nothing happens. I've checked that JQuery is working. xtype: 'button', text: 'Get result', docked: 'bottom', id: 'm ...

javascriptjquerysencha-touch

Troubleshooting issue: PHP INSERT Prepared statement not working when using AJAX

Currently, I am trying to construct an INSERT statement using AJAX along with a prepared statement in PDO. This is my first attempt at combining AJAX and PDO, so there might be mistakes due to lack of experience. In its current state, I keep encountering ...

javascriptphpjqueryajaxpdo

Populate a Dropdown Menu with Directory Content for User Selection of d3.js JSON Data

I have a d3 forced-directed graph that is currently using a static JSON file for data: d3.json("../Data/sample.json", function(error, graph) { //do stuff }); However, I would like to give the user the ability to select the data file from a drop-down ...

javascriptphphtmljsond3.js

Using AngularJS Typeahead with restrictions on $http requests

I have been attempting to restrict the number of results displayed by Angular Bootstrap Typeahead during Async calls, but unfortunately, it does not seem to be functioning as expected. <input type="text" ng-model="asyncSelected" placeholder="Locations ...

javascriptangularjstypeaheadangularjs-bootstrap

Verifying Angular (2+?) Compatibility: Opening and Closing Material mat-menu on Hover [GUIDE]

After extensive research, I tried various methods to hover a material menu to display its options. However, the solutions I came across were either too complicated or ineffective. Therefore, I decided to develop my own solution by combining elements of e ...

javascriptangularangular-materialangular8

Utilizing Bootstrap Modal to Display PHP Data Dynamically

Modals always pose a challenge for me, especially when I'm trying to work with someone else's code that has a unique take on modals that I really appreciate (if only I can make it function correctly). The issue arises when the modal is supposed ...

javascriptphptwitter-bootstrapbootstrap-modal

The position of the carousel items changes unpredictably

My jQuery carousel consists of 6 individual items scrolling horizontally. Although the scroll function is working correctly, I have noticed that 2 of the items are randomly changing their vertical position by approximately 15 pixels. Upon reviewing the HT ...

javascriptjqueryhtmlcsscarousel

Incorrect Request Method for WCF json POST Request Leads to 405 Error (Method Not Allowed)

Hey there, I'm facing an issue with using Microsoft Visual Studio to create a WCF web service. Everything runs smoothly within Visual Studio, but when I try to connect to the service from outside, it fails to establish a connection. At first, I encoun ...

c#javascriptajaxjsonwcf