User:SignpostMarv Martin/Webmap API Examples

From Second Life Wiki
< User:SignpostMarv Martin
Revision as of 10:07, 11 May 2009 by SignpostMarv Martin (talk | contribs) (adding documentation for registering plugins)
Jump to navigation Jump to search

This article covers the refactored javascript for the SLURL Map API made by SignpostMarv Martin for Open Hack 2009.


Live Example:

<html4strict><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""> <html xmlns=""> <head> <title>Hack Day '09: Pluggable SLurl!</title> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> <script src="[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="[YOUR GOOGLE SEARCH API KEY HERE]" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="" /> <script type="text/javascript"> /*<![CDATA[*/ $(document).ready(function() { mapInstance = new'map-container')); mapInstance.gotoRegion('Hippotropolis'); }); $(document).unload(function() { // Google script that helps prevent memory leaks // (we're looking at you when we say that IE!) GUnload(); /*]]>*/ }); </script> </head> <body>

</body> </html></html4strict>

Adding a Plugin

The key feature of the refactoring (aside from shifting everything into a SLURL object) was to make the SLURL JS "pluggable"- making it easier to extend a SLURL map without needing to create & edit a duplicate of the javascript (which would become difficult to maintain over time the more customisations were made).

Currently, two functions can have callbacks registered with them:

  1. gotoRegion
  2. gotoSLURL

The internals of a plugin can be coded however you want them to, but the callback function for the plugin must be structured along these lines:


<javascript>function my_callBack(slRegionName,x,y) { // do stuff here }</javascript>

Registering a callback

Callback functions are registered to a particular instance of a SLURL map, enabling multiple maps to be used on the same page with different plugins.

For example, to enable Marv's Flickr plugin, the following modifications are made to the base HTML;

1) The Flickr plugin is added below mapapi.js: <html4strict><script src="" type="text/javascript"></script></html4strict> 2) Some extra CSS is added below MAIN.css: <html4strict><link rel="stylesheet" type="text/css" href="" /></html4strict> 3) The Flickr plugin is configured: <javascript>SLURL_flickr.apiKey = whatever_your_api_key_is; SLURL_flickr.groupId = '51035802764@N01'; // Second Life flickr group ID- the same one linked from the official blog. change to suit. SLURL_flickr.searchMode = 'group'; // the plugin defaults to 'global'- e.g. searching all flickr photos. SLURL_flickr.resultsPerPage = 32; // the number of thumbnails to display SLURL_flickr.prependResultsHTML = ; // Useful for adding a header in before the results.</javascript> 4) The callbacks are registered after the mapInstance has been declared: <javascript> SLURL.addCallBack.gotoSLURL(mapInstance,SLURL_flickr.searchRegion); SLURL.addCallBack.gotoRegion(mapInstance,SLURL_flickr.searchRegion);</javascript>

5) Finally, some extra HTML for containing the flickr results is added to the body:<html4strict>