CODEWITHSUNDEEP
twitter-bootstrap-3openlayers
Leon
Leon

Reputation: 67

How to use popover with links in openlayers

I want to display a map with markers. When I click on a marker, I want to display a popup. In the popup there should also be a link to an external website.
This all works fine so far.
But when I click on the first marker (-> the popup is displayed) and directly afterwards on the second marker, then a popup is displayed only shortly on the second marker and then disappears!
I think it has something to do with the "animation" setting of the popover. But when I set "animation: false", then I can not use the links anymore (I can click on them, but they do not open the requested website).

Here comes my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Popup</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="map" class="map"></div>
        <div id="popup"></div>

        <script>
            var place_0 = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([1.1, 50])),
                name: 'placename 1<br><a target="_blank" href="http://www.fairtragen.de">link1</a>'
            });

            var place_1 = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([1.2, 50])),
                name: 'placename 2<br><a target="_blank" href="http://www.fairtragen.de">link2</a>'
            });

            var vectorSource = new ol.source.Vector({
                features: [place_0, place_1]
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });

            var rasterLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            var map = new ol.Map({
                layers: [rasterLayer, vectorLayer],
                target: document.getElementById('map'),
                view: new ol.View({
                    center: ol.proj.fromLonLat([1.1, 50]),
                    zoom: 10
                })
            });


            var element = document.getElementById('popup');

            var popup = new ol.Overlay({
                element: element,
                stopEvent: false
            });
            map.addOverlay(popup);


            // display popup on click
            map.on('click', function (evt) {
                $(element).popover('destroy');

                var feature = map.forEachFeatureAtPixel(evt.pixel,
                        function (feature) {
                            return feature;
                        });

                if (feature) {
                    var iname = feature.get('name');
                    var coordinates = feature.getGeometry().getCoordinates();
                    popup.setPosition(coordinates);

                    $(element).popover({
                        'animation': true,
                        'html': true,
                        //'delay': 1000,
                        'content': iname
                    });
                    $(element).popover('show');
                } else {
                    $(element).popover('destroy');
                }
            });

        </script>
    </body>
</html>

Upvotes: 0

Views: 2163

Answers (1)

Chase Choi
Chase Choi

Reputation: 1012

the problem is click event works for the overlay and map together. events pass through every element on the map with Openlayers. You can prevent this with stopEvent option on Overlay.

https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html

var popup = new ol.Overlay({
  element: element,
  stopEvent: true
});

Upvotes: 2

Related Questions