Adding image in Mapbox - what about the source?

Question

I want to add an image in my map which I prepared in mapbox. I read the documentations but the problem is that I cannot find how to upload the image from my pc to mapbox as in all the examples seem to have some source through mapbox that gets to the image. So can I upload my image somewhere in mapbox? If not, what's the other solutions?

Answer 1

We might have a language barrier, but are you asking how to add an image to the map outside of Mapbox studio? If so, here is an example that I use for a weather app. Note, I have it set as "hidden" but you can modify this as you need. I don't have time to modify it much for you at the moment, but you were asking "what about the source" and I have a solution below. Hopefully this can work for your needs. I have added some comments.

 map.on('load', function() {
          map.addSource("source_KEWX_L3_KDP", {   // adding a source
            "type": "image", // specify type
            "url": "images/KEWX_L3_KDP.gif", // URL
            "coordinates": [

[-102, 33],  
[-94, 33],   
[-94, 26], 
[-102, 26]      
        ]
      })



// The following code places the image underneath my labels, this is not required.
var layers = map.getStyle().layers;
    // Find the index of the first symbol layer in the map style
    var firstSymbolId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol') {
            firstSymbolId = layers[i].id;
            break;
        }
    }

      map.addLayer({ // Now we add the layer we created previously
        "id": "overlay_KEWX_L3_KDP",
        "source": "source_KEWX_L3_KDP",
        "type": "raster",
"layout": {"visibility": "hidden"},
   "paint": {

    "raster-fade-duration": 0
  },




      }, firstSymbolId)
    });