Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'TypeError: coordinates must be finite numbers' when changing map/view projection

See original GitHub issue

Hi @ghettovoice,

I am trying to create a web-map that supports multiple projections, in this case for the Antarctic (EPSG:3031) and Arctic (EPSG:3413).

I’ve been experimenting getting this to work with VueLayers (v0.12.0-rc.20) but encounter errors like this when the projection changes:

TypeError: coordinates must be finite numbers

I tried to strip the map back as far as possible, so it has no layers and a map centre of [0,0], and hosted it here: https://codesandbox.io/s/suspicious-worker-fnh4n?file=/src/App.vue

Changing the projection using the select input should hopefully trigger the errors I’m getting.

I’m assuming that the coordinates that cause these errors relate to the map centre, and that on changing the projection these coordinates are reprojected (to preserve the current map centre?) and that this causes a failure.

I’ve enabled the VueLayers debug mode and can see a console messages such as:

[VueLayers] VlView.b5648567-757a-4c2a-bc57-dbad4d7fe3f8 projection changed, scheduling recreate...  EPSG:3031  ===>  EPSG:3413
[VueLayers] VlView.b5648567-757a-4c2a-bc57-dbad4d7fe3f8 recreate scheduled

This then leads to a series of errors [1] and then some more debug messages:

[VueLayers] VlView.vl-d8d48758-8bb3-4301-ad31-8ff78f423c9a-default-view ol object created log.js:32:4
[VueLayers] VlView.vl-d8d48758-8bb3-4301-ad31-8ff78f423c9a-default-view ol object mounted log.js:32:4
[VueLayers] VlView.b5648567-757a-4c2a-bc57-dbad4d7fe3f8 ol object created log.js:32:4
[VueLayers] VlView.b5648567-757a-4c2a-bc57-dbad4d7fe3f8 ol object mounted log.js:32:4
[VueLayers] VlView.vl-d8d48758-8bb3-4301-ad31-8ff78f423c9a-default-view ol object unmounted log.js:32:4
[VueLayers] VlView.vl-d8d48758-8bb3-4301-ad31-8ff78f423c9a-default-view ol object destroyed

I’m not clear what this means, other than that presumably this means the errors I’m getting are happening after the projection has been changed. I’m wondering if something needs overriding to reset the centre coordinates or similar?

If relevant, I don’t need to preserve any map state between the two projections so things like the zoom, extent etc. could all be reset on a projection change if that would make things easier.

I’m aware what I’m doing is likely an edge case but it would be great to get this working if you have advice on what might be causing this and/or how to fix it.

Thanks for such a useful library, Felix

[1]

[VueLayers] VlSourceVector.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-source format changed, scheduling recreate...  undefined  ===>  
Object { dataProjection: {…}, defaultFeatureProjection: null, geometryName_: undefined, extractGeometryName_: undefined, defaultDecimals: undefined, defaultStyleReader: createStyle(vlStyle), defaultStyleWriter: dumpStyle(olStyle)
 }
log.js:32:4
[VueLayers] VlSourceVector.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-source recreate discarded log.js:32:4
[VueLayers] VlMap.14e03d50-25ea-48ac-9bf8-fbfd37d0bac8 ol object created log.js:32:4
[VueLayers] VlMap.14e03d50-25ea-48ac-9bf8-fbfd37d0bac8 ol object mounted log.js:32:4

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html vue.common.dev.js:9060

vue-devtools  Detected Vue v2.6.12 backend.js:2237:15

[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d ol object created log.js:32:4
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d ol object mounted log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object mount canceled log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object unmount canceled log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object create canceled log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object destroy canceled log.js:32:4
[VueLayers] VlLayerVector.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-layer ol object created log.js:32:4
[VueLayers] VlLayerVector.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-layer ol object mounted log.js:32:4
[VueLayers] VlSourceVector.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-source ol object created log.js:32:4
[VueLayers] VlSourceVector.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-source ol object mounted log.js:32:4

[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d projection changed, scheduling recreate...  EPSG:3031  ===>  EPSG:3413 log.js:32:4
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d recreate scheduled log.js:32:4

[Vue warn]: Error in getter for watcher "extentDataProj": "TypeError: coordinates must be finite numbers"

found in

---> <VlSourceVector>
       <VlLayerVector>
         <VlMap>
           <AppMap>
             <Anonymous>
               <Root> vue.common.dev.js:630
TypeError: coordinates must be finite numbers
    checkCoord checkSanity.js:10
    _default checkSanity.js:2
    transform transform.js:17
    transformer core.js:8
    inverse core.js:77
    createSafeCoordinateTransform proj.js:661
    createTransformFromCoordinateTransform proj.js:333
    applyTransform extent.js:826
    transformExtent proj.js:512
    transformExtent proj.js:383
    extentToDataProj proj-transforms.js:94
    getExtent vector-source.js:469
    extentDataProj vector-source.js:154
    VueJS 16
    change app.e31bb0bc.js:187714
    VueJS 3
vue.common.dev.js:1893
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d recreating... log.js:32:4
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d ol object unmounted log.js:32:4
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d ol object destroyed log.js:32:4
[Vue warn]: Error in getter for watcher "currentCenterDataProj": "TypeError: coordinates must be finite numbers"

found in

---> <VlView>
       <VlMap>
         <AppMap>
           <Anonymous>
             <Root> vue.common.dev.js:630
TypeError: coordinates must be finite numbers
    checkCoord checkSanity.js:10
    _default checkSanity.js:2
    transform transform.js:17
    transformer core.js:8
    forward core.js:74
    createSafeCoordinateTransform proj.js:659
    createTransformFromCoordinateTransform proj.js:333
    transform proj.js:495
    transform proj.js:73
    transformPoint proj.js:55
    pointToDataProj proj-transforms.js:57
    currentCenterDataProj view.vue:192
    VueJS 16
    _callee$ wait-for-map.js:35
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 6
    beforeInit wait-for-map.js:9
    _callee$ view.vue:472
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    beforeInit view.vue:469
    _callee16$ ol-cmp.js:650
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    execInit app.e31bb0bc.js:135525
    _callee$ ol-cmp.js:163
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 2
vue.common.dev.js:1893
[Vue warn]: Error in callback for watcher "currentCenterDataProj": "TypeError: can't access property "slice", value is undefined"

found in

---> <VlView>
       <VlMap>
         <AppMap>
           <Anonymous>
             <Root> vue.common.dev.js:630
TypeError: can't access property "slice", value is undefined
    handler view.vue:283
    VueJS 11
    _callee$ wait-for-map.js:35
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 6
    beforeInit wait-for-map.js:9
    _callee$ view.vue:472
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    beforeInit view.vue:469
    _callee16$ ol-cmp.js:650
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    execInit app.e31bb0bc.js:135525
    _callee$ ol-cmp.js:163
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 2
vue.common.dev.js:1893
[Vue warn]: Error in render: "TypeError: coordinates must be finite numbers"

found in

---> <VlView>
       <VlMap>
         <AppMap>
           <Anonymous>
             <Root> vue.common.dev.js:630
TypeError: coordinates must be finite numbers
    checkCoord checkSanity.js:10
    _default checkSanity.js:2
    transform transform.js:17
    transformer core.js:8
    forward core.js:74
    createSafeCoordinateTransform proj.js:659
    createTransformFromCoordinateTransform proj.js:333
    transform proj.js:495
    transform proj.js:73
    transformPoint proj.js:55
    pointToDataProj proj-transforms.js:57
    currentCenterDataProj view.vue:192
    VueJS 3
    __vue_render__ app.e31bb0bc.js:180942
    VueJS 14
    _callee$ wait-for-map.js:35
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 6
    beforeInit wait-for-map.js:9
    _callee$ view.vue:472
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    beforeInit view.vue:469
    _callee16$ ol-cmp.js:650
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    execInit app.e31bb0bc.js:135525
    _callee$ ol-cmp.js:163
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 2
vue.common.dev.js:1893
[Vue warn]: Error in getter for watcher "visibleExtentDataProj": "TypeError: coordinates must be finite numbers"

found in

---> <VlView>
       <VlMap>
         <AppMap>
           <Anonymous>
             <Root> vue.common.dev.js:630
TypeError: coordinates must be finite numbers
    checkCoord checkSanity.js:10
    _default checkSanity.js:2
    transform transform.js:17
    transformer core.js:8
    forward core.js:74
    createSafeCoordinateTransform proj.js:659
    createTransformFromCoordinateTransform proj.js:333
    applyTransform extent.js:826
    transformExtent proj.js:512
    transformExtent proj.js:383
    extentToDataProj proj-transforms.js:94
    getExtent view.vue:673
    visibleExtentDataProj view.vue:206
    VueJS 16
    _callee15$ ol-cmp.js:438
    Babel 8
    _callee5$ ol-cmp.js:193
    Babel 10
    _callee16$ ol-cmp.js:669
    Babel 10
    _callee$ ol-cmp.js:163
    Babel 8
    VueJS 16
vue.common.dev.js:1893

[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object created log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object mounted log.js:32:4
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d ol object created log.js:32:4
[VueLayers] VlView.dde06de4-e6ea-4f97-a971-9ce88e691d1d ol object mounted log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object unmounted log.js:32:4
[VueLayers] VlView.vl-14e03d50-25ea-48ac-9bf8-fbfd37d0bac8-default-view ol object destroyed