Versione online (CDN)

OpenLayers, come molte altre librerie Javscript, può essere integrato all’interno della pagina web usandone le versioni pubblicate in rete da un Content Devilery Network (CDN), ovvero un servizio cloud che espone risorse statiche, come file JS o CSS, in modo estremamente efficiente (velocità e disponibilità).

Uno dei servizi più noti e utilizzati è https://cdnjs.com/ che offre, gratuitamente, l’accesso a moltissime librerie, tra cui OL: https://cdnjs.com/libraries/ol3

Per utilizzare questo servizio è sufficiente fare riferimento alle due URL, una per la libreria Javascript vera e propria e uno per il foglio di stile, all’interno dei relativi tag della pagine HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Corso OL</title>
  <meta name="description" content="Corso OL">
  <meta name="author" content="Giovanni Allegri">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.3.1/ol.css">
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.3.1/ol.js"></script>
</body>
</html>

Versione in locale (server)

Se invece si vuole tenere una versione in locale sul proprio server, è possibile scaricare la libreria dalla pagina di download di OpenLayers e inserirla in una posizione servita staticamente dal proprio server HTTP.

Se ad esempio il nostro server espone i file statici da una cartella base “/assets”, potremmo posizionare i due file di OL all’interno di “/assets/js” e “/assets/css”, e inserire una URL (relativa o assoluta) all’interno della nostra pagina.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Corso OL</title>
  <meta name="description" content="Corso OL">
  <meta name="author" content="Giovanni Allegri">
  <link rel="stylesheet" href="/assets/css/ol.css">
</head>
<body>
  <script src="/assets/js/ol.js"></script>
</body>
</html>

Inclusione a tempo di compilazione

Se si usano sistemi di build, come Gulp, Grunt, Webpack, ecc., OL viene talvolta incluso in fase di “compilazione” dei bundle applicativi. Il bundling (inpacchettamento in un unico file, possibilmente compresso, assieme alle altre librerie) può avvenire tramite file di specifica, es. package.json di NPM, oppure su richiesta all’interno del codice, come nell’approccio CommonJS tramite Browserify in cui si richiede l’uso di OL direttamente nel codice con le direttive require(). npmjs offre l’ultima versione di OL disponibile per questo tipo di utilizzo