1

I want to use the GpPluginOl3.js plugin (from the french geoportail see on gitHub (description in french)) together with popups, but I cannot use them together.

The drawing tools allow me to draw points, lines, polygons and even to edit them, but I cannot change the style, edit text or delete features. When I'm removing the popups, everything works fine. It seems as if my code is interacting in a strange way with the code of the drawing tools. I've observed the following three cases:

  1. clicking on feature => shows popup with correct values of my placeholders
  2. clicking on new drawn polygon => nothing happens when trying to change style, edit text or delete this polygon
  3. clicking on a new drawn polygon, that overlaps with an existing feature => popup shows up, but placeholders don't get replaced with values AND the popup for styling, editing shows up and new drawn polygons can even be deleted.

Here the code I use for my popups:

    var popup = new ol.Overlay.Popup();
    map.addOverlay(popup);

map.on('click', function(evt) {
    var popupContent = map.forEachLayerAtPixel(evt.pixel,
        function(layer) {     
            return layer.get('content'); // template-string of layer
        });

    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            return feature; // get feature at pixel on layer 
        });

    if (feature) {
        popup.setPosition(evt.coordinate);
        var atts = feature.getProperties(); // object
        for (var prop in atts) {
            var re = new RegExp("{" + prop + "}", "g");
            popupContent = popupContent.replace(re, atts[prop]); // replace {placeholder} with values of feature
        }
        popup.show(evt.coordinate,popupContent);
    }        
    else {
        popup.hide();
    }
});

In the console I get the following security error:

SecurityError: The operation is insecure. ol-debug.js:69965 ol.renderer.canvas.IntermediateCanvas.prototype.forEachLayerAtCoordinate https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:69965:21 ol.renderer.canvas.Map.prototype.forEachLayerAtPixel https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:23693:16 ol.Map.prototype.forEachLayerAtPixel https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:32543:10 init/< https://example.com/js/map.js:797:28 boundListener https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7208:12 ol.events.EventTarget.prototype.dispatchEvent https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7628:11 ol.Map.prototype.handleMapBrowserEvent https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:32860:7 boundListener https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7208:12 ol.events.EventTarget.prototype.dispatchEvent https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7628:11 ol.MapBrowserEventHandler.prototype.emulateClick_ https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:12866:3 ol.MapBrowserEventHandler.prototype.handlePointerUp_ https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:12920:5 boundListener https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7208:12 ol.events.EventTarget.prototype.dispatchEvent https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7628:11 ol.pointer.PointerEventHandler.prototype.fireEvent https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:12668:3 ol.pointer.PointerEventHandler.prototype.up https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:12546:3 ol.pointer.MouseSource.prototype.mouseup https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:11192:7 <anonym> self-hosted:943:17 ol.pointer.PointerEventHandler.prototype.eventHandler_ https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:12468:5 boundListener https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol-debug.js:7208:12

Maybe someone has an idea where the problem could lie? or where i should impove my code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.