Openlayers: How to select which style of popover should be used depending on the feature?

Question

I am pretty new to OpenLayers, so please forgive me if this question seems pretty basic.

What I want: A map which displays a number of markers representing buildings. There can be two different kind of markers depending on the type of the building. The user can click on them. When clicked, a popover appears on top of the marker and displays informations on that building. The trick is that the style of the popover and the informations displayed depend on the marker's type.

Where I am : To achieve that, I created two different ol.layer.Vector containing several ol.Feature each. I then created two ol.Overlay corresponding to the two different kind of buildings, and an ol.interaction.Select. The markers appear correctly on the map.

The problem I am facing : I don't know how to select which popover style should be used depending on the feature clicked. I tried to create two ol.interaction.Select instead of just one, but only the last one was actually used.

The code :

var elementFiche = document.getElementById('popup_fiche');
var elementMap = document.getElementById('popup_map');

//Overlay for the first kind of building
var overlay = new ol.Overlay({
    element: elementFiche,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -50]
});
map.addOverlay(overlay);

//Overlay for the second kind of building
var overlayMap = new ol.Overlay({
    element: elementMap,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [-2, -10]
});
map.addOverlay(overlayMap);

var selectInteraction = new ol.interaction.Select({
    layers: [vectorLayer,vectorLayerMap],  
});
map.addInteraction(selectInteraction);

selectInteraction.getFeatures().on('add',function(e)
{
//re-position the overlay
    var feature = e.element;
    var point = feature.getGeometry();
    var coords = point.getCoordinates();

    //THIS IS WHERE I SHOULD SELECT THE OVERLAY
    //The following is an example for the first overlay. 
    overlay.setPosition(coords);

    //recreate the popover for the overlay
    var element = overlay.getElement();
    $(element).popover('destroy');
    $(element).popover({
      placement: 'top',
      animation: false,
      template: '<div class="popover" style="height: 150px; width: 500px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><a href="#" id="popup-closer" class="ol-popup-closer"></a><div class="popover-content"><p></p></div></div></div>',
      html: true,
      content: '<h4> <strong>'+feature.get('name')+'</strong><br> </h4>'+'<strong> Adresse : </strong>'+feature.get('adresse') + '<br>' +'<strong> Surface : </strong>'+feature.get('surface')+ '<br>' + '<strong> Année de construction : </strong>'+feature.get('dateConstruction')
    });
    $(element).popover('show');
  });

selectInteraction.getFeatures().on('remove', function(e){
    //destroy the popover
    $(overlay.getElement()).popover('destroy');
});  

I didn't include the rest of the code because I don't think it is necessary to understand my problem, but please ask for it if you need it! Any help would be greatly appreciated.

Thanks!

Answer 1

I found a workaround :) I just added a "property" (that I called type) to each feature to differentiate them:

var iconFeature = new ol.Feature({
      geometry: new  
        ol.geom.Point(ol.proj.transform({{map.adresseGps}}, 'EPSG:4326',   'EPSG:3857')),
      libelle: "{{map.libelle}}",
      type: "mapping",
});

I then just had to compare the type of the feature:

  selectInteraction.getFeatures().on('add',function(e)
{
//re-position the overlay
var feature = e.element;
var point = feature.getGeometry();
var coords = point.getCoordinates();

var type = feature.get('type');

if(type == "ficheSite")
{
  overlayFiche.setPosition(coords);

  //recreate the popover for the overlay
  var element = overlayFiche.getElement();
  $(element).popover('destroy');
  $(element).popover({
    placement: 'top',
    animation: false,
    template: '<div class="popover" style="height: 150px; width: 500px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><a href="#" id="popup-closer" class="ol-popup-closer"></a><div class="popover-content"><p></p></div></div></div>',
    html: true,
    content: '<h4> <strong>'+feature.get('name')+'</strong><br> </h4>'+'<strong> Adresse : </strong>'+feature.get('adresse') + '<br>' +'<strong> Surface : </strong>'+feature.get('surface')+ '<br>' + '<strong> Année de construction : </strong>'+feature.get('dateConstruction')
  });

  $(element).popover('show');

}

else
{
  var size = feature.get('features').length;
  if(size == 1 )
  {
    var feature = feature.get('features')[0];
    overlayMap.setPosition(coords);

      //recreate the popover for the overlay
    var element = overlayMap.getElement();
    $(element).popover('destroy');
    $(element).popover({
      placement: 'top',
      animation: false,
      template: '<div class="popover" style="height: 100px; width: 500px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><a href="#" id="popup-closer" class="ol-popup-closer"></a><div class="popover-content"><p></p></div></div></div>',
      html: true,
      'content': '<h4> <strong> Instrument de Mesure </strong><br> </h4>'+'<strong> Libelle : </strong>'+feature.get('libelle')
    });
    $(element).popover('show');
  }

}
});