0

I am slowly getting to grips with OpenLayers v4.6.5 - I have pop-ups which pop-up - but now I'm attempting to get information into the pop-ups.

Here is the code I am using - I have vector items on my map - a mixture of GeoJSON, from local files, and points from coordinates in the code.

I can open the pop-ups, but all I get is 'undefined.'

//Popup on Pointermove

map.on('pointermove', function (event) {

    let layer;
    const feature = map.forEachFeatureAtPixel(
      event.pixel,
      function (feature) {
        return feature;
      },
      { 
        layerFilter: function (name) {
          layer = name;
          return true;
        }
      }
    );
    
    if (feature) {  
        var coordinate = event.coordinate;
        var name1 = feature.get('name');
        var desk1 = feature.get('description');
        
        // text written inside the popup
        content.innerHTML = '<b>'+name1+'<br>'+desk1+'</b>';
        overlay.setPosition(coordinate);
    }

})
2
  • Are you sure your GeoJSON features have properties name and description? And that you have set those properties for your point features you create in your code?
    – TomazicM
    Commented Mar 28, 2023 at 12:01
  • Here is the code from one of GeoJSON files: { "type": "FeatureCollection", "name": "Points", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "Name": "Parking Spot", "description": "This is where I like to park my car", "timestamp": null, "begin": null, "end": null, "altitudeMode": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "Point", "coordinates": [ 176.99322, -37.952508 ] } } ] } Commented Mar 28, 2023 at 21:44

1 Answer 1

0

I didn't have 'name' and 'description' for the points I had added to the script, so I added in the code for 'name and 'description':

const Whakatane = new ol.Feature({
geometry: new ol.geom.Point (
    ol.proj.fromLonLat([176.9822,-37.9585])),
    name: 'Whakatane',
    description: 'Largest Town'
});

I didn't do anything to the the other features, but suddenly the pop-up code is working for all features.

I did notice that having two features in the same pixel causes only one set of information to appear - I'm wondering if the 'undefined' pop-ups were obscuring the others.

There is case sensitivity between 'Name' and 'name' - so some 'or' code is required.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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