I've been trying to add an image overlay to mapbox-gl-js on a project that uses Ionic 5 + Vue.js, similar to what Leaflet does, but i cannot get it to work.
The only way that I can get it to work is by following this tutorial, but the image does not fit properly into the polygon. I've also tried this, and I can see when Capacitor requests the image, but it does not load. It works fine on Chrome, but on mobile it does not.
This is the code that I have now:
const { map } = this;
if (map.getLayer(layerId)) {
map.removeLayer(layerId);
}
if (map.getSource(sourceId)) {
map.removeSource(sourceId);
}
map.addSource(sourceId, { ...source, url: Capacitor.convertFileSrc(source.url) });
map.addLayer(layer);
whereas the source and layer objects are like this:
const sourceId = `${talhao.id}-image`;
const layerId = `${talhao.id}-image-${image.id}`;
const bbox = getBoundingBox(talhao);
const source = {
type: "image",
url: image.imagemPng,
coordinates: [
bbox.getNorthWest().toArray(),
bbox.getNorthEast().toArray(),
bbox.getSouthEast().toArray(),
bbox.getSouthWest().toArray()
]
};
const layer = {
id: layerId,
source: sourceId,
type: "raster",
paint: {
"raster-opacity": 0.85
}
};
Any help would be appreciated!
edit: It is worth noticing that I do not think that the image is the problem here, because I use the same image in another part of the screen that I'm working and it loads fine.
