Static maps are PNG images generated on-the-fly with the OTMaps library. It works by converting a query string into Javascript and then executing it in a headless browser and then serving the generated image.
Each method name represents a URL parameter which is an associative array representing the arguments for that method. For example:
&addZip[zip]=34683 is converted to map.addZip({zip:'34683'}).
Any arguments you want passed to the constructor will be passed as the OTMap parameter. So, for example, pass an array of lng and
lat to the "center" property of the constructor arg: OTMap[center][]=-81.379234&OTMap[center][]=28.538336
In addition to the arguments provided by the OTMaps library, you may also pass a "w" and/or an "h" in the url to specify the number of pixels wide and tall the image should be.
Also, you must pass your API key in the URL as well.
This URL: https://mercury.ourtownamerica.com/staticmap/?key={My API Key}&OTMap[center][]=-81.379234&OTMap[center][]=28.538336
will generate the following image of Florida:
The OTMaps library provides a way to get an <img> object or the URL of the static image of the map via the getImage() and getStaticURL() methods.
<html>
<head>
<style>
#myDiv{
margin: 1em;
border: 1px solid black;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="myDiv">Loading...</div>
<script src="https://mercury.ourtownamerica.com/basemap/widget.js?key={My API Key}"></script>
<script>
new OTMap({id: "myDiv"})
.addZip({zip: "34683"})
.getImage(function(img){
if(false === img) return alert("Image timed out. Simplify map and try again.");
document.body.appendChild(img);
document.getElementById('myDiv').style.display = "none";
});
</script>
</body>
</html>