Two issues have caught my attention recently, and I find myself delving into research to understand them better.
The first one revolves around the mysterious process of adding a canvas to my map. Despite my efforts, I can't seem to find a straightforward example that works efficiently. I've explored the Mapbox API documentation at this link, but it doesn't provide a clear demonstration like an image overlay does.
While the API outlines how to add a canvas source, there's a lack of guidance on displaying it on the map. Am I overlooking something in the instructions, or is this aspect simply missing? A working example of an image source would be helpful for comparison purposes.
My current project involves showcasing weather radar data. Once I crack the code on incorporating a canvas source and displaying it properly, my next objective is to create tooltips that reveal data values upon hovering over specific areas. Each color on the canvas corresponds to a precise numerical value, making it easier for users to interpret the information (e.g., #63C2FF = 15.4, #469B00 = 23.4, #FDF900 = 31.5, etc).
Is it feasible to implement these interactive features using MapBox GL JS? While online sources suggest utilizing a canvas, practical examples are scarce. Even a simple code snippet representing a 10px by 10px image with just two colors would go a long way in helping me grasp the concept. Although I anticipate challenges such as image refreshment, I feel confident about troubleshooting those once I overcome the initial hurdle.
Below is functional code for an image overlay that I currently employ successfully. Could a canvas exhibit similar behavior within this framework?
map.on('load', function() {
map.addSource("source_KEWX_L2_REFLECTIVITY", {
"type": "image",
"url": "images/KEWX_L2_REFLECTIVITY.gif",
"coordinates": [
[-103.009641, 33.911],
[-94.009641, 33.911],
[-94.009641, 24.911],
[-103.009641, 24.911]
]
})
map.addLayer({
"id": "overlay_KEWX_L2_REFLECTIVITY",
"source": "source_KEWX_L2_REFLECTIVITY",
"type": "raster",
"raster-opacity": 0.5,
"layout": {
"visibility": "none"
},
})
});
Lastly, envisioning how this functionality should ideally operate, I aspire to achieve results akin to the following example image: