How to add image from mobile storage to mapbox-gl? - vue.js

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.

Turns out the mapbox-gl-js library had a bug in version 1.x that prevented the image from showing on mobile.
Upgraded to version 2.0.1 and it worked.

Related

Image caching in Github?

Is there any caching policy of images in GitHub?
I am facing trouble while rendering an image from an API. The image works fine when I open it in the browser.
However, Github renders some older version of that image.
How can I workaround this issue or is there any fix?
Considering this netlify/netlify-cms PR, maybe adding the ts=$(date) as parameter of a GitHub API v3 call would be enough of a "cache busting" for your need.
From the code:
const cacheBuster = new Date().getTime();
const params = [`ts=${cacheBuster}`];
if (options.params) {
for (const key in options.params) {
params.push(`${ key }=${ encodeURIComponent(options.params[key]) }`);
}
}
if (params.length) {
path += `?${ params.join("&") }`;
}
return this.api_root + path;
This adds a &ts=xxx timestamp parameter to the api.github.com call.

Cannot fit bounds in mapbox-gl , in Vue app

I am using vue 2.6.10 and I have the following dependencies vue-mapbox 0.4.1 and mapbox-gl 1.3.2
The map works, but I cannot get all the points of the map, create bounds and make the map zoom there.
What I am doing now, based on this and this
In my template
<MglMap
ref="map"
#load="mapLoaded()">
and then in my javascript
import Mapbox from "mapbox-gl";
components: { Mapbox}
methods :{
mapLoaded(){
let coords = [];
//coords is array , contains arrays like [-118.578, 51.524]
let bounds = coords.reduce((bounds, coord)=> {
return bounds.extend(coord);
}, this.mapbox.LngLatBounds(coords[0], coords[0])
);
this.$refs['map'].map.fitBounds(bounds, { padding: 20 });
}
},
created(){
this.mapbox = Mapbox;
}
This should work, but I keep getting
TypeError: this.setSouthWest is not a function
so I guess there is a problem in this.mapbox.LngLatBounds(coords[0], coords[0]) , maybe the this.mapbox. or the LngLatBounds does not work.
If I console log the coords[0], prints an array [10.467778, 37.600833]
What am I missing? Thanks
I have got the same error. Turns out I have missed "new" keyword.
You can try adding the "new" keyword for "this.mapbox.LngLatBounds"
The following code worked for me.
import mapboxgl from 'mapbox-gl';
Vue.prototype.$maps = mapboxgl
this.map = new this.$maps.Map({container: 'mapContainer', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
zoom: 9 // starting zoom
});
const sourceMarker = new this.$maps.Marker().setLngLat(origin).addTo(this.map);
const destMarker = new this.$maps.Marker().setLngLat(destination).addTo(this.map);
const bounds = new this.$maps.LngLatBounds(origin, destination);
this.map.fitBounds(bounds);

Html2canvas screenshot is used but the screenshot is very different from the original

Html2canvas screenshot is very different from the original picture. How to solve it
This is the address of my code https://github.com/cxm1308377432/html2canvas-screenshot
The above is the interface written with vue-grid-layout, you can modify the layout at will, and the below is the screenshot, but the two are very different
function download() {
var this1 = this;
setTimeout(function() {
html2canvas(this1.$refs.mine, { backgroundColor: null }).then(canvas =>
{
let dataURL = canvas.toDataURL("image/png");
this1.downImg = dataURL; console.log(dataURL);
});
}, 1000);
}
You better have a screenshot to show how different it is. But from my experience when I'm working with that library (html2canvas), the canvas can't render from difference origin. That's CORS problem. Unlucky, I haven't found any solution for this situation.
I read your source but can't found any image url so please update your answer with screenshot.

Sharing image generated from html canvas on FB

This one I've been banging my head against for a few weeks now.
Scenario:
Let user generate an image out of layers they select
Convert image to canvas
Share image from canvas on facebook wall using share_open_graph (along with the image, a short text and title will be shared)
I've already had a solution in place using publish_actions but that was recently removed from the API and is no longer available.
I am using js and html for all code handling.
The issue is that I can generate a png image from the canvas but that is saved as base64 and share_open_graph doesn't allow this type of image, it needs a straight forward url such as './example.png'. I have tried using several approaches and with canvas2image, converting and saving image using file-system but all of these fail.
Does anyone have similar scenario and possible solution from April/May 2018 using share_open_graph ?
My current code looks like this - it fails at the image conversion and save to a file (Uncaught (in promise) TypeError: r.existsSync is not a function at n (file-system.js:30)). But I am open to different solutions as this is clearly not working.
html2canvas(original, { width: 1200, height: 628
}).then(function(canvas)
{
fb_image(canvas);
});
var fb_image = function(canvas) {
canvas.setAttribute('id', 'canvas-to-share');
document.getElementById('img-to-share').append(canvas);
fbGenerate.style.display = 'none';
fbPost.style.display = 'block';
var canvas = document.getElementById('canvas-to-share');
var data = canvas.toDataURL('image/png');
var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
var decodedPng = base64.decode(encodedPng);
const buffer = new Buffer(data.split(/,\s*/)[1], 'base64');
pngToJpeg({ quality: 90 })(buffer).then(output =>
fs.writeFile('./image-to-fb.jpeg', output));
var infoText_content = document.createTextNode('Your image is being
posted to facebook...');
infoText.appendChild(infoText_content);
// Posting png from imageToShare to facebook
fbPost.addEventListener('click', function(eve) {
FB.ui(
{
method: 'share_open_graph',
action_type: 'og.shares',
href: 'https:example.com',
action_properties: JSON.stringify({
object: {
'og:url': 'https://example.com',
'og:title': 'My shared image',
'og:description': 'Hey I am sharing on fb!',
'og:image': './image-to-fb.jpeg',
},
}),
},
function(response) {
console.log(response);
}
);
});
};

Saving Screenshot of the web page that has Cesium

I'm trying to add a button to my interface that will download a screenshot taken of the web page.
It works for the side bar but my Cesium map appears plain white.
Can someone help me out with is?
Here is a code
var Capture = function() {
html2canvas(document.body, {
onrendered: function (canvas) {
var tempcanvas=document.createElement('canvas');
tempcanvas.width=1050;
tempcanvas.height=1050;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,5,5);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS
link.download = 'screenshot.jpg';
link.click();
}
});
}
This was based on the question asked here
So the answer turned out to be by using scene.canvas.
I was directed to this solution by a similar question on the Cesium Forum.