uMap selfhost 自架

uMap

uMap 讓你可以在幾分鐘內使用 OpenStreetMap 圖層建立地圖，並將其嵌入到你自己的網站中。

code: https://github.com/umap-project/umap
docs: https://docs.umap-project.org/

uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site. Because we think that the more OSM will be used, the more OSM will be improved. Built on top of Django and Leaflet.

功能類似Google的"My Map"

docker compose

參考: https://docs.umap-project.org/en/stable/deploy/docker/

請根據你的需求做修改:

• 容器名稱
• 網址
• SECRET_KEY (隨機生成一個填入)
• Port
• …

services:
  db:
    # check https://hub.docker.com/r/postgis/postgis to see available versions
    image: postgis/postgis:14-3.4-alpine
    container_name: umap.frakw.work_db
    environment:
      - POSTGRES_HOST_AUTH_METHOD=trust
    volumes:
      - ./umap_db:/var/lib/postgresql/data

  app:
    # Check https://hub.docker.com/r/umap/umap/tags to find the latest version
    image: umap/umap:2.8.2
    container_name: umap.frakw.work_app
    ports:
      # modify the external port (8001, on the left) if desired, but make sure it matches SITE_URL, below
      - "8001:8000"
    environment:
      - DATABASE_URL=postgis://postgres@db/postgres
      - SITE_URL=https://umap.frakw.work
      - STATIC_ROOT=/srv/umap/static
      - MEDIA_ROOT=/srv/umap/uploads
      - SECRET_KEY=
      - UMAP_ALLOW_ANONYMOUS=False
      #- DEBUG=i1
      #- SOCIAL_AUTH_OPENSTREETMAP_OAUTH2_KEY=
      #- SOCIAL_AUTH_OPENSTREETMAP_OAUTH2_SECRET=
    volumes:
      - ./umap_userdata:/srv/umap/uploads
      # FIX the path on the left, below, to your location 
      # OPTIONAL, you can comment the line below out for default
      # values to apply
      #- ./umap.conf:/etc/umap/umaip.conf
    restart: unless-stopped
    depends_on:
      - db

#volumes:
  #umap_userdata:
  #umap_db:

建置容器指令

docker compose up -d

設定cloudflare tunnel，或依你的方式來反向代理

進入 https://umap.frakw.work/
成功看到頁面

登入管理員帳號

進入容器中

docker exec -it umap.frakw.work_app /bin/bash

創建管理員帳號

umap createsuperuser
輸入username
輸入email
輸入password

在你的網址後加上admin，進入管理員登入頁面
EX: https://umap.frakw.work/admin

輸入剛剛創建的帳號密碼

即可看到管理頁面

添加OpenStreetMap Tile Layer

uMap預設使用的地圖是Positron，但這個地圖比缺乏細節資訊，所以要讓他可以支援OpenStreetMap

從管理頁面中進入"Add Tile Layer"
URL Template填入 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
Attribution填入 © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>

成功支援OpenStreetMap

地圖範例

這是我記錄去埃及旅遊的地圖，有GPS紀錄與各個景點的圖片
https://umap.frakw.work/zh-tw/map/2025-01_1

地圖製作教學

有機會再寫…