Contact and Maps

Intro

Κατ' επέκταση του αρχικού ζητήματος για την δημιουργία ενότητας 'Επικοινωνία' στην ιστοσελίδα, αποτέλεσε η μετατροπή της στατικής εμφάνισης των δεδομένων αυτών σε δομή δεδομένων. Στους χάρτες προβάλλεται η ευρύτερη γεωγραφική περιοχή της Πόλης και επισημαίνονται τα κτήρια ενδιαφέροντος, κυρίως για τη διευκόλυνση των νέων φοιτητών του τμήματος.
Η συνοχή μεταξύ αποθετηρίου θέματος – δεδομένων εξασφαλίζεται ως εξής:

• Η δομή αναπαράστασης και ανάλυσης των δεδομένων βρίσκεται στο αποθετήριο του θέματος
  @ ioniodi/minimal-ionio/_includes/communication-info.html
• Η δομή δεδομένων (με τα πραγματικά δεδομένα) βρίσκεται στο αποθετήριο των δεδομένων
  @ ioniodi/sitegr/_data/contact.yml

Developer's Corner

Data Serialization:

Με την χρήση της YAML δημιουργήθηκε η δομή δεδομένων των στοιχείων επικοινωνίας. Αξιοποιήθηκε η λειτουργικότητα του κλειδιού – τιμής (key–value pairs) και της λίστας για την ταξινόμηση των επιμέρους δεδομένων.

address: # Collection of KEY–VALUE PAIRS
  building: "Κτήριο Γραμματειών (Κτήριο 3)"
  street: "Πλατεία Τσιριγώτη 7 (πρώην Πλατεία Ψυχιατρείου)"
  zip: "Κέρκυρα, 49100"

contact_info: # Collection of lists
  email:
    - "cs@ionio.gr" # Multiple lines
    -
  tel: [2661087760, 2661087761, 2661087763, 2661087766] # Single line

Στον χάρτη, το κέντρο προβολής ορίζεται από την ιδιότητα center, όπου εισάγονται το επιθυμητό γεωγραφικό μήκος και πλάτος. Η κλίμακα προβολής ορίζεται από την ιδιότητα zoom, όπου εισάγεται η επιθυμητή απόκλιση από τις γεωγραφικές συντεταγμένες. Το στιλ εμφάνισης του χάρτη ορίζεται από την ιδιότητα providerBasemap με ενδεικτικά παραδείγματα να είναι καταγεγραμμένα στην συμπληρωματική τεκμηρίωση.
Τέλος, αξιοποιείται η λειτουργία των δεικτών (latitude, longitude, popupContent) για τον προσδιορισμό των συντεταγμένων των κτηρίων του Πανεπιστημίου.

map_1:
  center: [39.620693, 19.914733]
  zoom: 14,
  providerBasemap: "OpenStreetMap.Mapnik"
  markers:
    - latitude: 39.623434
      longitude: 19.915203
      popupContent: Αμφιθέατρα Διδασκαλίας - Τμήμα Ιστορίας

Map Coordinates:

Η υλοποίηση του χάρτη βασίζεται στο jekyll-leaflet πρόσθετο (plug-in). Προκειμένου η ιστοσελίδα να αναγνωρίσει και να αναπαραστήσει τον χάρτη, πρέπει να συμπεριληφθεί η λειτουργικότητα αυτή στο αποθετήριο των δεδομένων
@ ioniodi/sitegr/:

• Gemfile: gem "jekyll-leaflet"
• _config.yml: plugins: - jekyll-leaflet.

Ενδεικτικά παραδείγματα χρήσης του εν λόγω πρόσθετου είναι καταγεγραμμένα στην επίσημη τεκμηρίωση.
Τα δεδομένα ανακτώνται προς εμφάνιση από το θέμα μέσω των συναρτήσεων leaflet_map() και leaflet_marker():

{% assign map = site.data.contact["map_1"] %}
{% leaflet_map { ... } %} <!-- center, zoom, providerBasemap  -->
	{%- for marker in map.markers -%}
		{% leaflet_marker 
				{
					"latitude": {{marker.latitude}},
					"longitude": {{marker.longitude}},
					"popupContent": "{{marker.popupContent}}", <!-- QUOTES GO HERE!!! -->
				}
		%}
	{%- endfor -%}
{% endleaflet_map %}

popupContent:

Ένα πρόβλημα μορφοποίησης της ιδιότητας popupContent εμποδίζει την ορθή δημιουργία του χάρτη αν προστεθούν διπλά εισαγωγικά ("") στα αλφαριθμητικά, π.χ. popupContent: "Αμφιθέατρα Διδασκαλίας - Τμήμα Ιστορίας".
Λύση στο πρόβλημα αυτό είναι η προσθήκη εισαγωγικών εντός της δομής επανάληψης της συνάρτησης leaflet_marker(): "popupContent": " {{marker.popupContent}} ",

GMaps:

Η αρχική ιδέα για την περιήγηση με τους χάρτες της Google ήταν η επίσυναψη των υπερσυνδέσμων εντός των δεικτών. Ωστόσο, ύστερα από αναζήτηση αποδείχθηκε πως κάτι τέτοιο δεν είναι εφικτό με την υπάρχουσα δομή της leaflet_marker(). Αντ' αυτού χρησιμοποιήθηκε η συνάρτηση leaflet_geojson() με τον εξής κώδικα:

{% leaflet_geojson {
        "type": "Feature",
        "properties": {
             "popupContent": "Αμφιθέατρα Διδασκαλίας - Τμήμα Ιστορίας",
             "href": "https://maps.google.com/maps/place/39.623434,19.915203"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [39.623434, 19.915203]
        } 
    }
%}

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

Τελικά, την λύση έδωσε η δημιουργία της δομή δεδομένων για τον χάρτη, καθώς με την επαναχρησιμοποίηση των συντεταγμένων (latitude, longitude) εντός μιας δομής επανάληψης, παράγεται το επιθυμητό αποτέλεσμα:

{%- for marker in map.markers -%}
	<h5><a href="https://maps.google.com/maps/place/{{marker.latitude}},{{marker.longitude}}"> {{marker.popupContent}} </a></h5>
{%- endfor -%}

Related Issues/PRs:

https://github.com/ioniodi/site-gr/issues/69,
https://github.com/ioniodi/site-gr/issues/142,
https://github.com/ioniodi/site-gr/issues/124,
https://github.com/ioniodi/sitegr/issues/1,
https://github.com/ioniodi/minimal-ionio/pull/34,
https://github.com/ioniodi/sitegr/pull/3.