13 βιβλιοθήκες JavaScript για τη δημιουργία διαδραστικών και προσαρμοσμένων χαρτών

Στο παρελθόν παρουσιάσαμε το Google Map Maker και άλλα 10 εργαλεία για να σας βοηθήσουμε να δημιουργήσετε χάρτες. Ωστόσο, αν προτιμάτε τη χρήση βιβλιοθηκών Javascript, έχουμε την θέση για εσάς. Ακολουθούν οι βιβλιοθήκες JS που μπορείτε να χρησιμοποιήσετε για να εμφανίσετε ειδικούς δείκτες χαρτών, να σχεδιάσετε προσαρμοσμένες γραμμές διαδρομής ή ακόμα και να εμφανίσετε ένα παράθυρο διαλόγου όταν τοποθετείτε το δείκτη του ποντικιού ή κάνετε κλικ σε ορισμένα σημεία του χάρτη.

Εξατομικεύστε τους χάρτες σας με το στυλ που θέλετε - μερικοί από αυτούς μπορούν να σχεδιαστούν με το CSS - ή προσαρμόστε το χάρτη σας ώστε να είναι όσο διαδραστικό θέλετε. Η πηγή των δεδομένων χαρτών, οι εξαρτήσεις και οι άδειες κάθε βιβλιοθήκης έχουν συμπεριληφθεί για την εξυπηρέτησή σας.

Περισσότερα για το Hongkiat:

• Πώς να σχεδιάσετε τους Χάρτες Google
• Απόκτηση θέσης χρήστη με το API Geolocation HTML5
• Οπτικοποίηση δεδομένων: 20+ χρήσιμα εργαλεία και πόροι

GMaps

GMaps κάνει την προσθήκη και προσαρμογή των Χαρτών Google ένα αεράκι. Εκτός από την προσθήκη ενός χάρτη, μπορείτε επίσης να δώσετε μερικά πράγματα στο χάρτη, όπως είναι οι πολυγραμμές που μπορεί να είναι χρήσιμες για την σχεδίαση μιας διαδρομής, ένα ειδικό έλεγχο μενού και ακόμη και στοιχεία HTML.

Το GMaps είναι συμβατό με δεδομένα με μορφοποίηση JSON τα οποία μπορείτε να χρησιμοποιήσετε για να ενσωματώσετε το χάρτη σας με μια συγκεκριμένη εφαρμογή, όπως το Foursquare.

• Πηγή δεδομένων χαρτών: Χάρτες Google
• Εξαρτήσεις: κανένας
• Αδεια: Άδεια MIT

jHere

Στα 5KB, το jHERE σας δείχνει ότι το μέγεθος δεν έχει σημασία. μπορείτε ακόμα να δημιουργήσετε έναν ισχυρό διαδραστικό χάρτη με μια χούφτα επιλογές προσαρμογής. Το jHERE παράγει απεικόνιση χάρτη από τον ΕΔΩ χάρτη, ο οποίος είναι ένας από τους πιο δημοφιλείς παρόχους χαρτών για Windows Phone.

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

• Πηγή δεδομένων χαρτών: ΕΔΩ Χάρτες
• Εξαρτήσεις: jQuery ή ZeptoJS
• Αδεια: Άδεια MIT

Καρτογράφο

Καρτογράφο περιλαμβάνει δύο αρχεία, το Kartograph.ph για τη δημιουργία του χάρτη σε μορφή SVG και το Kartograph.js για την προσθήκη διαδραστικών στοιχείων πάνω από το χάρτη. Δεδομένου ότι το Kartograph.js είναι χτισμένο πάνω από το Raphael.js, ο χάρτης θα λειτουργούσε ωραία στο IE7. Μπορείτε να ρίξετε μια ματιά στα διαδραστικά διαγράμματα χάρτη για να ανακαλύψετε τι μπορεί να κάνει ο Kartograph.

• Πηγή δεδομένων χαρτών: Καρτογράφος
• Εξαρτήσεις: Kartograph.py, Raphael και jQuery
• Αδεια: AGPL και LGPL

Mapel

jQuery Mapel σας επιτρέπει να δημιουργείτε χάρτες με κομψή οπτικοποίηση δεδομένων καθώς και διαδραστικότητα. Μπορείτε, για παράδειγμα, να δημιουργήσετε ένα χάρτη και να ορίσετε κάθε περιοχή στο χάρτη με διαφορετικά χρώματα ανάλογα με την περιοχή. Μπορείτε επίσης να προσθέσετε την επεξήγηση εργαλείου στην περιοχή, καθώς και τους χειριστές συμβάντων όπως Κάντε κλικ ή φτερουγίζω.

Ο χάρτης είναι κατασκευασμένος με SEO κατά νου, παρέχοντας εναλλακτικό περιεχόμενο για ρομπότ μηχανών αναζήτησης που δεν είναι σε θέση να ανιχνεύσουν περιεχόμενο που δημιουργήθηκε με JavaScript.

• Πηγή δεδομένων χαρτών: Raphael.js
• Εξαρτήσεις: jQuery
• Αδεια: Άδεια MIT

D3js

D3.js είναι μια ολοκληρωμένη βιβλιοθήκη JavaScript που θα φέρει τα δεδομένα σας στη ζωή μέσω HTML, SVG και CSS. Η χρήση D3 είναι αρκετά ποικίλη, συμπεριλαμβανομένης της δημιουργίας ενός ιδιαίτερα διαδραστικού χάρτη. Δείτε αυτόν τον χάρτη της Παγκόσμιας Τράπεζας Ανάπτυξης της Παγκόσμιας Τράπεζας και θα δείτε τις δυνατότητες αυτού που μπορείτε να δημιουργήσετε με το D3.js.

• Πηγή δεδομένων χαρτών: D3.js
• Εξαρτήσεις: κανένας
• Αδεια: Απροσδιόριστος

DataMaps

Αν η δημιουργία ενός χάρτη με το D3.js είναι συντριπτική, μπορείτε να το χρησιμοποιήσετε DataMaps. Το DataMaps είναι ουσιαστικά ένα plugin D3.js που αναπτύσσεται ειδικά για την κατασκευή χαρτών. Κληρονομεί πολλές από τις δυνατότητες του D3.js, επομένως μπορείτε να χτίσετε απλούς ή πολύ προσαρμοσμένους χάρτες μαζί του. Αναφέρω ότι ο χάρτης ανταποκρίνεται?

• Πηγή δεδομένων χαρτών: D3.js
• Εξαρτήσεις: D3.js και TopoJSON
• Αδεια: Άδεια MIT

GeoChart

Το GeoChart είναι ένας απλοποιημένος Χάρτης Google που αποδίδει την περιοχή, τους δείκτες και το κείμενο αντί για ένα πλήρες χάρτη με μικροσκοπικές λεπτομέρειες. Ο χάρτης δημιουργείται στο SVG και μπορεί να προσαρμοστεί με πολλούς τρόπους, όπως η αλλαγή των χρωμάτων περιοχής, η προσθήκη αναδυόμενων παραθύρων και οι προσαρμοσμένοι δείκτες χαρτών.

• Πηγή δεδομένων χαρτών: Χάρτες Google
• Εξαρτήσεις: κανένας
• Αδεια: Διαβάστε το Google Maps TOS

Σχεδίαση

Σχεδίαση, ένα plugin jQuery για τη δημιουργία χάρτη μέσω του API Χαρτών Google v3. Η χαρτογράφηση λειτουργεί σε όλα τα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE6. Επομένως, αυτό είναι ένα άλλο μεγάλο πλεονέκτημα που αξίζει την προσοχή σας εάν θέλετε να χτίσετε χάρτη με τον ευκολότερο δυνατό τρόπο.

• Πηγή δεδομένων χαρτών: Χάρτες Google
• Εξαρτήσεις: jQuery
• Αδεια: Άδεια MIT

Μεγαλοπρεπής

Η πρωτοποριακή βιβλιοθήκη JavaScript είναι σχεδιασμένη να δημιουργεί χάρτες των ΗΠΑ. Η βιβλιοθήκη είναι συγκριτικά ελαφριά δεδομένου ότι μπορείτε να προσθέσετε διαδραστικά στοιχεία πάνω από τους χάρτες σας που δημιουργούνται.

• Πηγή δεδομένων χαρτών: Αρχάριος / SVG
• Εξαρτήσεις: κανένας
• Αδεια: Άδεια MIT

GeoComplete

Το GeoComplete είναι μια ξεχωριστή βιβλιοθήκη JavaScript από μόνος του. Η βιβλιοθήκη θα προσθέσει ένα πεδίο εισαγωγής μαζί με τον χάρτη, ο οποίος θα εμφανίζει προτάσεις από πόλεις, χώρες ή κράτη κατά την πληκτρολόγηση.

• Πηγή δεδομένων χαρτών: Χάρτες Google
• Εξαρτήσεις: jQuery
• Αδεια: Άδεια MIT

Εργαλεία χάρτη

Τα Εργαλεία Χαρτών παρέχουν διαισθητικό API για να προσθέσετε τους Χάρτες Google. Υποστηρίζει τη φόρτωση γεωγραφικών δεδομένων JSON όπως TopoJSON και GeoJSON για την απόδοση του χάρτη. Επιπλέον, μπορείτε να προσθέσετε κινούμενους δείκτες που νομίζω ότι θα κάνουν τον χάρτη πιο ζωντανό, εισαγάγετε περιεχόμενο HTML με μεταβλητές ή τοποθετήσεıς ala Handlebars.

• Πηγή δεδομένων χαρτών: Χάρτες Google
• Εξαρτήσεις: GeoJSON / TopoJSON
• Αδεια: Άδεια MIT

OpenLayers

OpenLayers είναι ένα υψηλής απόδοσης πλαίσιο JavaScript open source για τη δημιουργία διαλογικών χαρτών χρησιμοποιώντας διάφορες υπηρεσίες χαρτογράφησης. Μπορείτε να επιλέξετε την προέλευση στρώματος χαρτών χρησιμοποιώντας στρώμα πλακιδίων ή στρώμα διάνυσμα από διάφορες υπηρεσίες χαρτών.

Το OpenLayer είναι έτοιμο για κινητά έτοιμα από το κουτί, κατάλληλο για χτίσιμο χαρτών σε διάφορες συσκευές και προγράμματα περιήγησης. Μπορείτε να χρησιμοποιήσετε το CSS για μια διαφορετική εμφάνιση του χάρτη σας. Για να εφαρμόσετε τον χάρτη στον ιστό σας χρησιμοποιώντας το OpenLayers, εδώ είναι ένα φροντιστήριο που θα σας βοηθήσει.

• Πηγή δεδομένων χαρτών: OpenStreetMap
• Εξαρτήσεις: κανένας
• Αδεια: Απροσδιόριστο

Φυλλάδιο

Οι προγραμματιστές έδωσαν Φυλλάδιο βασικές λειτουργίες για τέλεια λειτουργία, διατηρώντας το μέγεθος του μικρό, ιδανικό για κινητές συσκευές. Για συγκεκριμένες λειτουργίες, απλά επεκτείνετε το Φυλλάδιο χρησιμοποιώντας πρόσθετα. Το φυλλάδιο διαθέτει τα περισσότερα χαρακτηριστικά του χάρτη που χρειάζεστε: επίπεδα κεραμιδιών, αναδυόμενα παράθυρα, δείκτες και ελεύθερα στρώματα διανυσμάτων όπως πολυγραμμές, πολύγωνα, κύκλους ή ορθογώνια. Έρχεται με ωραία προεπιλεγμένα σχέδια αν και μπορείτε να προσαρμόσετε το στυλ χρησιμοποιώντας CSS3 με ευκολία.

Το φυλλάδιο διαθέτει τις περισσότερες δυνατότητες αλληλεπίδρασης χρήσης τόσο για προγράμματα περιήγησης για κινητά όσο και για υπολογιστές γραφείου.

• Πηγή δεδομένων χαρτών: OpenStreetMap
• Εξαρτήσεις: κανένας
• Αδεια: Απροσδιόριστο