"Error: coordinates must contain numbers" with vl-geom-multi-line-string

[tti0]

Hi, I am having some trouble using the vl-geom-multi-line-string component. I have the following code in the template of a .vue file:

<vl-feature>
          <vl-geom-multi-line-string :coordinates="[[ [ -3, 53 ], [ 5, 57 ], [ 12, 62 ], [ 19, 66 ], [ 26, 71 ], [ 33, 77 ], [ 40, 84 ], [ 46, 92 ], [ 51, 102 ], [ 56, 114 ], [ 58, 129 ] ]]"></vl-geom-multi-line-string>
</vl-feature>

However, the line fails to render, and the following error appears in the console:

Error: coordinates must contain numbers
    point main.es.js:173
    explode main.es.js:29
    coordEach main.es.js:101
    explode main.es.js:28
    pointOnFeature main.es.js:111
    findPointOnSurface geom.js:131
    pointViewProj index.js:87
    VueJS 3
    point index.js:76
    VueJS 3
    __vue_render__ index.js:322
    VueJS 14
    subscribeToEvents index.js:288
    RxJS 12
    boundListener events.js:41
    dispatchEvent Target.js:99
    notify Object.js:153
    set Object.js:170
    setGeometry Feature.js:224
    setGeometry geometry-container.js:73
    mount geometry.js:228
    _mountPromise ol-cmp.js:384
    promise callback*defineLifeCyclePromises ol-cmp.js:383
    created ol-cmp.js:289
    VueJS 28

Having attempted to debug this myself by setting a breakpoint on point main.es.js:173 I noticed that the coordinate values have changed significantly in the call stack (see screenshot). Perhaps this is causing the problem? I would appreciate any assistance with this, and apologise if it is caused by something I've done wrong. Many thanks!

[tti0]

I am using "vuelayers": "^0.11.31"

[ghettovoice]

Hello @tti0 , in which projection these coordinates defined? If EPSG:4326 then you probably need to change order of number in each point coordinates. VueLayers uses [lon, lat] format. But among your multiline points I see for example this one [ 56, 114 ] that obviously invalid because lat must be between -90, 90

[tti0]

Hi @ghettovoice,

Thank you for coming back to me.

Yes, reversing the elements of the array to [lon, lat] format has fixed the issue.

My apologies for this foolish mistake, as I am new to geodesy and Vue, although I couldn't find anything about this in the documentation (perhaps it could be added to the Quick Start guide?).

Thanks again for the library and your kind assistance!