Zoomen von Canvas/Map-Area

[ledy]

Hi,

um eine interaktive Landkarte zu erstellen, scheint es 2 interessante Projekte zu geben:
http://davidlynch.org/js/maphilight/docs/demo_usa.html um Browser-kompatibel eine klickbare Karte mit einem Hintergrundbild darzustellen und zudem mouseover/tooltips zu bieten.
Was aber leider fehlt: pan bzw. zoom
Das wiederum bietet http://wayfarerweb.com/jquery/plugins/mapbox/ - dafür aber keine einzelnen Flächen, um diese mit mouseover oder click events auszustatten :-(

Mit maphilight hab ich nun verschiedene Möglichkeiten probiert, einen Zoom zu erreichen, indem die Größe des Bildes/Canvas/Map-Area geändert wird; aber bisher kein Erfolg.
Habt Ihr einen Tipp dazu oder eine bessere Idee, wie sich eine "interaktive" Landkarte mit einzelnen Ländern und Zoom hinbekommen lässt?

Großes Dankeschön für Tipps. Gruß,
ledy

[ChrisB]

Hi,

Mit maphilight hab ich nun verschiedene Möglichkeiten probiert, einen Zoom zu erreichen, indem die Größe des Bildes/Canvas/Map-Area geändert wird; aber bisher kein Erfolg.

Bei Bildern dürfte „Zoomen“ über Veränderung der Maße des IMG-Objektes noch funktionieren; ggf. muss man dann noch clip hinzunehmen oder das Bild in einem beschneidenden Container (overflow) positionieren.

Die Maße eines Canvas-Elements legen aber nicht vornehmlich die im HTML oder CSS angegebenen Maße des Elements fest, sondern die gibst du im Element selber an (bzw. während dessen Erstellung mit JavaScript), und zwar in Pixeln.
„Zoomen“ des eigentlichen Inhalts des Canvas geht über eine der Transformationen wie bspw. die scale-Methode.
Um das im IE <=8 zum laufen zu bringen, bräuchtest du dann allerdings sowas wie explorercanvas - und das ist meiner (zugegebenermaßen eher schmalen) Erfahrung nach noch eine ziemlich fehlerträchtige bzw. unvollständige Angelegenheit.

Zum „Zoomen“ innerhalb einer Image-Map bzw. der Areas müsstest du die Koordinaten letzterer entweder prozentual angeben (was m.W. möglich sein müsste, wo ich aber nicht weiß, in wie fern die Browser das unterstützen), oder eben mit JavaScript maßstabsgerecht umrechnen und neu setzen.

Habt Ihr einen Tipp dazu oder eine bessere Idee, wie sich eine "interaktive" Landkarte mit einzelnen Ländern und Zoom hinbekommen lässt?

Kommt darauf an, was du unter „Landkarte“ genau verstehst - sowas wie eine Straßenkarte, von dir durch Points of Interest erweitert?

Dann könnte man auch überlegen, ob man das statt mit pixelbasierten Grafiken nicht lieber gleich vektorbasiert umsetzt.
Dazu müsstest du aber vermutlich erst mal in entsprechendes Datenmaterial investieren (Klauen könnte teuer werden, mit oder ohne trap street); ich weiß nicht, ob's sowas auch Open Source gibt (vllt. opengeodb) und wenn ja, wie gut das qualitativ ist.
Und dann wäre zu überlegen, wie man die Visualisierung regelt - SVG und Flash böten sich in erster Linie an. Wobei die Verbreitung von SVG wieder ungewiss ist - in den meisten Browsern dürfte es in aktuellsten Versionen recht gut aussehen, im IE allerdings eher trübe.
Und ob's da bzgl. Flash schon was aus dem OS-Lager gibt, müsste man auch prüfen - oder sonst überlegen, ob man sich zutraut, das selber umzusetzen, oder ob man es in Auftrag geben möchte.

MfG ChrisB