I have a process which generates a simple Google Static Map (can also be a MapBox static image as the code is pretty much interchangeable).
It's recycled code from a project I found years ago.
The final map url creation string is something like this:
var mapurl = "https://maps.googleapis.com/maps/api/staticmap?center=" +
center[1].toFixed(6) + "," + center[0].toFixed(6) +
"&zoom=" + zoominfo.zoom + "&size=" + mapsize.width + "x" + mapsize.height + "&scale=4&format=png&key=APIKEY" + mapStyle
Lets say a URL string is this:
https://maps.googleapis.com/maps/api/staticmap?center=42.803331,4.744135&zoom=7&size=640x640&scale=4&format=png&key=APIKEY&maptype=hybrid
And produces this map:
What I'd like to do is set up a bounding box for a specific set of lat/lon co-oridnates, and if the the url generated comes within those bounds, a seperate "customised" image is instead shown as an overlay. Think of this as essentially a custom map tile, nothing to do with google or mapbox static maps.
This map tile represents a particular region on earth, aligned to specific co-ordinates.
The end result would be something like this:
The closest thing I've seen is an implementaion of Google Maps GL JS where an overlay can be added: https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/
This is essentially what I'm trying to do, albeit with Static Maps. Static Maps does not allow you to add custom raster overlays.
