Openlayers: How do I identify Points with onClick?

Question

In my openlayers map there is a list of Points, which is processed to a list of icons and then is correctly displayed on the map.

var markers = [icon1, icon2, icon3]
var vectorSource = new ol.source.Vector({
features:markers});
var stationLayer = new ol.layer.Vector({
source:vectorSource});
map.addLayer(stationLayer);

In a next step I want to make these Points at the Map clickable. When the point is clicked a table outside the map should show further information on the chosen point. The different Points are defined through their position in the array.

After reading several examples I tried this:

map.on('click',function(event){
var coord = event.coordinate;
console.log(coord)
var source = stationLayer.getSource();
var feature = source.getClosestFeaturetoCoordinate(coord);
});

The click-event is triggered properly, the right Coordinates are shown on the console. There is also a feature stored, but i can't tell if it's a point and if it's the right one.

Is there any way I can get the index in markers from the clicked point?

If you declared it as Feature (`new Feature()`), you can check its name for example.. — Mosh Feu, Sep 25 '19 at 12:39
you can also (slightly) change the style of the clicked feature, which is also good practice from an UX point of view, so that the user can also be 100% sure which point was clicked — Rob, Sep 25 '19 at 12:50
Thanks Rob, this solved my problem! A change of the icon is already implemented and working (slightly bigger icon in another color) so i didn't mention that ;) — SurveyingSurveyor, Sep 25 '19 at 13:03

score 0 · Answer 1 · answered Sep 26 '19 at 11:13

Try with getFeaturesAtCoordinate It will get all features whose geometry intersects with the provided coordinate.

....
 let features = vectorSource.getFeaturesAtCoordinate(event.coordinate);
        if (features.length > 0) {
          let data = features[0];
          console.log(data.get("NameOfProperty1"));
          console.log(data.get("NameOfProperty2"));
     });
....

More about here: https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html#getFeaturesAtCoordinate

Openlayers: How do I identify Points with onClick?

1 Answers1