Integrating with the Map Builder Control Panel

Introduction

Maprosoft can be integrated with content management systems so that web developers can build maps using Maprosoft, but from within their content management system.

The integration is achieved by including the Map Builder Control Panel into the content management system using an <iframe>. The Map Builder Control Panel provides notifications each time the user changes any options affecting the code that it generates. These events can be processed by Javascript within the page containing the <iframe>.

It should be noted that this technique depends on the both the content management system and Maprosoft running on the same team. For further information, refer to http://en.wikipedia.org/wiki/Same-origin_policy.

Including the Map Builder Control Panel

As stated previously, the Map Builder Control Panel can be included in an external page using an <iframe> element. To avoid having to log in, the Maprosoft administration username can be passed in as a parameter.

The 'preview' and 'generated code' sections of the Map Builder Control Panel can be hidden by setting the ShowPreviewSection and ShowCodeSection parameters to 'no':

Event Processing

The hosting page can receive Map Builder Control Panel events by declaring a Javascript function as follows:

function parameterHandler(outputType, url, htmlCode) {...}

The parameters are defined as follows:

  • outputType: This identifies the type of output chosen by the user. The various options are as follows:
    • Standalone: Indicates the user has selected they just need a link to a page showing the map.
    • PopupLink: Indicates the user has selected they wish the map to appear when a link is clicked. The are various ways that this can be achieved, and they usually involve including extra styles and javascript on the page that the link appears in. Because of this, the generation of suitable code is left up to the implementation consuming these events.
    • EmbeddedHTML: Indicates the user has selected they wish the map to be embedded in another web page. The simplest way to achieve this is using an <iframe>. The htmlCode provides suitable code achieving this.
  • url: This URL will result in Maprosoft producing a page corresponding the options entered in the Map Builder Control Panel.
  • htmlCode: This HTML code can be copied into a website to produce a map displayed within an <iframe>.

Example Code

Here is a complete example showing how this works:

<!doctype html>
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Map Builder Integration</title>
	</head>
 	<body>
 	
		<!-- start: example -->
		
		<iframe 
			src="/cms/admin?password=some-password&initialPlace=Map%20Builder&ShowPreviewSection=no&ShowCodeSection=no" 
			style="width:100%;height: 900px;">
		</iframe>
		
		<script type="text/javascript"><!--
		function parameterHandler(outputType, url, htmlCode) {
			var urlTextArea = document.getElementById("urlInput");
			urlTextArea.innerHTML = url;
			var htmlCodeTextArea = document.getElementById("htmlCodeInput");
			htmlCodeTextArea.innerHTML = htmlCode;
			var outputTypeCheckbox = document.getElementById("outputTypeInput");
			outputTypeCheckbox.value = outputType;
		}
		//--></script>
		
		<form>
			<table>
				<tr>
					<td>
						Frame URL: 
					</td>
					<td>
						<textarea id="urlInput" rows="4" cols="120">
						</textarea>
					</td>
				</tr>
				<tr>
					<td>
						HTML Code: 
					</td>
					<td>
						<textarea id="htmlCodeInput" rows="10" cols="120">
						</textarea>
					</td>
				</tr>
				<tr>
					<td>
						Output Type:
					</td>
					<td>
						<input id="outputTypeInput" type="text" size="120"/>
					</td>
				</tr>
		</form>

		<!-- end: example -->
	</body>
</html>