[ Whereis® API Home ] [ Developers' Guide ] [ JS Services ]
There are cases where an interactive map is not required, for example if you wish to provide a printable version. The static map service allows you to GIF or PNG image of a map, that is identical in appearance to a Whereis API map.
The static map service has one method available to create a static map:
- create(query, callback)
To create a static map, perform the following steps.
- Initialise the Static Map service.
- Format the request.
- Submit the request, nominating a callback function.
If the request succeeds, the API returns a Static Map object.
4. Process the response within the callback function.
Sample request
The following code snippet performs a simple static map request and displays the map in the page.
// Initialise the static map service
var service = new EMS.Service.StaticMap();
//Format request
var query = {
"layers":["STREET"],
"centre":{"lon":144.965509, "lat":-37.810921},
"width": 600,
"height":400,
"radius": 5000,
"mapData":[]
};
//Submit request
service.create(query, callback);
//Handle the response
function callback (response, status){
// Check the status of the result is non-error
if (status == EMS.Status.OK) {
// Success! create an image and add it to your document
var imgDiv = document.createElement("img");
imgDiv.src=response.url;
var body = document.getElementsByTagName("body");
body.appendChild(imgDiv);
}
});
There are four ways to request a map. The service determines which method to use by interpreting your request data. Here are examples of the four different request types:
By radius - include center point and a radius (in meters) to set the map viewport. For example:
var query = {
"layers":["STREET"],
"centre":{"lon":144.965509, "lat":-37.810921},
"width": 600,
"height":400,
"radius": 5000, //radius in metres
"mapData":[]
};
By zoom. include center point and zoom to set the map viewport, For example:
var query = {
"layers":["STREET"],
"centre":{"lon":144.965509, "lat":-37.810921},
"width": 600,
"height":400,
"zoom": 10, // a number between 1 and 18, representing zoom level
"mapData":[]
};
By bounds - include bounds to set the map viewport
var query = {
"layers":["STREET"],
"bounds": {
"top":-37.797358,
"left":144.93976,
"bottom":-37.824482,
"right":144.991258
},
"width": 600,
"height":400,
"mapData":[]
}
By geometry - the viewport is set as the smallest viewport fully containing the geometry provided by the mapData property
var query = {
"layers":["STREET"],
"width": 600,
"height":400,
"mapData":[{
"type":"ellipse",
"values": [
{"centre": {"lon":144.965509,"lat":-37.81092}, "radiusX":75, "radiusY":50},
{"centre": {"lon":144.945,"lat":-37.80}, "radiusX":50, "radiusY":75}
{"centre": {"lon":144.975,"lat":-37.78}, "radiusX":63, "radiusY":63}
]
}]
};
Inclusion of mapData geometry in a radius, zoom or bounds request will simply render the geometry, with viewport being calculated by the provided location properties.
Full details of request and response object parameters are set out in the JSON API.
Full details of request and response object parameters are set out in the JSON API.