CODEWITHSUNDEEP
javascripthtmlleafletpngoverlay
Skane
Skane

Reputation: 103

Leaflet Overlay with created PNG

I created a png picture and wanted it do display on a leaflet map.

I tried it like in the code below but it does not work.

(net::ERR_FILE_NOT_FOUND)

Any Ideas how i could do this? Here is the code.

    var pic = new PNGlib(200, 200, 256);      
    var background = pic.color(23, 0, 0, 50); 

    var my_png = pic.getBase64()

    var overlay = new L.ImageOverlay(  my_png   , bounds, {opacity: 0.5,});
    mymap.addLayer(overlay);

Upvotes: 0

Views: 1413

Answers (1)

Cyril Wallis-Davy
Cyril Wallis-Davy

Reputation: 337

I think you have a URI problem. You need to add a "data:image" for your image to appear. MDN data URLs

You can see an example that works on my codesandbox.

var pic = new PNGlib(200, 200, 256);      
var background = pic.color(23, 0, 0, 50); 

var my_png = pic.getBase64()
const b64ImgUrl = `data:image/png;base64,${my_png}`;

var overlay = new L.ImageOverlay(  b64ImgUrl   , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);

Upvotes: 1

Related Questions