Embedding the SPOT Live Map Widget (version 2.0) in your WebSite : Hosted

The SPOT Live Map Widget is a JavaScript widget that can be embedded into the client's website. It retrieves the 50 most recent messages from the SPOT API via an AJAX call for a given public shared page feed id. These public share pages can be created in the main SPOT account administration site (http://login.findmespot.com). The glId parameter in the shared page URL is the feed id that needs to be passed to the widget.

Version 2.0 Updates

Updated Instructions: Google requires an API key for anyone that uses their maps. As a result, in order to use our map widget, you will need to get an API key from google Click here to get API key

Note: You may need to enable the Google Maps JavaScript API under APIs in the Google API Console.

- Uses Google Maps JavaScript Api Version 3

- Customizable width & height for easier integration into user's site

- Customizable track line colors

- Added legend indicating devices and tracks

- Ability to turn on/off waypoints for specific devices

- New icons for indicating start and end points of device messages

- Customizable google map styles

- Optional auto refresh mode

Note: Password protected feeds are not supported at this time.

Example:

http://share.findmespot.com/shared/faces/viewspots.jsp?glId=0Wl3diTJcqqvncI6NNsoqJV5ygrFtQfBB
The Feed Id in the above shared page URL is: 0Wl3diTJcqqvncI6NNsoqJV5ygrFtQfBB

The AJAX call to the SPOT API sends a JSON response back to the widget, which is then grouped by device ESN and displayed on the map.

The live map widget depends on three external libraries. These libraries include JQuery (v1.11.0+), Google Maps API v3 and Marker manager, which is a library created by Google to manage adding and removing of map markers.

The widget is available at http://d3ra5e5xmvzawh.cloudfront.net/live-widget/2.0/spot-main-min.js and has been minified to minimize the number of HTTP requests.

Basic Usage:

Note: Please replace <SHARE_PAGE_FEED_ID> including '<' and '>' with your share page feed ID in the below snippet.

$(function(){

$('#widget').spotLiveWidget({

feedId: '<SHARE_PAGE_FEED_ID>',

mapType: 'HYBRID',

width: 800,

height: 800

}); });

</script>

Options:

mapType: (optional)

Default: 'ROADMAP' [String]

There are four types of maps available ROADMAP, TERRAIN, HYBRID and SATELLITE.

<script>
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>',
			mapType: 'HYBRID'
		});	
		
	});
</script>

height and width: (optional)

Default: 500 [int] (in pixels)

Sets width and height for the widget.

<script>
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>',
			width: 400,
			height: 400
		});
	});
</script>

legendHeight: (optional)

Default: 35 [int] (in pixels)

Sets height for the legend section.

<script>
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>',
			legendHeight: 70
		});
	});
</script>

showLegend: (optional)

Default: true [boolean]

This option can be used to show/hide the device legend section.

<script>
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>',
			showLegend: false
		});
	});
</script>

Please note that the legendHeight is not used if this option is set to false.

autoRefresh: (optional)

Default: 0 [int] (in minutes)

Sets auto refresh interval for the widget.

<script>
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>',
			autoRefresh: 5
		});
	});
</script>

polyline: (optional)

This option can be used to set strokeWeight and strokeColor for the lines connecting map markers for each device.

<script>
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>',
			polyline: {
				strokeWeight: 3, // [int]
				strokeColor: {
					'0-1234567' : '#000'  // [Device-ESN : Hex-Color code]
				}
			}
		});
	});
</script>

Embedding the SPOT Live Map Widget (version 2.0) in your WebSite

AA-00008