City maps Embed - KonstantinosG/site-gr GitHub Wiki

Οι χάρτες που προβάλλουν την ευρύτερη γεωγραφική περιοχή της πόλης χρησιμοποιούνται προκειμένου να υποδεικνύουν σημεία ενδιαφέροντος κυρίως για τη διευκόλυνση νέων φοιτητών του τμήματος. Έχουν εισαχθεί σαν κομμάτι της σελίδας "Επικοινωνία" ή "Contact" και σε αυτούς έχουν προστεθεί πινέζες (markers) για τα σημεία ενδιαφέροντος. Παρακάτω περιέχονται οδηγίες χρήσιμες για εισαγωγή και τροποποίηση του χάρτη. Τα αρχεία που θα χρειαστεί ένας προγραμματιστής να επεξεργαστεί (σύμφωνα με την παρούσα δομή της σελίδας) είναι τα communication-info.html και contact.md.

Προαπαιτούμενα

Προκειμένου η ιστοσελίδα να αναγνωρίσει και να εισάγει τους χάρτες χρειάζεται η τροποποίηση των παρακάτω αρχείων:

Στο 'Gemfile': gem "jekyll-leaflet"
Στο '_config.yml', στο σημείο που βρίσκονται τα plugins:

plugins:
   - jekyll-leaflet
   ...

Δημιουργία πλαισίου χάρτη

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

{% leaflet_map {"center": [39.620693, 19.914733],
                "zoom" : 14,
                "providerBasemap": "OpenStreetMap.Mapnik" }
%}

Your map code goes here (e.g. markers, geojson, etc.)

{}
{% endleaflet_map %}

Με αυτόν το τρόπο έχει εισαχθεί πλέον ένα πλαίσιο το οποίο κληρονομεί τις ιδιότητες που σχετίζονται με το μέγεθός του από την εκάστοτε σελίδα. Σε αυτήν την περίπτωση δημιουργείται ένα πλαίσιο που περιλαμβάνει τον χάρτη με zoom 14 (κλίμακα προβολής ή απόσταση από ένα συγκεκριμένο γεωγραφικό σημείο). Το κέντρο προβολής του χάρτη έχει οριστεί από τη πρώτη μεταβλητή (center) στην οποία θα πρέπει να εισάγονται το επιθυμητό γεωγραφικό μήκος και πλάτος. Η τελευταία μεταβλητή (providerBasemap) ορίζει το στύλ εμφάνισης του χάρτη. Στον σύνδεσμο παρέχεται οπτικοποίηση των διφορετικών στυλ που μπορεί να δεχθεί ο χάρτης. Οποιοδήποτε κομμάτι κώδικα σχετίζεται με τον χάρτη προστίθεται πριν το {} που φαίνεται στην προτελευταία σειρά του κώδικα παραπάνω.

Εισαγωγή σημείων ενδιαφέροντος (markers)

Τα σημεία ενδιαφέροντος εισάγονται στον χάρτη με τον εξής τρόπο:

{% leaflet_marker { "latitude": 39.621049,
                    "longitude": 19.923906,
                    "popupContent" : "Ιόνιος Ακαδημία - NOC"}
%}

Το popupContent προβάλλει το κείμενό του κατά το κλικ του χρήστη πάνω στον marker.

Περιήγηση με Google Maps της συσκευής

Για την περιήγηση του χρήστη με τους προσωπικούς του χάρτες μπορεί να χρησιμοποιηθεί ένας σύνδεσμος που τον μεταφέρει απευθείας στην εφαρμογή του Google Maps: https://maps.google.com/maps/place/39.620603,19.914945. Αυτός μπορεί να χρησιμοποιηθεί με την εισαγωγή ενός απλού href μέσα σε κοινή html όπως έγινε και στην παρούσα ιστοσελίδα. Ο σύνδεσμος αυτός μεταφέρει το χρήστη σε Google Maps περιβάλλον και τοποθετεί μία πινέζα (marker) στο σημειο που ορίζεται στο τέλος του συνδέσμου 39.620603,19.914945 longitude,latitude αντίστοιχα.

Σημείωση: Στην περίπτωση που η συσκευή δεν έχει εγκατεστημένους τους χάρτες της Google ο σύνδεσμος μεταφέρει το χρήστη στον ιστότοπο των Google Maps όπου δημιουργείται κανονικά το marker που υποδεικνύει την επιλεγμένη τοποθεσία.

Εμπόδια στην υλοποίηση

Εισαγωγή συνδέσμου περιήγησης σε Google Maps εντός των markers του χάρτη

Η αρχική ιδέα προέβλεπε την εισαγωγή του συνδέσμου περιήγησης στο πλαίσιο που εμφανίζεται κατά την επιλογή ενός marker, αλλά έπειτα από αναζήτηση και υλοποίηση άλλαξαν τα σχέδια στην παρούσα εκδοχή. Τα leaflet markers δεν μπορούσαν να δεχθούν εισαγωγή συνδέσμου και προκειμένου να γίνει παράκαμψη αυτού του περιορισμού, χρησιμοποιήθηκε ανταυτού το leaflet_geojson με τον εξής κώδικα:

{% leaflet_geojson {
        "type": "Feature",
        "properties": {
             "popupContent": "Ιόνιος Ακαδημία - NOC",
             "href": "https://maps.google.com/maps/place/39.625709,19.924304"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [39.625709, 19.924304]
        } 
    }
%}

Το ζήτημα που προέκυψε σε αυτόν τον κώδικα είναι πως το marker δεν εμφανιζόταν στο σωστό σημείο. Να σημειωθεί πως ο παραπάνω κώδικας δεν δημιουργούσε πρόβλημα κατά το build της σελίδας και ο marker υπήρχε στον χάρτη, όμως δεν είχε την αναμενόμενη λειτουργικότητα καθώς εμφανιζόταν σε λάθος γεωγραφικό σημείο. Περισσότερες πληροφορίες στο #142.

Εισαγωγή Google Maps αντί για leaflet

Αρχικά για την υλοποίηση των χαρτών είχαν χρησιμοποιηθεί οι υπηρεσίες που παρέχει η Google για την εισαγωγή των χαρτών της, όμως δεν ήταν εφικτό να παραμείνουν αυτοί οι χάρτες. Tο Google Cloud από το οποίο παρέχονται οι υπηρεσίες της Google για προγραμματιστές, απαιτεί ένα API κλειδί το οποίο είναι συνδεδεμένο με έναν λογαριασμό Google σε αντίθεση με το leaflet το οποίο δεν ζητά τέτοιου είδους ενέργειες για την εισαγωγή των χαρτών του. Επιπλέον, το Google cloud έχει περιορισμένες δυνατότητες για τους embedded χάρτες και χρεώνει για περισσότερες.

Σχετικά issues

#69, #142, #136

Χρήσιμοι σύνδεσμοι

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