Nel seguente codice costruiamo una mappa molto semplice, contenente una base cartografica ottenuta da OpenStreetMap, ovvero tile (tasselli) di immagini PNG pre-renderizzate a partire dai dati del DB OpenStreetMap e messe a disposizione dai server OSM (https://a|b|c.tile.openstreetmap.org).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Corso OL - Es. 1</title>
    <meta name="description" content="Corso OL">
    <meta name="author" content="Giovanni Allegri">
    <link rel="stylesheet" href="../assets/css/ol.css">
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="../assets/js/ol.js"></script>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
    </script>
  </body>
</html>

Un <div> per la mappa

Per poter inserire e visualizzare una mappa nella pagina serve anzitutto definire un elemento HTML che ne faccia da contenitore. Nell’esempio abbiamo definito un elemento div

<div id="map" class="map"></div>

nel quale OL andrà ad inserire tutti gli ulteriore elementi DOM necessari a visualizzare la mappa e ad interagire con essa.

Di base OL inserirà un canvas, che è un elemento supportato ormai dalla maggior parte dei browser attuali, attraverso il quale è possibile disegnare elementi grafici nel browser e che fornisce una ricca API per poter interagire con tali elementi. OL supporta anche il rendering tramite elementi SVG o canvas WebGL, a seconda delle possibilità offerte dal browser oppure sulla base della configurazione dell’elemento ol.Map.

Al momento della creazione della mappa, tramite il successivo codice Javascript, dobbiamo assicurarci che l’elemento contenitore sia già stato costruito e renderizzato dal browser, altrimenti OL non sarà in grado di utilizzarlo. Nel nostro caso siamo sicuri che l’elemento sia già presente al momento della creazione della mappa, poiché il codice Javascript si trova in una posizione successiva, per cui il browser avrà già elaborato il DOM della pagine HTML al momento del suo utilizzo.

L’oggetto ol.Map

Questo oggetto è l’elemento fondamentale per la creazione di una mappa. Si tratta del contenitore (ce ne possono essere più di uno) nel quale andremo a collocare tutti gli altri oggetti che compongono la mappa: layer cartografici, interazioni, controllo visuali per le interazioni, ecc.

Come quasi tutti gli oggetti OL, ol.Map viene inizializzato tramite un oggetto contenente tutte le proprietà di configurazione. Nel nostro caso la configurazione contiene i layer che vogliamo inserire da subito in mappa, l’elemento DOM contenitore e la vista di cui parleremo dopo.

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

Assegnando la nuova istanza alla variabile map potremo avere un riferimento a tale oggetto e accedere a tutte le sue proprietà e metodi.

ol.View, il motore geometrico della mappa

ol.Map è l’oggetto padre, il contenitore di tutte le parti che compongono una mappa e fa da gestore dello stato generale della mappa e dei suoi elementi. La mappa tuttavia non saprebbe come mostrare, e dove posizionare, gli elementi grafici che rappresentano i dati geografici, se non avesse associato l’oggetto ol.View. Questo oggetto è il motore geometrico della mappa, a cui sono delegati tutti i calcoli relativi alla visualizzazione degli elementi grafici (posizione, rotazione, risoluzione/scala) e al loro posizionamento all’interno dell’elemento HTML contenitore in base al sistema di riferimento associato alla mappa e a quello di ogni singolo strato geografico.

Nell’esempio noterete che alla mappa non è stato associato nessun sistema di riferimento, che nei termini di OL viene semplicemente chiamato projection. In realtà nel momento in cui abbiamo istanziato l’oggetto ol.View, all’interno della configurazione della mappa, ad esso viene associata di base la proiezione EPSG:3857, ovvero la cosiddetta “Google Mercator”, che è la proiezione normalmente utilizzata dai servizi cartografici web come OSM, Google Maps, Bing, ecc.

Al momento della creazione di ol.View abbiamo anche definito dove posizionare la visualizzazione iniziale center: [0, 0] in termini di coordinate metriche X,Y EPSG:3857 e a che livello zoom. Di questo parleremo più avanti.

Optional inclusi

Potete notare che la mappa include la possibilità di zoomare e spostarsi all’interno dello spazio cartografico, grazie alle interazioni e ai controlli disponibili già di default.

Interazioni

Le interazioni sono oggetti che permettono di gestire gli eventi generati dal browser, ad es. al click del mouse sulla mappa o al movimento della rotella del mouse, e di trasformarli in azioni eseguite sulla mappa. Di base, se non definito altrimenti, ad una mappa vengono associate le seguenti interazioni:

traslazione (pan) della mappa con il click col tasto sx e il trascinamento del mouse
zoom in / zoom out al movimento della rotella del mouse
zoom ad estensione rettangolare con il tasto Shift della tastiera e, contemporaneamente, click e trascinamento del mouse
(device touch) zoom e rotazione della mappa col pinch delle dita

OL contiene già molte interazioni di base che possono essere estese, configurate e modificate per i propri scopi specifici.

Controlli

I controlli sono elementi visuali con i quali si possono attivare/disattivare le interazioni. Come per le interazioni, OL contiene già alcuni controlli predefiniti.

Quando viene istanziato ol.Map vengono automaticamente creati i seguenti controlli:

pulsanti zoom in/zoom out
(device touch) pulsante per il ripristino della rotazione a nord a seguito di una rotazione della mappa tramite pinch