Menyediakan JSON gaya yang kompatibel dengan MapLibre dari openstreetmap-tile-server

14 Desember 2021 [Matrix, Programming]

[Previous: Self-hosting maps on my laptop]

Pada postingan sebelumnya saya menunjukkan cara menjalankan tumpukan server ubin OSM secara lokal.

Sekarang saya telah berhasil menghubungkan ujung depan MapLibre GL JS ke server ubin lokal saya dan itu menampilkan peta!

(Ini berjalan di dalam Element Web, pengirim pesan Matrix mengagumkan yang sedang saya kerjakan. CATATAN: ini adalah prototipe yang sangat, sangat awal!)

Di posting sebelumnya saya menjalankan perintah docker run untuk meluncurkan server ubin.

Kali ini, saya harus membuat file style.json:

{
  "version": 8,
  "sources": {
    "localsource": {
      "type": "raster",
      "tiles": [
        "
      ],
      "tileSize": 256,
      "attribution": "Maps Copyright 2018 <a href=\" GmbH</a> and <a href=\" Contributors</a>"
    }
  },
  "layers": [
    {
      "id": "locallayer",
      "source": "localsource",
      "type": "raster"
    }
  ]
}

dan kemudian saya meluncurkan server ubin dengan file yang tersedia di root dokumen:

docker run \
    -p 8080:80 \
    -v $PWD/style.json:/var/www/html/style.json \
    -v openstreetmap-data:/var/lib/postgresql/12/main \
    -v openstreetmap-rendered-tiles:/var/lib/mod_tile \
    -e THREADS=24 \
    -e ALLOW_CORS=enabled \
    -d overv/openstreetmap-tile-server:1.3.10 \
    run

Sekarang saya bisa mengarahkan MapLibre GL JS saya ke file gaya itu dengan kode seperti ini:

this.map = new maplibregl.Map({
    container: my_container,
    style: "
    center: [0, 0],
    zoom: 13,
});

Sangat bersemangat untuk menggambar peta tanpa ada permintaan yang keluar dari mesin saya!