Layer specific popup template in openLayers 3

Question

I want to define individual pop up templates for different vector layers in Openlayers 3.

The layers are defined with the following options (that are passed to a constructor-function):

n2k_dh_l = new ol3Vector({
            map: map,
            title: "Natura 2000 Habitats Directive_ol3Vector",
            attribution: "<br />Réseau Natura 2000 Habitats Directive",
            geotable: "n2k_dh",
            fields: "gid as id,sitecode,sitename,surfha",
            where: "sitename ilike '%moselle%'",
            fill: "rgba(100,250,0,0.1)",
            stroke_color: "green",
            stroke_width: 2,
            minResolution: 0.01,
            maxResolution: 50,
            content: "'<p><strong> HD' + feature.get('sitecode') + '</strong><hr>' + feature.get('sitename') + '<br />' + feature.get('surfha') + ' ha </p>'"

});

To build the content of the popups I use the following code:

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature, layer) {
      return feature;
  });
      var popupcontent = map.forEachLayerAtPixel(evt.pixel,
    function (layer) {
      return layer.get('content');
  });

if (feature) {
  popup.setPosition(evt.coordinate);
  var content = popupcontent;
//  -- This code works, but is static
//var content = '<p><strong>' + feature.get('sitecode')+'</strong><hr>'+ feature.get('sitename') + '<br />' + feature.get('surfha') + ' ha </p>';
//      
  $(popup_div).attr( 'data-placement', 'auto' );
      $(popup_div).attr( 'data-content', content );
      $(popup_div).attr( 'data-html', true );  
  $(popup_div).popover();
  $(popup_div).popover('show');
} else {
  $(popup_div).popover('destroy');
}
});

My problem is that the content-string (from my layer options) is passed to the data-content of the popup_div, but the code is not evaluated (as in the outcommented version). It is passed as string.

I've tried to remove the " at the beginning and the end of the string with RegEx, but this didn't change anything.

var content = popupcontent.replace(/^"(.+(?="$))"$/, '$1');

How can I pass my popupcontent so that it gets evaluated?

Here the solution I've found right now:

var content = eval(popupcontent);

Answer 1

My code from above is working (with the eval-function), but I wanted to streamline my template-code a bit, so that it looks now like this:.

content: "<p><strong>{sitecode}</strong><hr>{sitename}<br />{surfha} ha </p>" 

This is a much handier code I would prefer to use. To evaluate this new string I had to change the code that replaces the properties with their values:

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature, layer) {
      return feature;
  });
  var popupContent = map.forEachLayerAtPixel(evt.pixel,
    function (layer) {
      return layer.get('content');
  });     
if (feature) {
  popup.setPosition(evt.coordinate);
 //---- new code to get the values of the features ------ 
  var atts = feature.getProperties();
      for (var prop in atts) {
            var re = new RegExp("{" + prop + "}", "g");
            var popupContent = popupContent.replace(re, atts[prop]);
      }

  $(popup_div).attr( 'data-placement', 'auto' );
      $(popup_div).attr( 'data-content', popupContent );
      $(popup_div).attr( 'data-html', true );  
  $(popup_div).popover();
  $(popup_div).popover('show');
} else {
  $(popup_div).popover('destroy');
}
});

With this code my problem is fixed.