[GIS] Error with popup overlay in OpenLayers 3

javascriptopenlayers

In OpenLayers (OL) 3.15.0 I declare a popup contains like :

popup = $(eval('<div id="popup"><p>My contain</p></div>'));

And after, I declare my overly with this popup element :

var overlay_popup = new ol.Overlay({
                        element: popup
                    });

On OL 3.7.0 I've any problem all was okay.

But now with this new version of OL (3.15.0) Firebug say :

TypeError: Argument 1 of Node.appendChild does not implement interface
Node.

What can I do for working ?

Best Answer

You must declare this : element: popup[0]

Related Solutions

[GIS] Using OpenLayers 3 with feature overlay

The feature from the Feature Overlay is always returned. To filter out the filterOverlay just test if the layer parameter is defined. Like this:

var stateFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
  // If layer is undefined, that means it's a feature from a FeatureOverlay
  if (layer) {
    return feature;
  }
}, null, function (layer) {
  return layer === statesLayer;
});

[GIS] Popup filter with OpenLayers3

First, if you are using the latest Openlayers version -- 3.5.0, you have to adapt your code to the new changes.

Specifically:

var source = new ol.source.GeoJSON({
  url: 'features.json',
  projection: 'EPSG:3857'
});

To:

var source = new ol.source.Vector({
  url: 'features.json',
  format: new ol.format.GeoJSON()
});

The "selectable part" you can do something like this (online):

map.on('click', function(evt) {
    var f = map.forEachFeatureAtPixel(
        evt.pixel,
        function(ft, layer){return ft;}
    );
    if (f && f.get('type') == 'click') {
        var geometry = f.getGeometry();
        var coord = geometry.getCoordinates();

        var content = '<p>'+f.get('desc')+'</p>';

        popup.show(coord, content);

    } else { popup.hide(); }

});
map.on('pointermove', function(e) {
    if (e.dragging) { popup.hide(); return; }

    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);

    map.getTarget().style.cursor = hit ? 'pointer' : '';
});

Best Answer

Related Solutions

[GIS] Using OpenLayers 3 with feature overlay

[GIS] Popup filter with OpenLayers3

Related Question