Changing projection crashes vuelayers

[Lars-Sommer]

The docs states that you can change projection with the dataProtection property: https://vuelayers.github.io/#/docs/quickstart?id=global-data-projection
But if I use other projections (for an example 25832 which I would prefer) than 4326 and 3857, vue crashes with the console error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "resolvedDataProjection": "TypeError: Cannot read property 'getCode' of null".

And after a while:

hostReportError.js?0ca4:3 Uncaught RangeError: Maximum call stack size exceeded
at error$$1 (rx-subs.js?038f:54)

I am using the basic "Getting started" example. Any thoughts on this?

Thanks :)

[ghettovoice]

Hi @fasterlars ,
looks like you didn't register 25832 projection. You can make this with the help of proj4 package.
There is an example:

<template>

  <vl-map data-projection="EPSG:21781">
    <vl-view .../>
  </vl-map>

</template>

<script>
// ... other imports
import {register} from 'ol/proj/proj4'
import proj4 from 'proj4'

// taken fron http://epsg.io/
proj4.defs('EPSG:21781',
        '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
          '+x_0=600000 +y_0=200000 +ellps=bessel ' +
          '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs')
register(proj4)

// now you can use projection by code EPSG:21781 in any component

export default {
  // ...
}
</script>

[ghettovoice]

Additional examples

• with plain openlayers https://openlayers.org/en/latest/examples/wms-image-custom-proj.html
• with vuelayers https://jsfiddle.net/ghettovoice/6rqm02zx/

[Lars-Sommer]

Thanks alot, it works now! That was very helpful, maybe it should be a part of the official guide?

[ghettovoice]

maybe it should be a part of the official guide?

I totally agree, but currently haven't time for this. Thanks

[jonimnim]

When I use the 3395 projection registered through "ol.proj.register" not for the map, but for the layer, an error appears [Vue warn]: Error in getter for watcher "urlFunc": "TypeError: Cannot read property 'getExtent' of null".
An error occurs in "vuelayers/lib/ol-ext/extent.js" in the method "createExtentFromProjection" when execute var extent = projection.getExtent().

Thank you!

[ghettovoice]

Hi @jonimnim ,
can you show the code where you register projection?

[jonimnim]

Tried like this:
import {register} from 'ol/proj/proj4' import proj4 from 'proj4' import {get} from 'ol/proj' proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs') register(proj4) get('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
but then I realized that for the map and for the layer for some reason a different scope was used, and did this:
`
import {register} from 'ol/proj/proj4'
import proj4 from 'proj4'
import {get} from 'ol/proj'
import {register as register1} from 'vuelayers/node_modules/ol/proj/proj4'
import {get as get1} from 'vuelayers/node_modules/ol/proj'

proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs')
register(proj4)
get('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
register1(proj4)
get1('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
`
and it worked.

I think it would be better to have scope one for both the map and the layer.

[ghettovoice]

Which version of vuelayers do you use?

[jonimnim]

Which version of vuelayers do you use?

0.11.21

[ghettovoice]

It seems like you install ol package manually, do you? If this is this the case, you need to use v5.3.x version. Due to ol version not match NPM installs separate ol package into the vuelayers/node_modules/ dir

[jonimnim]

Yes. But I need a new version of ol)

[ghettovoice]

Upgrade to ol v6 is on my roadmap, but for now vuelayers is based on v5.3.x.
If your hack with double proj4 register works, probably you can stay with it for a while

[jonimnim]

I will do so for now. Thanks)

[JeremyGerard]

Hi, I have the same issue :
vue.esm.js?efeb:1897 TypeError: Cannot read property 'getCode' of null

My main.js :

import Vue from 'vue'
import App from './App.vue'
import VueLayers from 'vuelayers'
import {register} from 'ol/proj/proj4'
import 'vuelayers/lib/style.css' // needs css-loader
import proj4 from 'proj4'

proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
register(proj4)

Vue.use(VueLayers)
[...]

My package.json :

"dependencies": {
    "ol": "^5.3.0",
    "proj4": "^2.6.1",
    "vue": "^2.5.11",
    "vuelayers": "^0.11.22"
  },

Do you know why ?

[ghettovoice]

@JeremyGerard do you have this dir './node_modules/vuelayers/node_modules/...'?
If so try to drop it (maybe drop a whole './node_modules' dir), because even if you install 'ol@5.3.x' manually, npm package resolve fist take what's inside 'vuelayers/node_modules' directory

[JeremyGerard]

Hi,
I dropped it but I have the same result :

Vue warn]: Error in render: "TypeError: Cannot read property 'getCode' of null"
found in

---> at view.vue
at map.vue
at src/App.vue

[JeremyGerard]

Details :

[ghettovoice]

Hmm ... So you now don't have this directory ./node_modules/vuelayers/node_modules/, right?

[JeremyGerard]

Yes

[JeremyGerard]

I have made a simple app to focus on my issue :
app.vue :

<template>
  <div class="container">
    <vl-map
      data-projection="projection"
      :load-tiles-while-animating="true"
      :load-tiles-while-interacting="false"
      style="height: 400px">
      <vl-view
        :zoom.sync="zoom"
        :center.sync="center"
        :rotation.sync="rotation"></vl-view>
      <vl-layer-tile id="osm">
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>
    </vl-map>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        zoom: 12,
        center: [35567.17,6089071.17],
        rotation: 0
      }
    }
  }
</script>

Main.js :

import Vue from 'vue'
import App from './App.vue'
import VueLayers from 'vuelayers'
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4';
import 'vuelayers/lib/style.css' // needs css-loader

proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
register(proj4);

Vue.use(VueLayers);

new Vue({
  el: '#app',
  data: {
    projection: "EPSG:2154"
  },
  render: h => h(App)
})

I'm missing something..

[ghettovoice]

I think you need to make data-projection="projection" -> :data-projection="projection"