[GIS] Toggle doesn’t work in OpenLayers 3 (using bind to)

openlayers

My code says the error "undefined input"? I don't know what is wrong with my code:

<!doctype html> <html> <head> <title>Map Examples</title> <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" /> <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" /> </head> <body> <div id="map" class="map"></div> <input type="checkbox" id="visible" checked> Toggle Layer Visibility <script src="../assets/ol3/js/ol.js"></script> <script> var layer = new ol.layer.Tile({ source: new ol.source.OSM() }); var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View({ center: london, zoom: 6 }); var map = new ol.Map({ target: 'map', layers: [layer], view: view }); // create a DOM Input helper for the checkbox var visible = new ol.dom.Input(document.getElementById('visible')); // and bind its 'checked' property to the layer's 'visible' property visible.bindTo('checked', layer, 'visible'); </script> </body> </html>

Best Answer

The bindTo method was removed from ol.Object in version 3.6.x. See https://github.com/openlayers/ol3/pull/3472 for further details.

You can use the layer group example to see how to bind inputs in a more generic way. This example uses jQuery to help.

Related Solutions

[GIS] OpenLayers 3 toggle feature visibility

I have been struggling with the same issue, but I seem to have come across a solution that works pretty well.

In the Docs there is no visibility style option for vector features. But you can set the opacity of an ol.style.Icon or the alpha of the fill and stroke for an ol.style.Circle and ol.style.RegularShape

How I got it to work was to set a style functions for my visible and invisible states. Here are a few options for points

//visible style
var visibleStyleIcon = {
     'Point': [new ol.style.Style({
         image: new ol.style.Icon({
             src : 'your_icon.png',
             opacity : 1
         })
     })]
 };

// invisible Style Icon Opacity
var invisibleStyleIcon = {
    'Point': [new ol.style.Style({
        image: new ol.style.Icon({
            src : 'your_icon.png', //still need something even if it's invisible
            opacity : 0
        })
    })]
};

// invisible Style Vector Alpha
var hiddenStyle = {
    'Point': [new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgba(0,0,0,0)'
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0,0,0,0)',
            })
        })
    })]
};

// invisible Style Shape No Points
var hiddenStyleRegularShape = {
    'Point': [new ol.style.Style({
        image: new ol.style.RegularShape({}) //a shape with no points is invisible
    })]
}

Then for the feature you want to hide/unhide just set the style for that feature

if (feature_should_be_visible){
    feature.setStyle(visibleStyleIcon[feature.getGeometry().getType()]);
} else {
    feature.setStyle(invisibleStyleIcon[feature.getGeometry().getType()]);
}

OpenLayers Overlay – How to Fix Overlay Doesn’t Work in OpenLayers

You will probably see some numbers but not styled as a popup. You have defined only

popupContainerElement = document.getElementById('popup-coordinates');

but you need both

popupContainerElement = document.getElementById('popup-container');
popupCoordinatesElement = document.getElementById('popup-coordinates');

then

popupContainerElement.innerHTML = clickedCoordinate;

should become

popupCoordinatesElement.innerHTML = clickedCoordinate;

You will also need some css for the popup.

Best Answer

Related Solutions

[GIS] OpenLayers 3 toggle feature visibility

OpenLayers Overlay – How to Fix Overlay Doesn’t Work in OpenLayers

Related Question