Page Comparison

iShare GIS has a plugin system which allows you to add buttons and dialogues which you can use for custom functionality. This guide describes that system and takes you through the steps for creating a custom plugin.

Prerequisites

• An understanding of how to write and debug JavaScript

Overview

The plugin system is already used to add the Standard and Advanced toolbars into iShare GIS, but can be customised to add/remove buttons as required. It accomplishes this by reading a specific XML file for a Map Source, or if one isn't specified, the default one. This XML file describes which plugin to add, each of which is a sub-folder of the folder containing the XML file.

Default Plugins

The default plugins XML file (/web/plugins/iShareGIS.xml) contains the following:

...

Custom Plugins

In order to prevent your custom plugins being lost when you upgrade your version of iShare GIS, custom plugins are kept under the \web\custom\plugins folder.  This folder must contain at least one XML file defining however many custom plugins are required.

...

Anchor
pluginxml pluginxml

The Plugin XML

<Plugin>
	<Name>drilldown</Name>
	<Description>Enables Enables interactive selecting of features from pre-defined layers via the map</Description>
	<Category>advanced</Category>
</Plugin>

...

This can be either "standard" or "advanced" and determines whether the button is positioned on the iShare GIS toolbar to the right or left respectively.

Anchor
pluginjs pluginjs

The Plugin JavaScript

The commands for adding components are fairly straightforward, and can be broken into three main commands; installButton, installDialog and installPanel.

Anchor
name name

installButton(config, category, profile);

This adds a button to iShare GIS.

InstallDialog(name, config, category, profile);

This adds a dialog to iShare GIS which can be referenced by a button - using the dialog property of the installButton object.

installPanel(name, config, category, profile);

This adds a panel to iShare GIS which can be referenced by a button.

Anchor
examples examples

Examples

Hello World!

This simple example will display a windows alert with the words "Hello World!" in it.

Astun.JS.Plugins.installButton(
	{
		name: "helloWorldButton",
		type: "",
		dialog: null,
		hideOnEmptyDialog: false,
		text: 'My Button',
		tooltipTitle: 'Hello world!',
		tooltip: 'This shows the Hello World dialogue',
		click: function() {
			// This function is called when the button is clicked
			window.alert('Hello World!');
		}
	}
);

Active Layers

This plugin will display a dialog which lists all of the active layers and shows the layers legend image.

...

div.ishare-layerquery li {
	list-style:none;
	padding-bottom:16px;
}

div.ishare-layerquery img {
	display:block;
}

Result

This produces the following output in a dialog:

CurrentView

This plugin will produce an image of the current view of the map.

...

div.ishare-currentview img {
    max-width: 800px;
}
div.ishare-currentview {
    text-align: center;
}

Result

This produces the following output in a dialog:

ViewQuery

The new plugin we are going to create is called ViewQuery and will by a mixture of what was covered in the examples and also new topics. The plugin will take your current view and output the following:

...

div.ishare-viewquery {
	text-align: center;
}
div.ishare-viewquery table {
	border: 1px solid #666;
	border-collapse: collapse;
	margin-bottom: 16px;
}
div.ishare-viewquery td, 
div.ishare-viewquery th {
	border: 1px solid #666;
	padding: 8px;
}
div.ishare-viewquery th {
	background-color: #ccc;
}
div.ishare-viewquery .sitereport-mapcontainer {
	margin-bottom: 16px;
	text-align: center;
}
div.ishare-viewquery img {
	border: 1px solid #666;
	max-height:600px;
}
div.ishare-viewquery caption {
	font-weight: bold;
	margin-bottom: 8px;
}

Result

This produces the following output in a dialog:

...