Skip to main content
Geographic Information Systems

Return to Question

corrected spelling, fixed grammar, improved formatting.
Source Link
whyzar
whyzar
  • 12.1k
  • 23
  • 39
  • 72

I wan'twant to define individual popuppop up templates for different vectorlayersvector layers in Openlayers 3.

I wan't to define individual popup templates for different vectorlayers in Openlayers 3.

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

found solution eval(string)
Source Link
geom
geom
  • 1.3k
  • 2
  • 16
  • 28

Here the solution I've found right now:

var content = eval(popupcontent);

Here the solution I've found right now:

var content = eval(popupcontent);
Source Link
geom
geom
  • 1.3k
  • 2
  • 16
  • 28

Layer specific popup template in openLayers 3

I wan't to define individual popup templates for different vectorlayers 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?