Vector tile layers not showing

[DaveBathnes]

Hi,

Thanks for this library - I've been looking for a Vue library for MapLibre and this looks to be the only obvious one!

I'm struggling to get it to show a simple vector tiles layer though. As there are no examples though, I'm not sure if this is something that's been tested. I have a fairly basic example with the following markup:

<mgl-map :center="center" :zoom="zoom" :mapStyle="mapStyle">
  <mgl-fullscreen-control />
  <mgl-navigation-control />
  <mgl-scale-control />
  <mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5" />
  <mgl-vector-source source-id="libraries" :tiles="librariesSourceTiles">
    <mgl-circle-layer source-layer="libraries" layer-id="libraries" :paint="librariesLayerCirclesPaint" />
  </mgl-vector-source>
</mgl-map>

The mg-marker is really there as a test - it works fine.

The vector source relies on two data items: librariesLayerCirclesPaint (which is a circle layer paint object), librariesSourceTiles (an array of one single tile URL). But while MapLibre gives no errors at all, it simply does nothing. I can't even see it querying the tile service, so it's not trying to pull down the data. Am I missing anything like a required property? I was thinking maybe I had to specify zoom levels but I don't think so.

I'm migrating the solution from a Mapbox vue plugin so I know the data and services are fine.

Thanks

[DaveBathnes]

Just for some additional info. I started doing some debugging to inspect the map object.

The vector source is added fine. But the circle layer doesn't get added to the map.

I can add it in manually. Running in the console:

map.addLayer({ "id": "libraries", "source": "libraries", "source-layer": "libraries", "type": "circle", "paint": { "circle-radius": 10 }})

...added the layer as expected. I then tried taking the layer out of the source tag (and ensuring the source id was set as the code suggested that would also work) but that throws an error.

[razorness]

Hey, @DaveBathnes! Do you have a small repository to repduce your error?

If not, you should be able to watch if this line gets called:

https://github.com/razorness/vue-maplibre-gl/blob/738669d89109f50a533da7b5ebeccc28582252d4/src/lib/components/layers/circle.layer.ts#L35

[DaveBathnes]

Hi @razorness - well it's not very small but the branch I'm working on is here:

https://github.com/LibrariesHacked/create-librarydata/tree/71-update-packages-and-fix-icl-libraries

It should run up pretty easily without any dependencies, and then the page is http://localhost:8080/#/membership-map

https://github.com/LibrariesHacked/create-librarydata/blob/cd03c30dca862526e95db0a053b0537125056004/src/views/membership-map.vue#L31

Unfortunately I'm struggling to debug in node_modules at the moment. So not getting very far seeing if that line is being called. Any help would be much appreciated!

[razorness]

Check out v2.0.7. This version should fix your issue.

Unfortunately I'm struggling to debug in node_modules at the moment. So not getting very far seeing if that line is being called. Any help would be much appreciated!

Yeah, your project has very low support for debugging. I strongly suggest switiching to ViteJS. Simple config, very good support for Sass, Vue & Typescript. Template vue-ts is a very good entry point.

[DaveBathnes]

Hi, thank you so much for this - all working perfectly now.

Absolutely right on my setup, and I'll look into those recommendations. I'm pretty inexperienced in Vue - I like to try different libraries so this has been an attempt to go with Vue but it's pretty much the default setup from the CLI.

[razorness]

Sounds good. ViteJS is the current offiicial recommendation for Vue projects. Vue CLI won't get many fixes anymore.

Switching from Vue CLI is really easy:

1.

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install -D sass

2. install any needed packages like vue-router etc.
3. copy your files from old project into new project structure

Entry point is the index.html (same as public/index.html in your project) in root folder which points to src/main.ts.

Vite PWA makes your project a PWA out of the box.