0

I need to get popups showing for just a single feature layer (forest -- stored as a GeoJSON) as opposed to all in Openlayers. I currently have the below.

var map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        renderMode: 'image',
        style: forestStyle,
        source: new ol.source.Vector({
          url: '../data/forests.geojson',
          format: new ol.format.GeoJSON()
        })
      })
    ]
  });

How do I go about this, please?

PS: I am using Bootstrap 3 and could do with solutions built around it too.

EDIT (After Mike's response)

    {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              22.9629863189914,
              40.8240755346776
            ],
            [
              22.9692602042389,
              40.8166598348136
            ],
            [
              22.9690134736772,
              40.8169316800029
            ],
            [
              22.9687847485475,
              40.81713616158
            ],
            [
              22.9682455495031,
              40.8176072482245
            ],
            [
              22.9679709332253,
              40.81774367484
            ],
            [
              22.9673630702601,
              40.8179212679431
            ],
            [
              22.967084992837,
              40.8182602865605
            ],
            [
              22.9667116917971,
              40.8188278348423
            ],
            [
              22.9664306019971,
              40.8193063705868
            ],
            [
              22.9663027287322,
              40.8196696271834
            ],
            [
              22.9661765887141,
              40.8199428509784
            ],
            [
              22.9648132221368,
              40.8217371937712
            ],
            [
              22.9632330867235,
              40.8238037050033
            ],
            [
              22.9629863189914,
              40.8240755346776
            ]
          ]
        ]
      },
      "properties": {
        "FID": 1,
        "OBJECTID": 119,
        "ID": "GR-4291",
        "Code_12": "131",
        "Remark": " ",
        "Area_ha": 95.6086248776,
        "Shape_Leng": 6533.9468799,
        "code00": 13,
        "Shape_Le_1": 6533.9468799,
        "Shape_Area": 956086.248776,
      }
    }    
  ]
}

`

// Above is the JSON

var forest = new ol.layer.Vector({
    renderMode: 'image',
    style: forestStyle,
    source: new ol.source.Vector({
      url: '../data/forests.geojson',
      format: new ol.format.GeoJSON()
    })
  })

var element = document.getElementById('popup');

  var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -50]
  });

  map.addOverlay(popup);

  map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      },
      { layerFilter: function(candidate) { 
        return (candidate === forest)
      }
    });

    if (feature) {
      var coordinates = feature.getGeometry().getCoordinates();
      console.log(coordinates);
      popup.setPosition(coordinates);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('id')
      });
      $(element).popover('show');
    } else {
      $(element).popover('destroy');
    }
  });
1

Similar to the OpenLayer example https://openlayers.org/en/v4.6.5/examples/icon.html

Declare you forest layer separately so it can assigned to a variable, then add it to the map

var forestsLayer = new ol.layer.Vector({
        renderMode: 'image',
        style: forestStyle,
        source: new ol.source.Vector({
          url: '../data/forests.geojson',
          format: new ol.format.GeoJSON()
        })
      });

var map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      forestsLayer
    ]
  });

If you will be adding other layers and you are only interested in forests you should add a layer filter to the forEachFeatureAtPixel call

var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
              return feature;
            },
            { layerFilter: function(candidate) { return (candidate === forestsLayer) } });

Note that the OpenLayers example wasn't written to handle multiple features, even on the same layer, and bootstrap doesn't always work as expected. See https://stackoverflow.com/questions/53947527/popup-with-multiple-points-features

| improve this answer | |
  • Thank you! I have implemented your suggestion but still don't get any pop-up. My GeoJSON structure has been added to the original question as an edit. I also added popup to my HTML structure. I tried logging "coordinates" to my console and I see no output on click. Code will also be added to my original post as there is a character limit here. – b_jugger Jan 5 '19 at 16:36
  • Can you see any features on the map? The GeoJSON coordinates are LonLat but the map projection is presumably web mercator if you are using OSM? (I can't see where you set the view). If so the format line should be format: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}) – Mike Jan 5 '19 at 17:00
  • My GeoJSON data all load perfectly. I am using Openlayers as basemap. Here is my view: view: new ol.View({ center: [2620719.951785553,4954495.299388555], zoom: 9.3 }) Coordinates now work (see below) as I missed a bracket but still no popup in sight. (11) [Array(4437), Array(42), Array(20), Array(38), Array(51), Array(40), Array(90), Array(60), Array(75), Array(36), Array(59)] – b_jugger Jan 5 '19 at 17:57
  • I have now put in a full geometry property value possibly the issue is at feature.get() or the defined feature variable in itself. Thank you! – b_jugger Jan 5 '19 at 19:46
  • Unlike the example you have polygons instead of points, so using the feature coordinates for the popups won't work. To show a popup where you clicked use var coordinates = map.getCoordinateFromPixel(evt.pixel); instead – Mike Jan 5 '19 at 19:53

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.