Page Comparison

Overview

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:

<PluginView>
  <Plugin>LayerPanel</Plugin>
  <Plugin>Edit</Plugin>
  <Plugin>Find</Plugin>
  <Plugin>Output</Plugin>
  <Plugin>Layers</Plugin>
  <Plugin>BaseMap</Plugin>
  <Plugin>Profiles</Plugin>
  <Plugin>Select</Plugin>
  <Plugin>View</Plugin>
</PluginView>

...

The plugins folder has the following subfolders:

...

Image Added

As you can see, each plugin name references a sub-folder, and in each sub-folder, there are three files, all named the same as the sub-folder, but with different extensions e.g.

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.

In order for iShare GIS to load your custom plugins, you will need to manually add a PluginViews section, pointing to both the default iShareGIS.xml and your CustomPlugins.xml file, to any Map Source where you wish the plugins to be available as shown here.

<MapSource version="200" guid="012345678-9abc-def0-1234-56789abcdef">
  <LayerGroups>
    ...
  </LayerGroups>
  <PluginViews>
    <PluginView>plugins/iShareGIS</PluginView>
	<PluginView>custom/plugins/CustomPlugins</PluginView>
  </PluginViews>
</MapSource>

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:

Image RemovedImage Added

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:

Image RemovedImage Added

ViewQuery

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

• A small map of your current view
• A list of features shown on the map for each layer

...

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:

Image RemovedImage Added