Ο χάρτης ποιότητας αέρα σε πραγματικό χρόνο του έργου World Air Quality Index μπορεί να ενσωματωθεί σε οποιονδήποτε ιστότοπο με μία μόνο ετικέτα script. Ο χάρτης εμφανίζει τον Δείκτη Ποιότητας Αέρα σε πραγματικό χρόνο όλων των σταθμών παρακολούθησης γύρω από την επιλεγμένη τοποθεσία και ενημερώνεται αυτόματα.

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

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-lang="el"
        data-height="450"></script>

Αποτέλεσμα (μετακινήστε ή μεγεθύνετε τον χάρτη για να ενημερώσετε τον παραπάνω κώδικα):

Για να αποφύγετε την καθυστέρηση στην απόδοση της σελίδας σας, το σενάριο μπορεί να φορτωθεί ασύγχρονα, με το χαρακτηριστικό async ή defer . Δεδομένου ότι το σενάριο δεν εκτελείται στη θέση του στη σελίδα, το χαρακτηριστικό data-dom-target απαιτείται για να καθορίσει το στοιχείο στο οποίο εισάγεται ο χάρτης. Το στοιχείο μπορεί να τοποθετηθεί οπουδήποτε στη σελίδα, πριν ή μετά την ετικέτα script.

<div id="aqi-map"></div>

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="el"
        data-dom-target="aqi-map"
        data-height="450"></script>

Αποτέλεσμα:

Φόρτωση του σεναρίου από javascript

Το σενάριο μπορεί επίσης να εισαχθεί δυναμικά, για παράδειγμα από έναν διαχειριστή ετικετών ή μια εφαρμογή μίας σελίδας. Ισχύει ο ίδιος κανόνας data-dom-target :

<div id="aqi-map"></div>

<script>
  var s = document.createElement("script");
  s.src = "https://aqicn.org/maplet/embed.v1.js";
  s.setAttribute("data-city", "london");
  s.setAttribute("data-dom-target", "aqi-map");
  s.setAttribute("data-lang", "el");
  document.head.appendChild(s);
</script>

Ο χάρτης έχει διαμορφωθεί με τα ακόλουθα χαρακτηριστικά της ετικέτας script. Όλα είναι προαιρετικά, εκτός από data-dom-target για ασύγχρονη φόρτωση.

Πολλοί χάρτες μπορούν να ενσωματωθούν στην ίδια σελίδα: χρησιμοποιήστε μία ετικέτα script ανά χάρτη.

Συμπληρώστε τις παρακάτω επιλογές για να λάβετε τον κώδικα για τον χάρτη σας και να κάνετε προεπισκόπηση του.

• Οι σύνδεσμοι στον χάρτη (π.χ. λεπτομέρειες σταθμού) ανοίγουν σε νέα καρτέλα, ώστε οι επισκέπτες να μην εγκαταλείπουν τη σελίδα σας.
• Ο χάρτης μπορεί να ενσωματωθεί σε οποιονδήποτε ιστότοπο που εξυπηρετείται μέσω http ή https . Δεν μπορεί να εμφανιστεί από σελίδα που έχει ανοιχτεί ως τοπικό αρχείο ( file:// ).
• Εάν ο χάρτης τοποθετηθεί σε ένα iframe με περιβάλλον δοκιμών (sandbox), το sandbox πρέπει τουλάχιστον να επιτρέπει allow-scripts allow-same-origin allow-popups .
• Μην καταργείτε ή αποκρύπτετε την αναφορά στο έργο του Παγκόσμιου Δείκτη Ποιότητας Αέρα και στις πηγές δεδομένων.

Χρήση ενός iframe απευθείας

Εάν δεν μπορείτε να προσθέσετε σενάρια στη σελίδα σας, ο χάρτης μπορεί επίσης να ενσωματωθεί με ένα απλό iframe. Η τοποθεσία είναι μέρος της διεύθυνσης URL και η προβολή ορίζεται με τις παραμέτρους lat , lng και zoom :

<iframe src="https://aqicn.org/maplet/london/el/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>