mobilyMap – jQuery Plugin für Kartendarstellung

Mein letzter Artikel beschäftigte sich mit der Einbindung eigener Karten (eigener Grafiken) in Google Maps. Mit mobilyMap steht jetzt ein jQuery-Plugin zur Verfügung, das es ermöglicht, auf Googles Maps-API zu verzichten und vollständige eigene Karten zu realisieren.

Insbesondere zeichnet sich mobilyMap dadurch aus, besonders leichtgewichtig zu sein, das Plugin bringt gerade einmal 5kB auf die virtuelle Textwaage (nur das Javascript, zusätzliche beigefügte Dateien wie beispielsweise Kartenmarker und ähnliche sind natürlich umfangreicher).

Klar, das Plugin verfügt nicht über den doch sehr großen Funktionumfang der Google Maps API, aber für kleinere Projekte kann es durchaus von Vorteil sein. Selbstverständlich können Klicks ebenso abgefangen und bearbeitet werden, wie Marker eingeblendet und noch ein paar Features mehr. Kartendaten können auf einfachste Weise via HTML eingebunden werden:

<div id=“p-900-130″> fügt beispielsweise dem über die ID definierten Punkt der Karte einen Marker hinzu.

Wichtigster Nachteil dürfte im Moment noch sein, dass mobilyMap keinerlei Zoom-Funktion zur Verfügung stellt (dafür wäre allerdings auch entweder ein Mapserver oder eine gekachelteKarte vonnöten).

Dennoch ein sehr interessantes Projekt, das ich weiter beobachten werde – zudem muss ich mal damit herumexperimentieren, wenn es meine Zeit erlaubt. Ich werde dann berichten.

Google Maps mit eigenen Karten

Ich wollte schon länger einmal mit Google Maps herumexperimentieren, insbesondere im Bereich von „custom maps“. Das bedeutet nicht, dass man vorhandene Karten mit neuen Markern oder Layern versieht, sondern dass man eine vollständig neue, fiktive Karte anzeigt, beispielsweise die einer Fantasy-Welt oder eines Raumsektor – beides Varianten, die Spieler von MMOs oder Pen&Paper-Rollenspielen sicherlich erfreuen. Außerdem ist so etwas ein prima Forschungsobjekt, weil es nebenbei auch noch Spaß macht.

Tatsächlich war die Realisierung einfacher als gedacht, es gibt diverse Tutorials im Netz, die allerdings dann ein wenig schwer zu verstehen sind, wenn man – so wie ich – in dieser Form noch nie mit der Google Maps API gearbeitet hat. Letztendlich ist das aber auch nur Javascript. :o)

Etwas knifflig war es, die Zoomlevel der vorhandenen Karte festzulegen, die man an passende Zoomlevel der API anpassen musste, weiterhin musste die vorliegende Karte in Kartensegmente passender Größe für unterschiedliche Zoomstufen unterteilt werden, für letzteres gibt es allerdings ein Photoshop-Skript, das diese Arbeit doch erheblich vereinfacht. Auf die Nutzung eines Mapservers habe ich aufgrund der geringen Komplexität verzichtet und stattdessen einfach in einem Unterverzeichnis auf dem Webserver Bitmap-Kacheln abgelegt, die vom Javascript via API angefordert werden.

Nachdem die grundsätzliche Karte erst einmal stand und ich das Koordinatensystem verstanden hatte, war es nicht mehr weiter schwer, über Klick auf Links entweder an eine bestimmt Position der Karte zu navigieren bzw. Marker erscheinen zu lassen.

Die Demo kann man sich unter sto.rumschlauen.de ansehen (Update November 2012: Demo nicht mehr vorhanden), wer sich dafür interessiert, wie das alles geht, wirft einen Blick in den Quelltext, allerdings kommen die Datensätze der Kartenpositionen und der Marker via PHP aus einer Datenbank.

Es handelt sich – wie gesagt – um ein Experiment, der Code ist also nicht unbedingt optimiert.

Ich habe dieses Projekt übrigens durchgeführt, als ich noch dachte, dass die Betreiberfirma von STAR TREK ONLINE – Cryptic – es schaffen würde, ein brauchbares MMO in Roddenberrys Universum abzuliefern. Leider ist das nicht der Fall und ich kann jedem von diesem Spiel nur dringend abraten, es hat mit STAR TREK außer dem Namen nicht viel zu tun, es mangelt massiv an Content und es besteht zum größten Teil aus sinnlosem Geballer. Als Google-Maps-API-Demo und proof of concept kann die Seite aber dennoch für etwas nützlich sein… :o)