3

I have a map with a base layer and a geojson cluster layer. I want to be able to click an individual feature on the map and have the contents of the properties be displayed in a popup. I currently have just the position working in the popup but I would like to get information like the name of the feature and various other things. This is my code that gets me a location popup:

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

var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
  function(feature, layer) {
    return feature;
  });
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
coord = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
$(element).popover({
  'placement': 'top',
  'html': true,
  'content': ('<p>Location:</p>'+coord)
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});

This works fine but I would like to get the other properties. I have tried feature.get('property here') instead of feature.getGeometry(); and geometry.getCoordinates(); but that made it so the popup never appeared and the only thing I was getting in firebug was an error in the ol.js b.slice() is not a function. So basically my question is: Is there a clear cut way to display all GeoJSON properties of a feature in a popup? I got my popup using the null island example here

And here is an example JSON feature:

 {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[0.13138000,49.475577]},"properties":{"name":"227006760","speed":"55","Nav_Status":"5"}}]}
2

You can get -- feature.get('any') -- any geojson property and show in the popup. Take a look at this demo.

You mixed up some points. So, first, get the coordinate to position the popup:

var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();

Note, there is no coordinate transformation.

Second, prepare the popup content:

var content = '<h3>' + feature.get('property here') + '</h3>';
content += '<h5>' + feature.get('other property') + '</h5>';

And finally, show it. Right?

  • That worked perfectly thank you very much but now (and I know follow up questions aren't usually liked around here) I implemented a cluster layer and it has made all of this essentially null as the only thing that will work is feature.getGeometry(); and that just returns object Object which is what I expected. Now, I'm not expecting any info for the actual clusters but how would I get the info from a single point even though technically that point is part of a cluster array(like if you zoomed to one single point)? – trevinator Jul 1 '15 at 20:12
-1

try it

var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
var type = geometry.getType();

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • Welcome to GIS SE! As a new user please take the tour to learn about our focused Q&A format. A good answer should include how and where to use the suggested solution. Please edit your answer to explain how to use your code, and what it does to solve the problem. – Midavalo May 31 '17 at 2:43

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.