How to get individual features from a GeoJson-Multipoint feature using map.on('click'…) in openlayers 4.6.5

Question

I'm trying to get the features of each MultiPoint-point when i click on a point in my openlayers map (4.6.5). The points shows on the map.

I want to add a pop-up on each feature when i click on the points in my MultiPoint array. Each individual point consists of [LON, LAT, TIME].

In have previously achieved this with a "LineString" geometry. So i wonder if this a problem with "MULTIPOINT" as geometry?

My click function looks like this:

 map.on('click', function (evt) {
    var pointfeature = map.forEachFeatureAtPixel(evt.pixel, function (feature, vectorLayer) {

        if (feature) {
console.log(feature)
           var coordinate = evt.coordinate;
            var hdms = 
ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 
'EPSG:4326'));

        var geometry = feature.getGeometry(); 
        var mypoint = geometry.getClosestPoint(coordinate);
        var pointtoshow = point[1];
        content.innerHTML = '<p>feature </p>';
        overlay.setPosition(coordinate);
        }
        return feature;
    });
});

My geojsonObject looks like this:

var geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
        'type': 'name',
        'properties': {
            'name': 'EPSG:3857'
        }
    },
    'features':[
'type': 'Feature',
            'geometry': {
                'type': 'MultiPoint',
                'coordinates': 
                    mycoordinates().map(function (x) {

                        return ol.proj.transform([x[0], x[1]], 
   'EPSG:4326', 'EPSG:3857')
                    })
                ,
                "properties": {
                    "Time": mycoordinates().map(function (x)         
                {
                        return x[2]
                })
            }
        },{
        'type': 'Feature',
        'geometry': {
            'type': 'Point', 
            'coordinates': ol.proj.transform([refpointlon, refpointlat], 
        'EPSG:4326', 'EPSG:3857') 
        }]
};

What i get from the console.log(feature) is the following:

Hk {Wa: {…}, qa: {…}, oa: {…}, g: 1, xp: 2, …}
N: {geometry: No}
Wa: {}
a: "geometry"
ab: {change:geometry: Array(1), change: Array(1), propertychange:         
Array(1)}
c: undefined
f: null
g: 1
i:
Ch: Hk {Wa: {…}, qa: {…}, oa: {…}, g: 1, xp: 2, …}
Dh: ƒ b(b)
Eh: false
listener: ƒ ()
target: No {Wa: {…}, qa: {…}, oa: {…}, g: 1, xp: 1, …}
type: "change"
__proto__: Object
j: undefined
oa: {change:geometry: Array(1), change: Array(1), propertychange:         
Array(1)}
qa: {}
xp: 2
__proto__: Vc

But this does not contain the feature coordinates, and not the feature property: TIME, as spesified in the geojsonobject.

Any suggestions for why i don't get the individual feature-information??

Answer 1

Leave the time value in the coordinates, just as you would for GPX:

var geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
        'type': 'name',
        'properties': {
            'name': 'EPSG:3857'
        }
    },
    'features':[
'type': 'Feature',
            'geometry': {
                'type': 'MultiPoint',
                'coordinates': 
                    mycoordinates().map(function (x) {
                        // include time in coordinates
                        return ol.proj.transform(x, 'EPSG:4326', 'EPSG:3857')
                    })
                ,
                "properties": {
                    "Time": mycoordinates().map(function (x)         
                {
                        return x[2]
                })
            }
        },{
        'type': 'Feature',
        'geometry': {
            'type': 'Point', 
            'coordinates': ol.proj.transform([refpointlon, refpointlat], 
        'EPSG:4326', 'EPSG:3857') 
        }]
};

Then you can get the time from the result of getClosestPoint():

map.on('click', function (evt) {
    var pointfeature = map.forEachFeatureAtPixel(evt.pixel, function (feature, vectorLayer) {

        if (feature) {
console.log(feature)
           var coordinate = evt.coordinate;
            var hdms = 
ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 
'EPSG:4326'));

        var geometry = feature.getGeometry(); 
        var mypoint = geometry.getClosestPoint(coordinate);
        var time = mypoint[2];
        content.innerHTML = '<p>feature </p>';
        overlay.setPosition(coordinate);
        }
        return feature;
    });
});

Here's a simple example using coordinates from a GPX linestring as a multipoint and displaying time when the mouse moves over a point https://jsfiddle.net/tbod7g05/

As OpenLayers only supports two extra coordinate properties (intended for altitude and time) if you needed more you could use the "altitude" to pass an index to your other properties:

var geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
        'type': 'name',
        'properties': {
            'name': 'EPSG:3857'
        }
    },
    'features':[
'type': 'Feature',
            'geometry': {
                'type': 'MultiPoint',
                'coordinates': 
                    mycoordinates().map(function (x, index) {
                       return ol.proj.transform([x[0], x[1], index], 
   'EPSG:4326', 'EPSG:3857')
                     })
                ,
                "properties": {
                    "Time": mycoordinates().map(function (x)         
                {
                        return x[2]
                })
            }
        },{
        'type': 'Feature',
        'geometry': {
            'type': 'Point', 
            'coordinates': ol.proj.transform([refpointlon, refpointlat], 
        'EPSG:4326', 'EPSG:3857') 
        }]
};


map.on('click', function (evt) {
    var pointfeature = map.forEachFeatureAtPixel(evt.pixel, function (feature, vectorLayer) {

        if (feature) {
console.log(feature)
           var coordinate = evt.coordinate;
            var hdms = 
ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 
'EPSG:4326'));

        var geometry = feature.getGeometry(); 
        var mypoint = geometry.getClosestPoint(coordinate);
        var index = mypoint[2];
        var time = feature.get('Time')[index];
        content.innerHTML = '<p>feature </p>';
        overlay.setPosition(coordinate);
        }
        return feature;
    });
});