Difference between revisions of "User:SignpostMarv Martin/Webmap API Examples"
(starting article) |
(adding documentation for registering plugins) |
||
| Line 2: | Line 2: | ||
== Base HTML == | == Base HTML == | ||
Live Example: http://dev.signpostmarv.name/pub/secondlife/slurl.html | |||
<html4strict><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | <html4strict><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | ||
| Line 8: | Line 9: | ||
<title>Hack Day '09: Pluggable SLurl!</title> | <title>Hack Day '09: Pluggable SLurl!</title> | ||
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> | <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> | ||
<script src="http://maps.google.com/maps?file=api&v=2&key= | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> | ||
<script src="http://www.google.com/jsapi?key= | <script src="http://www.google.com/jsapi?key=[YOUR GOOGLE SEARCH API KEY HERE]" type="text/javascript"></script> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> | ||
<script src="http://static.marvulous.co.uk/%C2%B5/js/slurl/mapapi.js" type="text/javascript"></script> | <script src="http://static.marvulous.co.uk/%C2%B5/js/slurl/mapapi.js" type="text/javascript"></script> | ||
| Line 32: | Line 33: | ||
</body> | </body> | ||
</html></html4strict> | </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: | |||
# gotoRegion | |||
# 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: | |||
=== gotoSLURL,gotoRegion === | |||
<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. | |||
* A [http://dev.signpostmarv.name/pub/secondlife/slurl-flickr.html live example of the flickr] is available for demonstration purposes. | |||
* A [http://dev.signpostmarv.name/pub/secondlife/slurl-hacks.html demonstration of multiple plugins] working in tandem is also available. | |||
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: <span><html4strict><script src="http://static.marvulous.co.uk/%C2%B5/js/slurl/plugins/flickr.js" type="text/javascript"></script></html4strict> | |||
2) Some extra CSS is added below MAIN.css: <html4strict><link rel="stylesheet" type="text/css" href="http://dev.signpostmarv.name/pub/secondlife/slurl-hacks.css" /></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><ul id="slurl-hacks"> | |||
<li class="slurl-hack" id="flickr-search"></li> | |||
</ul></html4strict> | |||
Revision as of 10:07, 11 May 2009
This article covers the refactored javascript for the SLURL Map API made by SignpostMarv Martin for Open Hack 2009.
Base HTML
Live Example: http://dev.signpostmarv.name/pub/secondlife/slurl.html
<html4strict><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hack Day '09: Pluggable SLurl!</title> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="http://www.google.com/jsapi?key=[YOUR GOOGLE SEARCH API KEY HERE]" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script src="http://static.marvulous.co.uk/%C2%B5/js/slurl/mapapi.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://slurl.com/_styles/MAIN.css" /> <script type="text/javascript"> /*<![CDATA[*/ $(document).ready(function() { mapInstance = new SLURL.map(document.getElementById('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:
- gotoRegion
- 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:
gotoSLURL,gotoRegion
<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.
- A live example of the flickr is available for demonstration purposes.
- A demonstration of multiple plugins working in tandem is also available.
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="http://static.marvulous.co.uk/%C2%B5/js/slurl/plugins/flickr.js" type="text/javascript"></script></html4strict> 2) Some extra CSS is added below MAIN.css: <html4strict><link rel="stylesheet" type="text/css" href="http://dev.signpostmarv.name/pub/secondlife/slurl-hacks.css" /></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>
</html4strict>