Darstellung (Kompatibilität und Performance)

Ziel

Die Funktionalität soll gleich sein für alle Geräte und aktuellen Browser. Das funktioniert heute eigentlich recht gut - nur (auf Altgeräten veraltende) Safaris sind sowas wie der neue IE6. Es ist eigentlich ja auch nur eine ziemlich popelige Seite, aber problematisch wird's nur wegen insbesondere dieser (panzoom) Funktionalitäten

• Mausrad-Zoom
• Pinch-Zoom
• Panning
• Ein/Ausblenden der Legend (Resizing der Map)
• Animationen (ggf. Performanceproblem bei Mobil?)

Mit diesem Stand funktioniert eigentlich alles, aber...

Probleme

Wegen Panzoom (was einfach super ist), ist die Struktur etwas verschachtelter als sie ohne sein müsste. Richtig fies zum Zeitpunkt dieses Tickets sind

• Javascript mit Animates zum Ein-/Ausblenden der Legende (Code1 und Code2)
• Manueller Abzug der Navigationsmenühöhe für Mobile, weil kein Flex genutzt wird (Code und Code)
  • Beim Laden haut das auch richtig auf die Performance beim Rendern

Zu beachten

Macht man links was, geht es rechts wieder nicht. Woran man so denken muss:

Geräteklasse	Eingabemethode	Browser
Desktops	Touch & Pinching	Chrome
Mobile	Mouse	Firefox
	(theoretisch Tastatur)	Edge/IE
		Safari
		Opera
Browser jeweils nur aktuelle in der Mobil- und Desktop-Version. Kein IE11. Safari leider praktisch nur mit Apple-Gerät zu testen...

Probleme (ggf. mit Workarounds)

• Beim Firefox funktioniert das Mausrad-Zoomen nur zusätzlichem jquery.mousewheel
• Edge will besondere Angaben für Pointer
• Probiert man eine Flex-Variante
  • dann ist Chrome erst zufrieden, wenn man #map_container "irgendeine" height zugewiesen hat. Alle anderen Browser sind auch so glücklich.
  • Edge: schließt man die Legende, wird die Map erst riesig, aber korrekt nach einem weiteren Klick "irgendwo" dargestellt. (Leider hilft auch ein $("#tubhh").panzoom("resetDimensions"); nicht)
• ...