Error in render: "TypeError: destinationProjection is null"
See original GitHub issueHello there,
I’m trying to create a simple map with a source-vector by loading external features. I already did it in a static single html page using cdn js imports. Now I’m trying to port my code in a Vue-cli project so I give vuelayers a try !
I followed this example from vuelayers documentation : https://vuelayers.github.io/#/docs/component/vector-layer
Few specificities about my code :
- I need to create features from GeoJSON and I didn’t find any helpers in vuelayers to do so. So I installed openlayers in addition to vuelayers.
- My input data is in
EPSG:2154
so I defined this projection using proj4 in mymain.js
file like this
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");
Here is my component :
<template>
<div>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
data-projection="EPSG:2154" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:3857"></vl-view>
<vl-layer-tile id="osm">
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
<vl-layer-vector>
<vl-source-vector :features.sync="features"></vl-source-vector>
<vl-style-box>
<vl-style-stroke color="green" :width="3"></vl-style-stroke>
<vl-style-fill color="rgba(255,255,255,0.5)"></vl-style-fill>
</vl-style-box>
</vl-layer-vector>
</vl-map>
</div>
</template>
<script>
import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader
import fetchProfileService from '@/services/api/myservice.service.js'
import {Feature} from 'ol'
import {GeoJSON} from 'ol/format'
Vue.use(VueLayers)
export default {
data () {
return {
zoom: 2,
center: [0, 0],
rotation: 0,
features: [],
}
},
mounted () {
this.loadFeatures().then(features => {
this.features = features.map(Object.freeze)
this.loading = false
})
},
methods: {
// emulates external source
loadFeatures () {
let profile = fetchProfileService.fetchDatedProfileData().profile;
let features = [ new Feature( (new GeoJSON()).readGeometry(profile, {
dataProjection: 'EPSG:2154',
featureProjection: 'EPSG:3857',
})) ]
return new Promise(resolve => {
setTimeout(() => {
// generate GeoJSON random features
resolve(
features
)
}, 2000)
});
}
}
}
</script>
I end up with console errors when loading my page :
Error in render: "TypeError: destinationProjection is null"
andTypeError: sourceProjection is null
profile
variable used to create features contains the following Json array :
{
"type": "MultiPoint",
"coordinates" : [
[ 307990.482808, 6651285.00402, -0.541960716248],
...
]
}
Any ideas ?
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
[Vue warn]: Error in render: "TypeError: Cannot read property ...
The property at initial rendering is not available, so you should check its availability using conditional rendering :
Read more >Error in render: "TypeError: Cannot read property '0' of null ...
the app is to be a quiz, the questions/answers are stored in a .json file in the project, and when the user starts...
Read more >csl.paesit.it/static/geoexplorer/script/GeoExplore...
All values are initialized to null, however, * you should make sure you set them ... This method will throw a TypeError if...
Read more >OpenLayers.debug.js - searchcode
"function") { 692 throw new TypeError(); 693 } 694 for(var i=0; i<len; ... All values are initialized to null, however, 724 * you...
Read more >Why can't I load a WFS into Openlayers: "TypeError: null is not ...
I get the Error from the Headline and deep inside in ol.js in Ob(d).b it handles the srs-string, as far as I can...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
No I didn’t because I thought
package-lock.json
was recreated at each re-install. Thanks for the tip, the problem is solved, so here is what I did precisely:ol
occurrence inDevDependencies
in mypackage.json
node_modules
directory as you saidpackage-lock.json
: otherwise, I doesn’t work for some reasonnpm install
Now, there is no
node_modules
directory within./node_modules/vuelayers
and everything looks fine, no more complaints about my projection, and ol package version is 5.3.3 (coming from vuelayers dependency).Thank you for your help !
Very strange, something wrong with your current setup. Do you try to drop
package-lock.json
too before full re-install withnpm install
?