CODEWITHSUNDEEP
javascriptopenlayers-6
Esprit1st
Esprit1st

Reputation: 111

Moving a Point in Openlayers 6

I have an array of coordinates that I draw a path with. Then I want to move a marker to a position on that path when the user clicks on the map to a new position along that path.

I have the map and path figured out, and I have the marker on the first position of the path. I can't figure out how to move that marker. I don't understand how to access the position of that first marker, change the coordinates to different ones in the array and then move it there.

The function movemarker is the one I'm struggling with. I played with getCoordinates and setCoordinates but haven't gotten anything working out of it, so it's currently just setting a second marker. Any help would be greatly appreciated! Thank you!

  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
  </head>
  <body>
      <div id="map-canvas" onClick="movemarker(3)"></div>

    <script type="text/javascript">
    var coordinates = [
        ol.proj.fromLonLat([-3, 0]),
        ol.proj.fromLonLat([-5, 4]),
        ol.proj.fromLonLat([-6, 4]),
        ol.proj.fromLonLat([-7, 0]),
        ol.proj.fromLonLat([-9, 8])
    ];

    <!-- Initialize path -->
    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 3
            })
        })
    });

    <!-- Initialize map -->
    var map = new ol.Map({
        target: 'map-canvas',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
        center: [0, 0],
        zoom: 1
      })
    });
    map.addLayer(layerLines);

    <!-- set initial marker -->
    var markericon = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(coordinates[0])
                })
            ]
        })
    });
    map.addLayer(markericon);

    <!-- move marker -->
    function movemarker(markernumber) {
        var markericon = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point(coordinates[3])
                    })
                ]
            })
        });
        map.addLayer(markericon);
    }

    </script>

    </div>
  </body>
</html>```

Upvotes: 0

Views: 2089

Answers (1)

Mike
Mike

Reputation: 17897

You should access the geometry of the feature you have already created and update its coordinates

function movemarker(markernumber) {
    markericon.getSource().getFeatures()[0].getGeometry().setCoordinates(coordinates[markernumber]);
}

Upvotes: 1

Related Questions