2010-04-26 16 views
7

Ho bisogno di creare una mappa del mondo interattiva sulla prima pagina di un sito, il portale di visualizzazione sarà di circa 650x200 pixel. L'interattività includerebbe quanto segue, il mouse sopra un paese potrebbe evidenziare (i paesi sono letteralmente riempiti con "rosso" per esempio) quel paese e visualizzare il nome dei paesi (preferibilmente il testo in un div), sarò anche il collegamento l'Evidenziazione Evento con una che evidenzierà un Paese quando selezionato.Mappa mondiale interattiva, evidenziare i paesi con passaggio del mouse

Ho difficoltà a trovare una soluzione adeguata, rifiuto di utilizzare o apprendere una tecnologia proprietaria come il flash, quindi non è un'opzione. Ho creato un semplice mockup utilizzando gli openlayer e un'immagine di mappa personalizzata, ma i marker dei paesi vengono caricati troppo lentamente in IE6.

anche svg sembra troppo grande, come ho cercato di usare RaphaelJS, ma abondoned quando mi sono reso conto dei dati mappa del mondo è 1.2MB, che è totalmente non accettabile per la prima pagina di un sito ..

Sono davvero in perdita su come sto andando a fare questo, la mia ultima risorsa è quella di creare manualmente 250+ (ma molti paesi ci sono) png e applicare gli eventi mouseover agli hotspot nell'immagine ... ma questo probabilmente sarà un anche alla fine. Cercando disperatamente una soluzione, tutti i commenti utili saranno apprezzati!

risposta

5

Ho deciso di stabilirlo con RaphaelJS, importando tutti i percorsi da uno svg in inkscape, funziona incredibilmente bene!

6

Perché reinventare la ruota. Google Charts già lo fa.

+0

Sei sicuro? Ricordo di averlo dato un'occhiata e di non esserne convinto, le mappe sono statiche, non credo di poter allegare eventi JS? – BrenGG

+0

C'è un esempio proprio sulla pagina che ho collegato per mostrare una mappa del mondo completamente interattiva. –

+0

hmmm. ok ja mi ricordo di averlo visto una settimana fa, non ricordo perché l'ho lasciato cadere, avrei dovuto dare un'occhiata più profonda al mattino ... grazie ancora – BrenGG

0

Avete dati di coordinate nazionali memorizzati da qualche parte?

Se così le funzioni di impostazione per analizzare tramite i dati passati e creare più di 250 percorsi non dovrebbero essere che di grandi dimensioni.

+0

ho le coordinate di tutte le capitali, ho fatto piccoli marcatori in openlayers ma è troppo lento in IE6 (20% dei visitatori dei siti web) Preferisco idealmente restare con OpenLayers come soluzione a cui sono cresciuto molto affezionato durante l'ultima settimana o due ... – BrenGG

+0

VML potrebbe funzionare per quello che vuoi. Dato che sembra che tu sia più preoccupato per IE6 – Shaunwithanau

0

Abbiamo sviluppato Highmaps, correlato a Highcharts, per risolvere facilmente problemi di visualizzazione dei dati come questo. Forniamo anche uno map collection di oltre 350 mappe, ottimizzato per le dimensioni per mantenere le cose leggere.

Per un esempio di drilldown (caricamento di una mappa più dettagliata al clic del mouse), vedere this demo.

Highmaps è gratuito per uso non commerciale.

Population history by country Drainage basin of the Meuse river

Problemi correlati