I'm having a list of points (coordinates + extra info). I want to show them on the map as LineString and when I hover a vertex/point I want to get a callback where I display extra info for the given point. As the list could be big I don't want to create a feature for each point, but just one for the LineString. Otherwise I end up in performance problems. I can easily take the closest point from the LineString, but it's just coordinates, without any identification ... index would be sufficient.

Here is how my code looks like:

var geometry = new ol.geom.LineString(positions);
map.on("pointermove", function(event)
    if (event.dragging) { return; }

    var mouseCoordinates = map.getEventCoordinate(event.originalEvent);
    var closestPoint = geometry.getClosestPoint(mouseCoordinates);

If you don't mind it shouldn't be id or index, there's a way to get features where's your mouse pointer on.

var geometry = new ol.geom.LineString(positions);
map.on("pointermove", function(event) {
    if (event.dragging) { return; }
    var features = [];

    map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {

    // features: features under your mouse pointer
  • The problem is that I'm loading too many points (let's say 500k+). When I load them as one LineString - everything is fine. But when I load each point as a feature the memory and CPU are gone. So, I need to know which vertex did the user hovered, not which feature. – Vladimir Mihov Jun 9 '17 at 8:53

I found a way to do that. But I'm still not sure if it's OK or it's a workaround. When building the LineString you can pass a layout which is responsible for the point format (XY, XYZ, XYM, XYZM). As far as I was able to understand from OpenLayers3 Docs 'M' stands for measure. So, I'm using XYM layout, populating the points with index and then the closest point returns that as well:

var positions = myData.map(function (item, index) { return [item.Longitude, item.Latitude, index]; });
var geometry = new ol.geom.MultiLineString([positions], "XYM");

... later in the pointermove event:
var coordinate = this.map.getEventCoordinate(event.originalEvent);
var point = geometry.getClosestPoint(coordinate);

// point[2] is estimation of the index.
// For example 23.765 is a position between points 23 and 24. Closer to 24.

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.