source: mbtiles

[marcomilone]

Hi, Can you add mbtiles source type ?

You can find some code here: https://github.com/mmomtchev/ol-mbtiles/

I think will be a very useful enhancement.

Thanks for your time.

[d-koppenhagen]

Generally: yes. But unfortunately my time is very limited right now. Are you interested in a contribution?

[marcomilone]

Thanks d-k I'm not good enough to contribute to this wonderful library I'll like to ofc

[marcomilone]

If someone more skilled then me is somehow interested. I made it work, via service worker too. You need to add some headers as well explained in ol-mbtiles

I tried to build a source with the tools already in vue-openlayers . I think is doable.

What is not in vue-openlayers is a wrapper of "ImageTileLayer" to provided the source to.

// RasterMbtiles.vue

<template>
  <div v-if="false"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { MBTilesRasterSource } from "ol-mbtiles";
import TileGrid from 'ol/tilegrid/TileGrid';

// roba per tile static layer //
import ImageTileLayer from 'ol/layer/Tile';
import { get as getProjection } from 'ol/proj';
import { getWidth } from 'ol/extent';

const projExtent = getProjection('EPSG:3857')?.getExtent();
const baseResolution = getWidth(projExtent) / 256;
function resolutions(maxZoom) {
  const r = [ baseResolution ];
  for (let z = 1; z <= maxZoom; z++)
    r.push(r[r.length - 1] / 2);
  return r;
}

const props = defineProps(['layer', 'map',])

const instancedLayer = ref(null)

const removeLayer = () => {
    props.map.removeLayer(instancedLayer.value);
}

const addLayer = () => {
    const tileLayerToBeAdded = new ImageTileLayer({
        zIndex: 2,
        source: new MBTilesRasterSource({
          url: props.layer.url,
          attributions: [
            'asd',
          ],
          tileGrid: new TileGrid({
            origin: [projExtent[0], projExtent[2]],
            // These must be known
            extent: props.layer.extent,
            minZoom: props.layer.minZoom,
            Zoom: props.layer.Zoom,
            resolutions: resolutions(16)
          }),
        }),
        });
        props.map.addLayer(tileLayerToBeAdded);
}

onMounted(() => {
  console.log("🧩 " + props.layer.id + " mounted")
  addLayer()
})

onUnmounted(() => {
  console.log("🧩 " + props.layer.id + " unmounted")
  removeLayer()
})

</script>

[d-koppenhagen]

@marcomilone I don't want to introduce another 3rd party dependency in this project since it's based on the original ol and ol-ext components. But I understand the need for it. Since the lib provides multiple layers and injectables, you should be able to simply create a component by your own and connect it with this lib. I will add a documentation site with instruction of how to do this.

[d-koppenhagen]

If you like to create a libs based on your suggestion from Dec 28 as an own repo / publishable lib following the instrcution I would be happy to assist you.

[marcomilone]

Hi, thank you for your kind reply. I don't feel good enough to make a lib and my solution is nothing more than a (working!) draft.

I understand that you don't want to include another (heavy) dependency.

As you say a perfect solution could be a library depending from

• vue3-openlayers
• ol-mbtiles

that will provide some new source types (raster/vector mbtiles) to you library.

That said, I hope this code (in this thread) could help someone else. I'm using it with much satisfaction.

But I'll think about.

Thanks! 👋

[d-koppenhagen]

@marcomilone I am still thinking about creating it- probably at another place / repo. One problem I have: I don't have a public server for a demo / testing purpose. Do you have access to one?

[marcomilone]

@d-koppenhagen I gave a look to the code you shared

Doesn't seem too much complicated

For the demo/testing I could also use gitlab pages or I can start locally

I never published on npm, but I should start, with your help? Thank you so much to try to involve me.

As last, I'm afraid of becoming a maintainer... 😱 Must be an hard life