TechTalk #5 – Webmap API Guide – HowTo

WebMapAPIHallo, liebe TechTalk-Leser. Heute stellen wir Euch die WebMap-API von Linden Lab® vor. BETA, was sonst. Und deshalb vorneweg. Mit dem Internet Explorer inder der version 7 könnt ihr es direkt vergessen. Richtig! Firefox auspacken oder IE 5 ging bei mir. IE 6 ist laut Dokumentation ebenfalls getestet! Was kann man mit der WebMapAPI machen? Also links im Bild sehr ihr die KybernEthik 1 von oben. Also die Map, welche ihr auch mit dem SL-Client seht. Diese Funktionalität lässt sich relativ einfach in beliebige Webseiten und Webanwendungen einbauen. Dies geschieht mit einer JavaScript-API. Und genau um die soll es in diesem Mini-TechTalk gehen! Wozu man das benutzen kann? Gaaanz einfach! Nehmen wir zum Beispiel den Landscanner von SLTalk & Partner. Das ist ein Scanner, den der SIM-Owner überall auf seinem SIM aufstellen kann, beliebig viele. Über ein komfortables Web-Frontend kann der Betreiber einer SIM alle möglichen Daten abrufen, zum Beispiel wie die Besucherfrequenzen seiner SIM sind oder die durchschnittliche Verweildauer bis hin, wie sich die SIM-Performance in einem bestimmten Zeitraum verhalten hat. Über das Web-Frontend kann man nun die Karte der SIM mittels der JavaScript-API anzeigen und sogar Marker setzen, wo die ganzen Scanner stehen, damit er sie schnell findet. Er kann sich sogar über diese Map direkt dorthin teleportieren. Praktisch oder? Aber schauen wir uns das Ganze einmal wie in gewohnter SL-techTalk-Tiefe an :-). Haaaaands on!

Die folgenden drei Knöpfe sind JavaScript gesteuert. Möglicherweise dauert es einige Sekunden, bis ihr die Buttons sehen könnt, da die JavaScript-API und einige Daten von den Linden Lab-Servern geladen werden müssen.







Nachdem ihr Euch ein wenig vertraut gemacht habt, was die API liefern kann, möchte ich jetzt ein wenig technischer werden. Zunächst muss die JavaScript-API in die HTML-Seite eingebettet werden. Dies geht so:

Einbinden der WebMap API

Nachfolgender Code lädt die API in Form eines Javascript-Include ein.
<script src="http://secondlife.com/apps/mapapi/" 
type="text/javascript"></script>
JavaScript WebMap API

Für die harten JavaScript-Hacker unter Euch, hier der Link zur API. Aber ehrlich gesagt ist JavaScript eigentlich nicht so mein Ding.

Soweit so gut. Die API haben wir. Jetzt müssen wir nur noch eine Map erzeugen, und das geht so:

Erzeugen einer Map mit JavaScript-Aufrufen

Nachfolgender Code erzeugt eine Instanz der Klasse SLMap, sofern man bei JavaScript objektorientierte Begriffe nutzt :-) Die Hashmap options benutze ich, um die Scrollbuttons auszuschalten, insgesamt kann man hier noch weitere Parameter angeben. Die JavaScript-Instanz wird über den DOM an ein DIV-Element map-container gebunden, welches ich im nächsten Schritt anspreche. Über die Klasse SLPoint definiert Ihr den Kartenausschnitt innerhalb Second Life® !

var options = new Array()
options['hasPanningControls'] = false;
mapInstance = new SLMap(
document.getElementById('map-container'), options);
mapInstance.centerAndZoomAtSLCoord(
new SLPoint('KybernEthik 1',128,128),0);

JavaScript WebMap API

Die meisten Anwender wrappen diesen Code in eine JavaScript-Funktion createMap() und rufen diese Funktion über das onload()-Event des HTML-Body-Tags auf. Ich habe diesen Code auf einen Button gelegt, deshalb müsst ihr auch erst einmal den Button klicken, bevor eine Karte erscheint. Kommen wir zu dem HTML-Div-Element. Über dieses Element wird definiert, wo auf eurer HTML-Seite die Map erscheinen soll:

Div-Container für die Positionierung der Mal

Das ist recht easy. Über einen Style im CSS könnt ihr dieses Div-Element auch nich etwas stylen bzw. sizen. Das zeige ich Euch im nächsten Schritt.
<div id="map-container"></div>
Div-Container für die Map

Wie bereits erwähnt, hier noch der Style für den Map-Container. Entweder passt ihr dies im CSS an oder direkt in eurer HTML-Seite.

Div-Container im CSS stylen

So sieht mein Abschnitt für den Map-Container in meinem CSS aus.
div#map-container {
      width: 450px;
      height: 450px;
}
Div-Container für die Map stylen und sizen

Wenn ihr erstmal eine Map habt, könnt ihr viele tolle Dinge tun (Schaut Euch die API-Reference hierzu im Detail an). Ihr könnt mit der API beliebige Grafiken an bestimmten Positionen legen, um z.B. etwas zu markieren oder Ihr könnt ein Infofenster mit einer Grafik der Region anzeigen. Hier mein Code, der ausgeführt wird, wenn Ihr auf den Button „Zentrum zeigen“ klickt.

Hinzufügen eines MapWindows zu einer mapInstance

So könnt ihr der Instanz der Klasse SLMap ein MapWindow hinzufügen. Beachtet, dass ich auch hier wieder eine JavaScript Hashmap verwende, um das Window nach meinen Bedürfnissen zu sizen. Dem Konstruktor der Klasse MapWindow könnt ihr beliebiges HTML übergeben. Escapen nicht vergessen !!!!
var options = new Array()
options['width'] = 220;
options['height'] = 220;
var mapWindow = new MapWindow("
<img src='http://blog.avameo.de/wp-content/uploads/2007/06/
zentrum_map.jpg'/>",options);
mapInstance.addMapWindow(mapWindow,
new SLPoint('KybernEthik 1',128,128));
Erzeugen und positionieren eines Markers in der SLMap.

So nun geht es zum Endspurt. Das Tagging bzw. das setzen von Markern. Wozu das gut sein soll? Na dann schaut mal bei Sloog – tagging the whole new world rein. Oder, wie bereits erwähnt, so ein Web-Frontend für die Administration von Landscannern ist ebenfalls solch ein Anwendungsbeispiel.

Hinzufügen eines MapWindows zu einer mapInstance
Zunächst wird eine Grafik auf eurem Webserver an eine JavaScript-Klasse Img gebunden. Dann bastelt ihr daraus ein Icon. Und dann baut ihr ein Array auf. Dann wird einfach noch eine Instanz der Klasse Marker erzeugt, natürlich mit den Icons und einer SL-Position unter Verwendung der Klasse SLPoint. Und dann nur noch mit der Methode addMarker der SLMap hinzufügen. Simpel, oder?
var yellow_dot_image = 
new Img("http://hier_die_bild_url.xy/b_map_yellow.gif",30,30);
var yellow_icon = new Icon(yellow_dot_image);

var all_images = 
[yellow_icon, yellow_icon, yellow_icon, 
yellow_icon, yellow_icon, yellow_icon];

var marker = new Marker(all_images, 
new SLPoint('KybernEthik 1',128,128));

mapInstance.addMarker(marker);
Erzeugen und setzen eines Markers in der SLMap.

So Leute das war’s erstmal. Der Patrick muss jetzt noch ne Tomcat-Schulung vorbereiten und sich deshalb hier mal vom WordPress-Acker verabschieden. TschüSS und bis zum nächsten Mal.

Achja, bevor ich es vergesse, hier zum Schluß der allerwichtigste Link zu diesem Thema:

Link zur WebMap-API: http://secondlife.com/developers/mapapi/“

Über Andreas Mertens

Andreas Mertens aka Patrick Wunderland (SL) ist Initiator von avameo und schreibt seit 2006 für diesen Blog.

Kommentare

  1. TJ Ay says:

    Danke Danke Danke, das ist ja eine Klasse Erklärung gewesen. Damit hab ja sogar ich was (einigermassen) funktionierendes zusammebekommen. Lach.

    http://salsaencielo.blogspot.com

    Ich werde noch ein bisschen dran Arbeiten, versprochen, aber erst kommt der RL Urlaub, grins.

    Einfach nach ganz unten Scrollen. Auf Karte Zeigen und dann kann man die Karte verschieben.

    Hab ich schon gesagt, Danke ??

    TJ

Ihre Meinung ist uns wichtig

*