Mapkick: mappe online con JS e Python

Mapkick è una libreria che permette di includere una mappa in una pagina Web con una sola linea di codice. Il progetto permette di implementare mappe in diversi linguaggi (JavaScript, Python e Ruby) e supporta sia Mapbox che MapLibre.

Mapbox è un servizio per la geolocalizzazione appositamente dedicato agli sviluppatori che offre anche funzionalità dedicate alla navigazione satellitare e propone un'applicazione per il design, Mapbox Studio, che funziona come Photoshop ma per le mappe. MapLibre è invece un SDK che permette di interagire con libreria per il mapping Open Source in applicazioni per Internet o per il mobile.

Generare una mappa con JavaScript

Per chi desidera ad esempio creare una mappa interattiva con JavaScripte e Mapbox, è possibile scaricare lo script mapkick.js e includere il codice seguente tra i tag head di un file HTML:

<link href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<script src="mapkick.js"></script>
<script>
  mapboxgl.accessToken = "YOUR-TOKEN"
</script>

Come è facile notare Mapbox richiede un token di accesso recuperabile tramite un'iscrizione al servizio. MapLibre, invece, non richiede la disponibilità di un token per l'autenticazione:

<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="mapkick.js"></script>
<script>
  Mapkick.options = {style: "https://demotiles.maplibre.org/style.json"}
</script>

In entrambi i casi, una volta terminata la fase di inclusione della libreria la mappa può essere generata con una semplice chiamata a Mapkick.Map():

<div id="map" style="height: 400px;"></div>
<script>
  new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
</script>

Generare una mappa con Python

Per chi preferisce utilizzare Python, si può installare la libreria utilizzando il package manager pip:

pip install mapkick

Sono supportati sia Django che Flask mentre la libreria di riferimento è Mapbox GL JS v1. per la quale è comunque necessario un token di accesso collegato ad un account Mapbox (variabile d'ambiente MAPBOX_ACCESS_TOKEN). Con il framework Django si deve aggiungere il codice seguente a settings.py:

INSTALLED_APPS = [
    'mapkick.django',
    # ...
]

per poi caricare JavaScript:

{% load static %}
<script src="{% static 'mapkick.bundle.js' %}"></script>

e creare la mappa in una view:

def index(request):
    map = Map([{'latitude': 37.7829, 'longitude': -122.4190}])
    return render(request, 'home/index.html', {'map': map})

per poi terminare il tutto con l'inclusione nel template:

{{ map }}