dayjournal memo

Total 992 articles!!

maplibregljs

MapLibre GL JS #053 – Viteでビルド環境構築

Yasunori Kirimoto's avatar
Yasunori Kirimoto 2022/6/21


画像



MapLibre GL JSとViteでビルド環境を構築したメモ。


GitHubでも公開しています。MapLibre GL JSでのビルド環境を手軽に始めたい方ぜひご利用ください。

maplibregljs-starter



画像



ディレクトリ構成


画像


package.json

{
  "name": "maplibregljs-starter",
  "version": "2.1.9",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.5.4",
    "vite": "^2.9.9"
  },
  "dependencies": {
    "maplibre-gl": "^2.1.9"
  }
}


./src


style.css

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  z-index: 0;
  height: 100%;
}


./src


main.ts

import './style.css'
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';

const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            MIERUNEMAP: {
                type: 'raster',
                tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution:
                    "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL.",
            },
        },
        layers: [
            {
                id: 'MIERUNEMAP',
                type: 'raster',
                source: 'MIERUNEMAP',
                minzoom: 0,
                maxzoom: 18,
            },
        ],
    },
    center: [139.767, 35.681],
    zoom: 11,
});

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true,
    })
);


./


index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>MapLibre GL JS Starter</title>
    </head>
    <body>
        <div id="map"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>


ファイルの準備ができたら対象ディレクトリでコマンド実行


パッケージインストール

npm install

ビルド

npm run build

開発

npm run dev


book

Q&A