JavaScript Punkte auf Weltkarte darstellen

[Timdaroxxa]

Hey,

ich habe vor, Punkte die kurz genau einmal aufleuchten sollen, auf einer Weltkarte darzustellen. Außerdem sollten diese dynamisch während der Laufzeit entstehen und verschwinden

Wie setze ich das am besten um?

Hat jemand eine Idee? Ich weis jetzt garnicht wie ich da ran gehen soll...

Also ich weis schon, dass ich ein Koordinatensystem verwendet und ein Punkt dann natürlich x-/y-Abstand hat.
Wie jedoch bekomme ich es performancemäßig am besten hin, kurz einzelne Punkte aufleuchten zu lassen?


Gruß Tim

 

[bu1137]

Animated GIF zum Beispiel?

 

[DHundt]

Mahlzeit,

Hier fehlen ein paar weitere Infos:
- IE6/7/8-Support?
- CSS-3 Support oder reine JavaScript Lösung?
- geht es in erster Linie um die Darstellung der Punkte in der Karte
- oder um die Animation des "aufleuchtens"

"Punkte" bekommt man in CSS3
z.B. mit border-radius recht gut und performant gebastelt
und entweder mit jQuery-animate oder CSS3 transition (hardwarebeschleunigt?) animiert.
Aufleuchten könnte über CSS3 box-shadow und verändern der Größe gelöst werden.

Für die Kartendarstellung gibt es diverse APIs (Google Maps, Bing Maps, ...).
Du kannst natürlich auch einfach auf ein statisches Bild ein position:absolute Overlay legen...

Wie gesagt: Es gibt viele Wege.
Den genauen zu finden, helfen nur weitere Infos.

Gruß

 

[Timdaroxxa]

Hey, danke für die Antwort.

Manchmal hab ich einfach nen Brett vorm Kopf
Das reicht für mich schon, ums umsetzen zu können ^^

Danke!

 

[mambokurt]

Also ich würd die Weltkarte als Background in ein Div hängen, den Punkten dann mit top/left ihre Position geben und dann einfach in einer Schleife die Transparenz bzw die Größe des Punktes stufenweise erhöhen. Könnte was bei 30 Zeilen Javascript werden, abhängig davon wieviel Schnickschnack noch dazukommt

 

[Daaron]

Die Animation schreibt man nur in JS, wenn man unbedingt Rotzbrowser (IE<=9) unterstützen will. Für alles andere gibts CSS3. Das ist performanter in allen Bereichen.

 

[mambokurt]

*schulterzuck* wenns immer die selbe Animation ist kann er auch ein GIF animieren und über JS einblenden, kommt auf die Anwendung an . Ich dachte nur wenn er die Punkte eh mit JS beim Wickel hat, kann er sie genausogut darüber einblenden. Über Performance kann er sich immer noch Gedanken machen, wenns ruckelt.

 

[slaves]

Das HTML5 - Canvas Element ist perfekt für sowas. Arbeite da im Moment selbst viel damit und das ist unglaublich wie performant das ist (>8000 Punkte in unter 3ms).
Mit dem Framework kinetic.js ist es dann einfach die Punkte mit Events zu versehen.