1

I've created a map and I am using Openlayers Vector Tile Info example https://openlayers.org/en/latest/examples/vector-tile-info.html to retrieve the point information from GeoServer.

My code is as follows:

// WFS Layer
layer_wfs = new ol.layer.Vector(
{
source: new ol.source.Vector(
{
format: new ol.format.GeoJSON(),
url: 'http://[URL as required]
}
),
title: 'WFS Layer',
visible: false,
style: new ol.style.Style(
    {
        image: new ol.style.Circle(
        {
            radius: 6,
            stroke: new ol.style.Stroke(
            {
                color: [255, 219, 77],
                width: 2
            }
            ),
            fill: new ol.style.Fill(
            {
                color: [255, 255, 0, 0.6]
            }
            )
        }
    )
    }
    )
}
);

// Create a view
myview = new ol.View(
{
center: ol.proj.fromLonLat([-6.67, 54.15], "EPSG:3857"),
zoom: 7,
projection: 'EPSG:3857'
}
); 

// Create a map
map = new ol.Map(
{
target: 'map',
interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false }),
layers:[layer_wfs],
view: myview,
controls:[
new ol.control.Zoom(),
new ol.control.ZoomSlider(),
new ol.control.ScaleLine(),
new ol.control.LayerSwitcher()
]
}
);

map.on('pointermove', showInfo);

var info = document.getElementById('info');
function showInfo(event) {
  var features = map.getFeaturesAtPixel(event.pixel);
  if (features.length == 0) {
    info.innerText = '';
    info.style.opacity = 0;
    return;
  }
  var properties = features[0].getProperties();
  info.innerText = JSON.stringify(properties, null, 2);
  info.style.opacity = 1;
}

This brings up the information perfectly, however it seems to be bringing up additional information which I'm not sure how to get rid off (or why it's there as it isn't stored in the attribute table). I only want the Address, Postcode, X and Y coordinate information to appear - how do I get rid of the rest?

strong text

2
  • 1
    As you have a vector layer instead of a vector tile layer the properties include the geometry object. There are many way in JavaScript to get a subset of your properties object which includes only the keys which you wish to see stackoverflow.com/questions/17781472/…
    – Mike
    Jan 30 at 19:55
  • Hi, thanks for your reply. I'm new to all of this, so I don't really understand the thread you've attached or where to alter my own JS code
    – GIS_User2
    Jan 30 at 20:32
1

This should work on any browser

  var properties = features[0].getProperties();
  var subset = {
    Address: properties.Address,
    Postcode: properties.Postcode,
    X_Coordina: properties.X_Coordina,
    Y_Coordina: properties.Y_Coordina
  };
  info.innerText = JSON.stringify(subset, null, 2);
2
  • This works perfectly, thank you!
    – GIS_User2
    Jan 30 at 21:19
  • 1
    @AmyOKeefe If answer helped you solve you problem, it's customary on GIS SE site to mark it as accepted, to let others with similar problems knot that problem was resolved.
    – TomazicM
    Jan 31 at 9:27

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.