Interactive map - ajax

[Zderg]

Καλησπέρα,

 

Aυτό που θέλω να κάνω είναι να έχω εναν χάρτη (ας πουμε της ευρώπης) και δίπλα κάποια φόρμα με κάποια κριτήρια π.χ. κύρια γλώσσα, με όλες τις γλώσσες της ευρώπης ως πιθανές επιλογές. Όταν ο χρήστης θα διαλέγει τα αγγλικά, θα γίνεται αναζήτηση στην database για το ποιες χώρες έχουν ως κύρια γλώσσα τα αγγλικά και αυτές οι χώρες θα αλλάζουν χρώμα στον χάρτη. Επίσης αυτές οι χώρες θέλω να ειναι clickable και οι υπόλοιπες disabled.

 

Έχω μόνο στοιχειώδη γνώση του jquery αλλα απ'όσο έψαξα αυτο θα γίνει πιο ευκολα με jquery και ίσως svg map. Δεν θέλω να το κάνω με flash.

 

Aν έχετε κάποια άλλη λυση, ευπρόσδεκτη. Ξέρει κανείς που μπορώ να βρω κάτι αντίστοιχω (μισο-)έτοιμο; Εψαξα αρκετά, βρήκα interactive maps αλλά χωρίς να έρχονται δεδομένα απο τον server.

 

Ευχαριστώ εκ των προτέρων.

[thanocaster]

Μπορείς σίγουρα με googlemaps, αλλά θέλει αρκετό διάβασμα και αρκετό κώδικα.

[Zderg]

Θα προτιμουσα σε μια λυση εκτός googlemaps. Απ'οσα βρηκα κατάλαβα οτι αυτο που θέλω γίνεται με εναν vector map (SVG). Εστω οτι βρισκω εναν τετοιο χαρτη. Τι κανω όμως μετα;

[slevinkelevra]

Για κατι μισο-έτοιμο δεν ξερω...

Εχω μια εμπειρια σε SVG και javascript. Και με SVG γινεται ανετα, όπως το περιγραφεις.

 

Αν δεν βρισκεις έτοιμο χαρτη σε SVG, τσεκαρε το Inkscape, ειναι προγραμμα που μετατρεπει απο raster σε vector...

 

Για να "πηγαινοερχονται" πραγματα απο βαση δεδομενων γίνεται αλλα θέλει να φτιαξεις κώδικα μονος σου συνδυάζοντας PHP, javascript και SVG...δεν ειναι και τοσο δυσκολο οσο ακουγεται ΑΝ το project σου ειναι τοσο απλο οσο ακουγεται

 

Αυτα προς το παρων, γραψε με περισσοτερες λεπτομέρειες τι απαιτησεις εχει το project γιατι κατι μου λεει οτι λογικα δεν τα λες ολα. Πχ, λογικα θα θες να κανεις και zoom στον χάρτη. Μηπως εκτος απο την γλωσσα θα κανεις και αναζητηση και με αλλα κριτηρια? Γιατι τοτε περιπλεκονται τα πραγματα λιγο παραπανω

 

Αυτα

 

Αν τελικα αποφασισεις για SVG εδω ειμαστε

 

slevin

[Zderg]

@slevinkelevra Ναι αυτα που περιεγραψα δεν ειναι ολο το project. Ενα παραδειγμα εδωσα. Στην βαση δεδομενων καθε χώρα θα εχει πολλες παραμέτρους και συνεπως και η φορμα θα εχει πολλα κριτηρια επιλογης απο τα οποια ο χρηστης θελω να διαλεξει όσα θελει. Στην ουσια η φορμα θα ειναι πολλα φίλτρα και στον χαρτη θα γινονται Higllight οσες χώρες τα πληρούν. Ο χρηστης θα μπορει να διαλέγει καποια φιλτρα, να τα ακυρωνει κλπ. Για το zoom στον χαρτη προς το παρον δεν το χρειαζομαι αλλα φανταζομαι οτι αυτο θα μπορω να το προσθεσω και αργοτερα αν χρειαστει.

[slevinkelevra]

HTML για τη φορμα, PHP, mySQL για τη βαση, υποτίθεται έχεις έτοιμο έναν SVG χάρτη με πολύγωνα που αντιπροσωπευουν χωρες και καθε πολύγωνο έχει το όνομα της χώρας.

 

Ξεκινας με php κωδικα, πέρνεις με POST οτι ηρθε απο τη φορμα, κανεις το query με SELECT-FROM-WHERE.

Κανεις fetch τα αποτελέσματα σε πίνακες της php. Ας πούμε οτι έχεις ενα πινακα ονοματι name για το fetch που έχει έναν μετρητη ονόματι b το οποιο πρεπει οπωσδηποτε να δηλωσεις global. "Κλείνεις" τη PHP με το κλασικο

>
?>

 

"Ανοιγεις" javascript με το κλασικο

>
<script language="javascript">

και εκει μεσα δημιουργεις άδειους πίνακες με το ίδιο όνομα που είχαν και αυτοι στην PHP στους οποιους εκανες fetch τα αποτελεσματα σου. Δηλαδη αν εχεις εναν πινακα ονοματι name στην PHP τοτε φτιαχνεις έναν ομονυμο σε javascipt.

(Javascript θες γιατι μπορει να συνεργαστει ανετα με SVG.)

Όπως εισαι ξανανοιγεις PHP με

>
<?php

και γραφεις

>
for($i=0;$i<$b; $i++)
{echo "onoma[$i]='".$onoma[$i]."';\n";}

Το b το βλέπει αμεσως η javascript απο την php επειδη ειναι global και ετσι ξερει πόσες επαναλήψεις να κανει. Το παραπανω κομματι κώδικα "τυπώνει" απο πίνακα php σε πινακα javascript.

Και τώρα που έχεις javascipt μπορεις να το πεταξεις στην SVG κατευθειαν.

Κλέινεις την php και κατόπιν την javascipt με

>
?>

και

>
</script>

αντίστοιχα.

 

Και τωρα επιτέλους SVG. Ανοιξε με τα κλασικα

>
<xml version="1.0" encoding="UTF-8"/>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

και οτι άλλο θέλει, όρισε functions, παρήγειλε φασολια γίγαντες κτλ κτλ κτλ

 

Φτιάξε μια function τυπου (δεν ειμαι και σιγουρος για την σύνταξη, ψαχτο λίγο)

>
function allakse-xroma-sti-xora-pou-8elei-o-Zderg(){
for (var i = 0 ; i < name.length ; i++){
name[i].set.AttributeNS(null,"fill","red");
}

 

Το name.length είναι το μηκος του πίνακα που ορισες παραπανω σε javascript. Βλέπει κατευθειαν όλο τον πινακα με τα περιεχομενα του. Εχεις και το μηκος του και άρα ξερεις ποσες φορες να κανεις επαναληψη. Οποτε αν εχεις πχ 5 χωρες παει και αλλαζει το χρωμα τους σε κοκκινο, σε διαφορετικη χωρα καθε φορα, αφου βαζεις το ονομα της χωρας απο τον πινακα μπροστα απο το setAttribute. (Το name απο τον πινακα ειναι ίδιο με αυτο που έχεις στη βαση δεδομενων και ίδιο με το ονομα καθε πολυγώνου που εχεις ορισει στον SVG χαρτη)

 

 

Επίσης τσέκαρε http://www.w3.org/Gr.../svgprimer.html τα λεει καλα και απλα, γενικα για svg...

Για zoom και pan, αυτος ο τυπακος τα εχει ολα (και δεν ειναι καν programmer !) http://www.petercoll...nd-zoom-control

Και εδω θα βρεις διαφορα http://www.kevlindev.com/index.htm

 

 

Αυτη είναι η γενικη ιδεα. Μπορει να φαινεται πολυπλοκο, αλλα σε μενα ειχε δουλεψει οοοοοοολο αυτο, όταν έπρεπε να περνω σημεια με x και y απο μια βαση και να τα εμφανιζω σε εναν SVG χαρτη, σε ενα παλιο project...Αν βρεις κατι ταχυτερο, ή καποιος άλλος ξερει άλλο τρόπο, φυσικα και να μου το τριψετε στη μουρη μου!!!!

 

 

Ελπίζω να μην επαθες εγκεφαλικο.

Καλη δουλεια...

 

slevin

[Zderg]

Φιλε σε ευχαριστω παρα πολυ για τον χρονο σου!! Θα κατσω να το κοιταξω αναλυτικα τις επομενες μερες. Παντως με μια πρωτη ματια νομιζω οτι καταλαβαινω το πως συνεργαζονται ολα τα κομματια αλλα μαλλον δεν το 'χω απο πλευρας κωδικα. Σε ευχαριστω πολυ anyway!!!!