1

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);
0

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.

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.