HTML not recognizing js functions - OpenLayers

Question

Im new at OpenLayers and Im trying to understand why my html seems to ignore any javascript function I create. When I create a function in the javascript doc it does works with the map, but when I create a button for that function in HTML it doesnt work. Im in production mode so the openlayers api is running with node.js. Here is my html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mapa prueba01</title>
    <style>
    #map {
        width: 1000px;
        height: 800px;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <p id="demo">párrafo</p>
    <script src="./index.js"></script>
    <input type="button" id="boton" value="boton capa" onclick="funcionCapa()"/>
    
  </body>
</html>

And here is my javascript:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {ScaleLine, defaults as defaultControls} from 'ol/control';
import TileSource from 'ol/source/Tile';
import TileWMS from 'ol/source/TileWMS';


var capa1 = new TileLayer({
                source: new TileWMS({
                    url: 'http://localhost:8080/geoserver/wms',
                    params: { 'LAYERS': 'earth:d39B19R', 'TILED': true },
                    serverType: 'geoserver',
                })
});

var capa2 = new TileLayer({
                source: new TileWMS({
                    url: 'http://localhost:8080/geoserver/wms',
                    params: { 'LAYERS': 'earth:wrf49BR', 'TILED': true },
                    serverType: 'geoserver',
                })
});


var map = new Map({

  target: 'map',
  controls: defaultControls().extend( [
    new ScaleLine()
]),

  layers: [
  
    new TileLayer({
      source: new OSM()
    }),
    
    capa1,
    capa2
    
  ],
  
  view: new View({
    center: [-413106.304,4923069.399],
    zoom: 5
  })
});


function funcionCapa(){
    capa1.setVisible(false);    
};

Thank you everybody

Are you getting javascript errors in the browser console? Can you provide a [mcve] that demonstrates your issue, preferably a [StackSnippet](https://meta.stackoverflow.com/tags/stack-snippets/info) — geocodezip, Sep 28 '20 at 21:33

mrd210 · Answer 1 · 2020-09-28T12:22:33.517

1

<script> tags are used just before the body tag ends, reason being after all the html elements are compiled than <script> tag loads and executes the js implementations on the html elements.

Place the below line above the ending <body> tag.

<script src="./index.js"></script>

So that funcionCapa() can be executed.

edited Sep 28 '20 at 12:22

answered Sep 28 '20 at 12:12

mrd210

21
3

score 0 · Answer 2 · answered Sep 29 '20 at 08:53

0

Seems like the only way to fix it is to create the function in the javascript doc and giving that function a style in the CSS, as explained in this example: https://openlayers.org/en/latest/examples/custom-controls.html

Thank you guys

answered Sep 29 '20 at 08:53

JTravol

1
1

score 0 · Answer 3 · answered Sep 30 '20 at 12:10

When you try to call a function using an event attribute on a DOM element (onclick in your case), the function should be global. You probably use a bundler like parcel or webpack for your application, which transforms your code and creates a JavaScript module. All the functions and the variables you declare become local, unless you explicitly declare them with the window object .

window.funcionCapa = function() { 
   capa1.setVisible(false); 
}

And then call them this way:

<input type="button" id="boton" value="boton capa" onclick="window.funcionCapa()"/>

In your case you probably get the error "funcionCapa is not defined", because the funcionCapa is a local function, which you cannot access from the event attribute onclick.

You should better avoid using an event attribute on a DOM element at all, but bind the event using JavaScript.

HTML not recognizing js functions - OpenLayers

3 Answers3