OL3: GetFeature from Layers by Coordinate

javascript, openlayers-3

Solution

Take a look at this example to see if it helps you: http://openlayers.org/en/latest/examples/kml.html

var displayFeatureInfo = function(pixel) {
  map.getFeatures({
    pixel: pixel,
    layers: [vector],
    success: function(featuresByLayer) {
      var features = featuresByLayer[0];
      var info = [];
      for (var i = 0, ii = features.length; i < ii; ++i) {
        info.push(features[i].get('name'));
      }
      document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
    }
  });

map.getFeatures() has this success callback where it delivers the features of the layers specified in layers: [vector]. Customize it at will to get what you need.

=== Update ===

In the OpenLayers 3's Map object you have a function: getPixelFromCoordinate

/**
 * @param {ol.Coordinate} coordinate Coordinate.
 * @return {ol.Pixel} Pixel.
 */
ol.Map.prototype.getPixelFromCoordinate = function(coordinate) {
  var frameState = this.frameState_;
  if (goog.isNull(frameState)) {
    return null;
  } else {
    var vec2 = coordinate.slice(0, 2);
    return ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2);
  }
};

Problem

I want to get the Feature of a Layer by coordinate. Furthermore I want to open this feature in a popup, which I have solved so far by an onclick event. But I want to realize by giving the coordinates of a feature and opening the popup of the featue. I have a layer with the map and a layer with the features: ``` if (trackMap != null) { for (var i = 0; i < trackMap.length; i++) { var trackInfo = trackMap[i]; lat = parseFloat(trackInfo.lat); lon = parseFloat(trackInfo.lon); var layergpx = new ol.layer.Vector({ source: new ol.source.Vector({ parser: new ol.parser.GPX(), url: '${contextRoot}/gps/gpx2' + trackInfo.url }) }); layers.push(layergpx); } } ``` I want to get the feature of this layer in another Javascript function. How I open a pop up by clicking on the map: ``` /** * The Click Event to show the data */ var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: ol.OverlayPositioning.BOTTOM_CENTER, stopEvent: false }); map.addOverlay(popup); map.on('singleclick', function(evt) { map.getFeatures({ pixel: evt.getPixel(), layers: vectorLayers, success: function(layerFeatures) { var feature = layerFeatures[0][0]; if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('desc') }); $(element).popover('show'); } else { $(element).popover('destroy'); } } }); }); ``` But I want this feature not to be opened by clicking on it on the map, but by entering a coordinate in a textfield and the map opens this pop up, like in the onclick event.

Original source