Interacting with the Map

There are various different ways of using iShare to integrate maps within a website. Have a look at the following examples:

1 Centre the Map on a Point
- 1.1 JQuery
  - 1.1.1 jQuery Example
- 1.2 JavaScript
  - 1.2.1 Solo Map Example
  - 1.2.2 Lite Map Example
- 1.3 URL
  - 1.3.1 URL Example
2 Find a Feature on the Map
- 2.1 JQuery
  - 2.1.1 jQuery Example
- 2.2 JavaScript
  - 2.2.1 JavaScript Example
3 Set the Scale for the Map
- 3.1 JavaScript
  - 3.1.1 JavaScript - Zoom to Scale
  - 3.1.2 JavaScript Zoom To
4 Add or Remove Layers from the Map
- 4.1 JQuery
  - 4.1.1 JQuery Example
- 4.2 JavaScript
  - 4.2.1 JavaScript Example
  - 4.2.2 Get Current set of Layers
- 4.3 URL
  - 4.3.1 URL Example
  - 4.3.2 URL Example

Centre the Map on a Point

In this event, the zoom actually refers to the desired width of the map in metres. This is for backwards compatibility. If any of easting, northing or zoom are not supplied the current values are used.

JQuery

jQuery Example

jQuery('#atMap').trigger('mapMove', [{easting: easting_value, northing: northing_value, zoom: zoom_value}])

JavaScript

The map will be displayed at the My Maps Startup view unless you specify a “view” parameter on the createMap call. The following examples show how to display a point at a Zoom Level of 2000 and Easting and Northing coordinates of 495553 and 175654 respectively in both a Solo or Lite map.

Solo Map Example

soloMap.createMap('atMap', { 
	themeName: 'base', 
	mapSource: 'Workshop/AllMaps', 
	layers: 'Primary Schools,Secondary Schools',
    view:{easting:495553, northing:175654, zoom:2000}
});

Lite Map Example

<script type="text/javascript">
	liteMap.createMap('atMap', { 
		mapSource: 'Workshop/AllMaps', 
		layers: 'Primary Schools,Secondary Schools',
		view:{easting:495553, northing:175654, zoom:2000}
	});
</script>

URL

Again, zoom_value is the backwards compatible width of the map in metres. If any of the parameters are not passed then all three are ignored (note this is different to the jQuery method)

URL Example

?StartEasting=easting_value&StartNorthing=northing_value &StartZoom=zoom_value

Find a Feature on the Map

This can be done by searching a given layer for a value, the feature with a specified field matching that value is zoomed to.

JQuery

jQuery Example

jQuery('#atMap').trigger('searchISM',[layer_name,field_name,search_string]);

JavaScript

JavaScript Example

window.astun.mapWrapper.searchISMLayer( layer, field, value, function( response ) {
 window.astun.mapWrapper.showResults( response );
} );

Set the Scale for the Map

The previous methods for a point can be used provided you know the width in metres you want to zoom to.

JavaScript

You can zoom to a scale or zoom level using the OpenLayer map object window.astun.mapWrapper.map and manipulate it directly.

JavaScript - Zoom to Scale

astun.mapWrapper.map.zoomToScale()

and

JavaScript Zoom To

astun.mapWrapper.map.zoomTo()

See full list of methods at: http://dev.openlayers.org/docs/index/General.html.

This method of access to the map is deprecated and may be removed in future versions - but only once we provide alternative methods of getting to the map object.

Add or Remove Layers from the Map

A full list of available layers can be found in your map configuration in iShare Studio; the layers are under Map Sources. The layer names are case-sensitive.

JQuery

JQuery Example

jQuery('#atMap').trigger('showLayer',[layer_name]) jQuery('#atMap').trigger('hideLayer',[layer_name]) jQuery('#atMap').trigger('toggleLayer',[layer_name])

Only one layer can be specified at a time.

JavaScript

JavaScript Example

window.astun.mapWrapper.addISMLayer(layer_name); window.astun.mapWrapper.removeISMLayer(layer_name); window.astun.mapWrapper.setISMLayers(layer_names);

layer_names in the last method are a comma separated list and replace the existing set of layers on the map. You can get the current set of layers too:

Get Current set of Layers

window.astun.mapWrapper.getISMLayers();

URL

URL Example

?l=layer_names

or

URL Example

?layers=layer_names

These are equivalent, layer_names are a comma separated list.