I divide the map into squares with Mapbox-GL and trufjs and the grid is created.

I want to select some of these frames with the mouse and add pictures to the selected frames.

The image should be above the map and grid lines.

Image 1.2

I can add the image with the mapbox source. but for 300 small squares http://mydomain.com/assets/myimage.png Trying to download the image repeatedly with 300 requests from the address as in the example code below. and even if this process takes 1ms it is horribly slow.

    for (let box in tile.area_boxes) {
      let bbx = tile.area_boxes[box];
      let bbox = [bbx.BoxOne, bbx.BoxTwo, bbx.BoxTree, bbx.BoxFour];
      const coordinates = [
        [bbox[2], bbox[3]],
        [bbox[0], bbox[3]],
        [bbox[0], bbox[1]],
        [bbox[2], bbox[1]],
      let s = Map.getSource("myImageSource" + bbx.uid);
      if (!s) {
        Map.addSource("myImageSource" + bbx.uid, {
          type: "image",
          url: strapi + "/.." + ads.icon.url,
          coordinates: coordinates,
          id: "overlay" + bbx.uid,
          source: "myImageSource" + bbx.uid,
          type: "raster",
          paint: { "raster-opacity": 0.85 },

Image 1.1

I want to do:

1 time download the picture. and copy hundreds of copies to the locations I specify.

Attention! : this is not a map marker. this is an image to be superimposed over a square. its size depends on the zoom ratio and should never extend beyond the frame.

  • Is it possible to save and reference these images locally on your machine / server? May 18 at 21:18

1 Answer 1


This is not really a GIS question but more of a general HTML/JS nature, but anyway, here's how you can solve this.

You can read each image that has to be repeated only once, draw it on the canvas and convert canvas to data-URL string with .toDataURL method. This URL string can then be used as a source URL for your repeated images.

Function to convert image to data-URL could look something like this:

function toDataURL(src, callback, outputFormat) {
  let image = new Image();
  image.crossOrigin = 'Anonymous';
  image.onload = function () {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
  image.src = src;

Function is async and so returns result via callback function. Default image format is image\png.

You can then store all your image URL strings in some object from which can they later be retrieved by their ids. Code could look something like this (not tested):

var imageDataUrl = {};

function storeImage(imageUid) {
  var uid = imageUid;
  toDataUrl("myImageSource" + uid, function(dataUrl) {
    imageDataUrl[uid] = dataUrl;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.