Embedding the SPOT Live Map Widget (version 2.0) in your WebSite
Author: Article Reference #:AA-00008 Views:41270 Date Added:2009-04-07 04:00 PM Last Updated:2016-10-11 10:01 AM 4.6 Rating/ 29 Voters

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

- 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.7.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.

<div id="widget"></div>
		
<!--Google Maps v3 API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?client=gme-globalstar"></script> 
<!-- jQuery, Note: Do not include this line if jQuery is already present -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript" src="//d3ra5e5xmvzawh.cloudfront.net/live-widget/2.0/spot-main-min.js"></script>

<script type="text/javascript">
	$(function() {
		$('#widget').spotLiveWidget({ 
			feedId: '<SHARE_PAGE_FEED_ID>'
		});	
		
	});
</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>
	
Quick Jump
Go
Print Print Article
Info Tell your opinion about this article
Rate