Demos not working in Webpack install

[chgad]

Hello,

I'm using a webpack config for my project and added the libraray like so

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import VueLayers from 'vuelayers'
import 'vuelayers/dist/vuelayers.css' // needs css-loader

Vue.use(VueLayers)
Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

And to test/try-out the library's features I copied both the geo-map and the xkcd demos to my root App.vue component.

This is the result

It seems like everything but the actual maps is working.

Am I missing a loader config or some other dependency? Is my webpack install incorrect or missing something?

Thanks in adnvance.

[ghettovoice]

Hello @chgad , you are right, it seems that map components are loaded but images from OSM layer is missing. Do you see some errors in browser console, nodejs console ? and also do you see requests on browser network tab to openstreet map tiles? something like this https://a.tile.openstreetmap.org/2/1/2.png

[chgad]

Okok... i don't know why but it seems like i didn't pay attention to the Errors in the console.

I had errors showing "sourceProjection is null" which was caused by an ol@v7 install. Downgrading to ol@v6 fixed everything.

Now the XKCD Demo works. But the geo-map demo is still not showing the map. Now without any Error messages and no requests fetching map tiles.

I tried copying this map demo and it works just fine (BUG: Implementing this map and the XKCD demo alongside each other seems to work as long as you do not scroll the normal map. As soon as you drag or scroll the map, the XKCD map disappears.)

In addition to that matter: It would be great to add a "you need to install ol manually" statement to the docs.

[ghettovoice]

I tried copying this map demo and it works just fine (BUG: Implementing this map and the XKCD demo alongside each other seems to work as long as you do not scroll the normal map. As soon as you drag or scroll the map, the XKCD map disappears.)

XKCD example uses custom non-geographic projection. So, if you share it's view with another map in EPSG projection, after dragging normal geo map, XKCD map just moves somewhere far away of image. You can check coordinates, view extents of both maps in Vue dev.

In addition to that matter: It would be great to add a "you need to install ol manually" statement to the docs.

ol@6 is among vuelayers dependencies, so if you didn't manually install ol package before vuelayers, npm should install vuelayers and all it's dependencies with correct versions. Current stable vuelayers based on ol@6.

Now the XKCD Demo works. But the geo-map demo is still not showing the map. Now without any Error messages and no requests fetching map tiles.

Thats interesting, OSM layer works on one map and don't work on another. What do you see in Vue devtool's components tree? Do you see <VlLayerTile> -> <VlSourceOsm> nodes in the <VlMap> node?

[chgad]

XKCD example uses custom non-geographic projection. So, if you share it's view with another map in EPSG projection, after dragging normal geo map, XKCD map just moves somewhere far away of image. You can check coordinates, view extents of both maps in Vue dev.

So in general all maps rendered are moved simultaneously ?

Thats interesting, OSM layer works on one map and don't work on another. What do you see in Vue devtool's components tree? Do you see -> nodes in the node?

This is what the VueDevTool shows me:

As i inspected both of the maps i recognized that the geo-map has an additional data-projection="EPSG:4326" prop set.

Removing this prop, the map gets render just like the others. Is this maybe a deprecated or fault projection?

EDIT:

I found my mistake. Since i was using the XKCD demo, which defines a custom projection and then center: [size[0] / 2, size[1] / 2] in the data object the map was, i guess, simply way outside of the canvas. Defining center: [0, 0] as it is defined in te geo-map demo the map appears as it should.

[ghettovoice]

So in general all maps rendered are moved simultaneously ?

no, only if you share view between them, i.e. add <VlView ident="qwerty"> to both maps (like in this demo https://vuelayers.github.io/#/docs/component/view?id=ident).

If this is true, then on one side you have a map with view in EPSG:3857 and on the other side image with custom projection. To show both, I guess, you need to adjust image layers projection (extent) so it will be visible in EPSG:3857. I have make another demo to show my idea https://jsfiddle.net/ghettovoice/Ln9qr135/377/

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.