CODEWITHSUNDEEP
javascriptopenlayers-3
DDan
DDan

Reputation: 8276

Update coordinate of feature in openlayers 3

I have a model in javascript which has latitude and longitude value. I have to find a feature on the map by the ID of the element and update it's location and several other properties. My code looks like this:

function updateCoordinate(item) {
    var features = source.getFeatures();
    var featureToUpdate;

    // find feature by custom property
    for(var i=0; i< features.length; i++) {
       if (features[i].get('ID') == item.ID) {
           featureToUpdate = features[i];
           break;
       }
    } 

    // get lon, lat from input item
    var lon  = item.Coordinate.Longitude;
    var lat  = item.Coordinate.Latitude;

    // update geometry (not working)
    featureToUpdate.set('Geometry', new ol.geom.Point(getPointFromLongLat(lon, lat)));
    // update custom properties (working)
    featureToUpdate.set('MapMarkerTitle', item.Title);
    // ...
}

function getPointFromLongLat (long, lat) {
    return ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857')
}

Am I doing something wrong? Is there a better way for this? Is there a better way to find feature by custom property?

By custom poperty I mean that the feature is getting initiated like this:

var fea = new ol.Feature({
            geometry: new ol.geom.Point(getPointFromLongLat(lon, lat)),
            MapMarkerTitle : 'AAA',
            // ...
         }) 
source.addFeatures([fea]);

The custom properties are getting updated but the coordinate doesn't seem to update. Will the feature be redrawn after updating position? The label is however redrawn so I think yes.

UPDATE

After some debugging I found out that, I mispelled the 'geometry' property with uppercase. Actually:

featureToUpdate.set('geometry', new ol.geom.Point(getPointFromLongLat(lon, lat)));

does set the new position and update the location right away. I would still like to know if what I am doing is the good way or there is better. Thanks!

Upvotes: 3

Views: 10220

Answers (1)

Jonatas Walker
Jonatas Walker

Reputation: 14168

You can simplify it to:

function updateCoordinate(item) {
    var featureToUpdate = source.getFeatureById(item.ID);

    var coord = getPointFromLongLat(item.Coordinate.Longitude, item.Coordinate.Latitude);

    featureToUpdate.getGeometry().setCoordinates(coord);
    featureToUpdate.set('MapMarkerTitle', item.Title);
}

Upvotes: 4

Related Questions