Map API

Maps are provided as a cloud based system. Setting up the maps occurs through the web based Tile Editor. The Tile Editor provides a dashboard to allow a user to:

• Drag and drop data into the account
• Arrange layers into maps
• Style the layers
• Configuring the geocoding

The map can be embedded into a web page as either an iframe or a JavaScript object. Embedding the map as an iframe provides a quick and simple approach to embedding a map into the flow of an existing web page. Embedding the map as a JavaScript object allows for custom interactions with the page or to integrate with another third party system. Such as plotting all development applications on the map or providing further information about a property from another system.

Embedding as an iframe

Emedding as an iframe provides the simplest approach as it just involves adding an iframe html tag into an existing web page.

HTML

<iframe id="map1" src="http://macrogis.ddns.net/scripts/1.0.7/map.html" style="height: 640px; width: 100%;" frameborder="0"></iframe>

Embedding as a JavaScript object

To setup the map as a JavaScript object a placeholder div is placed in the location on the page where the map is to be displayed. Once executed the div will be populated with map.

Required include files,

http://maps.google.com/maps/api/js?sensor=true&libraries=geometry
http://maps.macrogis.com.au/tiles3/scripts/map/1.0.7/icon-map.js
http://maps.macrogis.com.au/tiles3/scripts/map/1.0.7/icon-map.css

macrogis.maps.IconMap class

Constructor

macrogis.maps.IconMap(div:String, options:IconMapOptions, callback:Function)

Arguments

Name	Type	Default	Description
div	String	null	The id of the div element the map will populate. Ensure that the div has a width and height. Especially a height, the default height for a div is 0px.
options	Object	null	The options to pass into the map.
callback	Function	null	The callback function is executed once the map has loaded.

Options

Name	Type	Default	Description
account	string	null	The account of the map.
context	string	null	The context name of the map in the account.

Methods

Methods	Return Value	Description
zoomIn()	None	Populate a location object wiithout user interaction. Useful for geocoding purposes.
zoomOut()	None	Add a location to the map.
selectParcelByPID(pid:String, callback:Function)	None	Reset the map to the default state.
onSelected(callback:Function)	None	The callback function will be executed whenever a user selects a parcel on the map.
addLink(context:String, title:String, href:String)	None	Add a link to the property information. The context is the name of the map to append the link to. The link will use the title and href.

Example 1 - Embedding the map (JavaScript)

This is the minimal set of commands to set the map up as a JavaScript object.

HTML

<div id="map1" style="height: 640px"></div>

Javascript

var options = {
	account: "lockyer",
	context: "Zoning"
}
				
map = new macrogis.maps.IconMap("map1", options);

Example 2 - onSelected callback (JavaScript)

Provides an example of using the "onSelected" callback. This command will notify the calling page whenever a user selects a parcel on the map. This is allows the calling page to perform some action such as retrieving additional information about a parcel from another system. When the user clicks on the map the text area just below the map is populated with the selected parcels details.

HTML

<div id="map1" style="height: 640px"></div>

Javascript

var options = {
	account: "lockyer",
	context: "Zoning"
}
				
var map2 = new macrogis.maps.IconMap("map2", options, function() {
	map2.onSelected(function(json) {
		$('#text2').val(JSON.stringify(json.response,null,2));
	});
});