Google / Mapbox static maps displaying custom image with certain bounds

by Huskie69   Last Updated October 09, 2019 15:22 PM

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 = "" +
            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:,4.744135&zoom=7&size=640x640&scale=4&format=png&key=APIKEY&maptype=hybrid

And produces this map: 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: Map with custom overlay

The closest thing I've seen is an implementaion of Google Maps GL JS where an overlay can be added:

This is essentially what I'm trying to do, albeit with Static Maps. Static Maps does not allow you to add custom raster overlays.

Related Questions

Overlay large polygon data source in Google Maps

Updated July 21, 2017 01:22 AM

Vector tile layers over 3D terrain

Updated August 31, 2018 17:22 PM

How to get a GML overlay on Google Maps?

Updated April 30, 2015 21:09 PM

kml/kmz files not loading by google maps anymore

Updated June 27, 2015 13:09 PM