Vedremo due possibili esempi per l'uso di codice/servizi scritti da altri: alcuni modi per creare le mappe e un modo per avere le previsioni meteo.
Mappe
Come al solito le alternative disponibili sono molte, una è quella più nota: Google Maps. È utilizzabile anche in altri siti ma è proprietaria e bisogna registrarsi presso Google per cui faremo soltanto un accenno alla fine.
Qualche indicazione in più la daremo per leaflet e openlayers, la prima è molto semplice da usare mentre la seconda è molto più versatile.
Leaflet
Per avere una mappa visualizzata all'interno di un elemento HTML ce la possiamo cavare con una manciata di righe di codice:>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>mappe con leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 900px;"></div>
<script>
const zoom = 18;
const lat = 43.35160018000546;
const lng = 12.565156706685794;
// creo una mappa
const map = L.map("map");
map.setView([lat, lng], zoom);
// aggiungo un layer alla mappa
let layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
layer.addTo(map);
</script>
</body>
</html>
I tag link e script servono per importare la libreria
vera e propria (script) e il suo fogli di stile (link).
L'uso della libreria stessa si risolve in poche righe, due delle quali iniziano con "L" che è il nome dell'oggetto che ci permette di creare le mappe e i loro elementi.
L.map(elemento) crea una nuova mappa inserendola nell'elemento il cui
id viene passato come parametro alla funzione,
la mappa appena creata ha un metodo setView che prende come parametro le coordinate
geografiche del centro della mappa e il livello di zoom (più è alto e più la mappa sarà dettagliata)
Praticamente sempre quelle due righe vengono scritte in una soltanto:
const map = L.map("map").setView([lat, lng], zoom);<
Nelle due righe successive usiamo un meccanismo analogo per creare un layer ad aggiungerlo ad una mappa già creata. Una mappa può essere formata da tanti layer (ad esempio uno che contiene le foto satellitari e un altro con i nomi delle città) che vengono tracciati uno sopra l'altro.
Anche queste due istruzioni vengono solitamente raggruppate in una sola, eliminando anche la variabile "layer" che in questa caso non è utile nel resto del programma:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Un ulteriore passo spesso utile è di aggiungere un segnalino (marker) alla mappa, visto che ci siamo facciamo anche in modo che al click sul segnalino compaia un popup!
const segnalino = L.marker([43.35160018000546, 12.565156706685794]);
segnalino.addTo(map);
segnalino.bindPopup("IIS Cassata Gattapone,<br/>sede Cassata");
Anche questo di solito viene scritto in una forma più compatta:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);