3

I learned that OpenLayer 2 has an OpenLayer.control.featurepopup control that allow one to add popups that show when you hover on a feature on the map and when you click on a feature. I am looking for a way to do that with OpenLayer 5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing Popups</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 700px;
        }
    </style>

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
Popop!!!!
<div id="map"></div>

<script>
    var style,feature, map,vLayer,vSource,fpControl;
    $(document).ready(function () {
        style = [
            new ol.style.Style({
                image: new ol.style.Icon(({
                    scale: .7, opacity: 1,
                    rotateWithView: false, anchor: [0.5, 1],
                    anchorXUnits: 'fraction', anchorYUnits: 'fraction',
                    src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
                })),
                zIndex: 5
            })
        ];

        feature = new ol.Feature({
            geometry: new ol.geom.Point(new ol.proj.fromLonLat([-0.890000,51.57889])),
            name: 'My Bus'
        });
        feature.setId(1007);
        feature.setStyle(style);

        // Create map
        vSource = new ol.source.Vector();
        vLayer = new ol.layer.Vector({
            source : vSource
        });
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vLayer
            ],
            view: new ol.View({
                center: new ol.proj.fromLonLat([-0.890000,51.57889]),
                zoom: 12,
                numZoomLevels: 18,
                maxResolution: 156543.0339,
            })
        });

        vSource.addFeature(feature);

        fpControl = new ol.Control.FeaturePopups({
            boxSelectionOptions: {},
            layers: [
               [
                    // Uses: Internationalized templates.
                    vLayer, {
                        templates: {
                            hover: '${.name}',
                            single: '${i18n("Name")}: ${.name}<br>',
                            item: '<li><a href="#" ${showPopup()}>${.name}</a></li>'
                        }
                    }
                ]
            ]
        });
        map.addControl(fpControl);
    });
</script>
</body>
</html>

i expect to see a tool-tip showing some properties off the feature like the 'name' and 'id' when i hover on the feature and a popup with the same info when i click on the feature.

3
  • Use an overlay. Either styled directly openlayers.org/en/v4.6.5/examples/popup.html or with a third party library such as openlayers.org/en/v4.6.5/examples/overlay.html
    – Mike
    Apr 18, 2019 at 12:09
  • @Mike The first is not a very useful example. It's about popups on a WMS layer, rather than how to make something popup when you select a WFS feature. I'm reasonably certain that the OP's original example is closer to what he needs than anything in that example. The second might be adaptable, but still doesn't seem very close.
    – Auspex
    May 15, 2019 at 12:37
  • 1
    @Auspex They are examples of two methods of how a popup can be displayed, and both display only the position clicked. One of the examples also has a static overlay postioned on Vienna, it's not WFS, and the WMS is simply a raster background like the OSM. Obviously whichever method is chosen it would need to be integrated with getting information from an underlying layer such as the info displayed bottom left of the map when moving over a country in openlayers.org/en/v4.6.5/examples/vector-layer.html
    – Mike
    May 15, 2019 at 13:23

1 Answer 1

7
    .popup {
        border-radius: 5px;
        border: 1px solid grey;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 2px;
    }
    <div id="map"></div>
    <div #popup class="popup" [hidden]="true"></div>
    this.popupOverlay = new Overlay({
        element: this.popup.nativeElement,
        offset: [9, 9]
    });
    this.map.addOverlay(this.popupOverlay);

    this.map.on('pointermove', (event) => {
        let features = [];
        this.map.forEachFeatureAtPixel(event.pixel,
            (feature, layer) => {
                features = feature.get('features');
                const valuesToShow = [];
                if (features && features.length > 0) {
                    features.forEach( clusterFeature => {
                        valuesToShow.push(clusterFeature.get('VALUE_TO_SHOW'));
                    });
                    this.popup.nativeElement.innerHTML = valuesToShow.join(', ');
                    this.popup.nativeElement.hidden = false;
                    this.popupOverlay.setPosition(event.coordinate);
                }
            },
            { layerFilter: (layer) => {
                return (layer.type === new VectorLayer().type) ? true : false;
            }, hitTolerance: 6 }
        );
        if (!features || features.length === 0) {
            this.popup.nativeElement.innerHTML = '';
            this.popup.nativeElement.hidden = true;
        }
    });

Obi, I had the same problem for the popup on hover over feature. I used OpenLayers 5 and Angular 6.

And I managed to solve it by creating a <div> popup element and referencing this element in an Overlay.

Added the overlay to the map object and define a pointermove event on the map. Within the pointermove event I reference the map and use the forEachFeatureAtPixel method.

The base layer for the on hover functionality was for me a ClusterSource, so multiple point features were grouped under one feature.

References:

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.