1

I'm using OpenLayers 5.3.2, and would like to create my own marker animation using almost exactly the example at https://openlayers.org/en/latest/examples/feature-move-animation.html?q=marker

All I'd like to do is create my own polyline to replace the one used in the demo. I'll also change the center point, but I can do that on my own. There is no information on how to generate a polyline for OL 5.3.2. I've read all examples for past versions, and none of them work.

From what I've read, a polyline is an array of coordinate arrays, such as:

[
    [lon,lat],
    [lon,lat],
    [lon,lat],
    [lon,lat]
]

So I've generated my array to match exactly that. Example of the data I created, stored in a global variable:

var currPath = 
    [
        [
            -98.907449,
            30.241299
        ],
        [
            -98.907477,
            30.241337
        ],
        [
            -98.907557,
            30.241449
        ],
        [
            -98.907636,
            30.24156
        ]
    ]

But from here, I have no idea how to proceed.

2

You could simply use your coordinate array to create a linestring

  import LineString from 'ol/geom/LineString.js';

  var route = new LineString(currPath).transform('EPSG:4326', 'EPSG:3857');

But if you need to create a polyline string from a coordinate array

  var polyline = new Polyline({
    factor: 1e6
  }).writeGeometry(new LineString(currPath));
  • Thank you very much for your help Mike! Looks like my only other problem now is that the data is not ready at the time my map is called. So I loaded the array I posted here so that I didn't have to wait for the data in my application, and it worked! Wow. Thank you very much. The part you provided for var polyline ... was the missing piece of my puzzle! – Pegues May 27 at 13:43

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.