Touchfähigkeit, Counter und Nutzerfreundlichkeit

Heute hab ich dem Stadtplan drei neue Features verpasst.

Die Suchergebnisse werden ja immer in Form von Icons angezeigt. Für mich war immer klar, dass man auf die Icons klicken muss, um weitere Informationen zu erlangen (dann öffnet sich ein PopUp). Leider war ich der einzige, dem das klar zu sein schien. Die meisten Tester, die ich auf den Stadtplan angesetzt hatten, kannten die Funktion überhaupt nicht und kamen auch nicht selbstständig auf die Idee mal so ein Fähnchen anzuklicken.

Daher ist nun eine Funktion implementiert, die beim überfahren des Icons mit der Maus, das PopUp auslösen. Hoffentlich hilft es ;). Konkret ist die Funktion in der tom.js in der Funktion addMarker zu finden.

[cc lang=“js“]
// Hover
var markerHover = function(evt) {
// Wenn das Popup nicht sichtbar ist,
// dann kann es nicht fest sichtbar sein
if (!this.popup.visible())
this.popup.clicked = false;
if (!this.popup.clicked)
this.popup.show();

OpenLayers.Event.stop(evt);
}
marker.events.register(„mouseover“, feature, markerHover);
[/cc]

Nun hatte ich das Problem, dass auf Smartphones und Tablets die PopUps nur aufgingen, wenn man mit dem Finger ein Loch in den Bildschirm gehämmert hat. Daher hab ich noch einen weiteres Event registriert, dass auslöst, sobald auf dem Icon angefangen wird den Bildschirm zu berühren.

[cc lang=“js“]
marker.events.register(„touchstart“, feature, markerHover);
[/cc]

Es löst das selbe Event aus, wie mouseover und es funktioniert ;).

Bevor die Frage kommt: Ich möchte ungern alle PopUps automatisch öffnen, wenn die Icons auf der Karte hinzugefügt werden. Der Grund ist auch ganz einfach: Bei einigen Suchen werden so viele Ergebnisse gefunden, dass locker 100 Marker generiert werden. Wenn zu jedem Marker noch ein Popup aufgeht, wird es nicht nur sehr unübersichtlich, es zwingt auch hin und wieder schwachbrüstige Rechner (oder zumindest deren Browser) in die Knie.

Das dritte Feature ist die Countergrafik unter der Navigationszeile. Das von mir verwendete Piwik ermöglicht es diese Grafik zu exportieren, welche minimalistisch den Besucherstrom der vergangenen 30 Tage anzeigt. Leider kann man die Graphik nur exportieren, wenn man den auth_token eines Nutzers angibt, der die Daten zumindestens lesen darf. Ich will aber nicht, dass findige Nutzer den Token verwenden, um alle erfassten Daten von meinen Besuchern auszulesen. Daher hab ich schlicht ein PHP-Script angelegt, dass das Bild von der Piwik-Schnittstelle holt und gleich ausgibt. Der Code ist ziemlich minimalistisch und lautet:

[cc lang=“php“]

[/cc]

Bei token_auth= muss natürlich der Auth-Token des leseberechtigten Nutzers eingetragen werden. Bei idsite= kommt die ID der zu erfassenden Seite hin. Der Stadtplan ist bei mir Nummero drei ;).


Die Hoverfunktion, wie auch der Großteil des Quellcodes der tom.js, stammt aus der utils.js von http://osmtools.de/easymap/.

label, , , ,

Kommentar verfassen