Menu
I have a problem, the toggle check box won't work and the the console appears as follows. code:
<!doctype html>
<head>
<title> Me OpenStreetMap </title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" />
</head>
<body>
<div id="map"></div>
<input type="checkbox" id="visible" checked />Toggle layer Visibility
<script src="../assets/ol3/js/ol.js"></script>
<script>
var center = new ol.proj.transform([11.57,3.86], 'EPSG:4326','EPSG:3857');
var view = new ol.View({
zoom: 6,
center: center
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: [layer],
view: view
});
// bind a checkbox with id 'visible' to a layer's visibility
var visible = new ol.dom.Input(document.getElementById('visible')); /* line 30 */
visible.bindTo('checked', layer, 'visible');
</script>
</body>
</html>
The map appears, but check box does not respond, and the console log says:
Uncaught TypeError: Cannot read property 'Input' of undefined
(anonymous function) @ events.html:30
I went through this but still I do not get it OpenLayers - Uncaught TypeError: Cannot read property 'div' of undefined
888
asked Apr 08 '26 15:04
If you want to use this function make sure that your library is in a version below 3.5.0, because ol.dom.Input has been removed in version 3.5.0: https://github.com/openlayers/ol3/releases/tag/v3.5.0
The experimental ol.dom.Input component has been removed. If you need to synchronize the state of a dom Input element with an ol.Object, this can be accomplished using listeners for change events. For example, you might bind the state of a checkbox type input with a layer's visibility like this:
var layer = new ol.layer.Tile(); var checkbox = document.querySelector('#checkbox'); checkbox.addEventListener('change', function() { var checked = this.checked; if (checked !== layer.getVisible()) { layer.setVisible(checked); } }); layer.on('change:visible', function() { var visible = this.getVisible(); if (visible !== checkbox.checked) { checkbox.checked = visible; } });
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
