Openlayers 3: Getting data from multiple features

Question

I took the example from the docs and added another feature. On clicking the feature data will be displayed in a popup. I add another feature with different data. If I click the features in series it'll show the data from the first feature I clicked. If I click a feature, click somewhere else and then the other feature: It works like expected.

I've created a jsfiddle showing this problem. (In my firefox the map will only show if I click on the 'shield' icon in the top-left corner of the address bar and select 'Disable Protection on This Page'. See this question)

Seems like the correct feature is not taken using this example code:

// 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);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'content': feature.get('name')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

My goal is to click on the features directly one by one and get the correct data displayed.

EDIT: Seems like it's not a problem of OpenLayers but of the popover. When I insert:

console.log(feature.get('name'));

It'll come up with the correct data.

pavlos · Accepted Answer · 2016-06-24T08:52:26.873

1

You add two points next to each other. So close to each other so you can not disnguish them visually. Change your features declaration to this:

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0]),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});

var iconFeature2 = new ol.Feature({
  geometry: new ol.geom.Point([100000, 100000]),//here is the change
  name: 'Null Null Island',
  population: 200,
  rainfall: 100
});

Also note that the default projection of your map is EPSG:3857. The coordinates you are trying to pass seems to be on 4326.

You also declare iconStyle twice which doesnt make any difference, just for the sake of correctness

UPDATE

Your main problem comes from bootsrap popover. To overcome the issue you need to do a bit of dirty job and update the content on each click dinamically. Use this piece of code to achive it

  $(element).data("bs.popover").options.content= feature.get('name');
  $(element).popover("show");

and a fiddle here

edited Jun 24 '16 at 08:52

answered Jun 24 '16 at 08:03

pavlos

3,001
18
23

The jsfiddle was not saved correctly. I've updated the link a few minutes ago when I realized the problem. – Fabian Jun 24 '16 at 08:06
Ok now it is more clear. remove the `s` from your https to get the mapbox tiles. http://jsfiddle.net/zzojm1va/ . I am checking your problem. If I come up with something I ll let you know – pavlos Jun 24 '16 at 08:10
Ok I have updated my answer to deal with your main problem. – pavlos Jun 24 '16 at 08:53
I came up with the root of the problem at the very same time :D But thx for the solution. I didn't know how to update the popover correctly. This helped a lot! – Fabian Jun 24 '16 at 08:56

Openlayers 3: Getting data from multiple features

1 Answers1