Leaflet #054 - MapTilerのベクトルタイル表示

MapTilerのベクトルタイルを表示するメモ。

パッケージインストール

npm install mapbox-gl-leaflet
npm install mapbox-gl

script.js

// デフォルトアイコンパス
L.Icon.Default.imagePath = "img/icon/";

// MIERUNE Streets読み込み
const m_streets = L.mapboxGL({
  attribution:
    '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
  style:
    "https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]",
});

// MAP読み込み
const map = L.map("map", {
  center: [35.681, 139.767],
  zoom: 14,
  zoomControl: true,
  layers: [m_streets],
});

main.js

// CSS一式を読み込んでパッケージ
import "leaflet/dist/leaflet.css";
import "mapbox-gl/dist/mapbox-gl.css";
import "./css/style.css";

// JS一式を読み込んでパッケージ
import "mapbox-gl-leaflet";
import "./js/script.js";

webpack.config.js

const webpack = require("webpack");

module.exports = {
  mode: "production",
  entry: "./_resouce/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "app.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "./dist/img/icon/[name].[ext]",
          },
        },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      L: "leaflet",
      mapboxgl: "mapbox-gl",
    }),
  ],
  devServer: {
    contentBase: __dirname + "/dist",
    publicPath: "/",
    watchContentBase: true,
    open: true,
  },
};

Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter

• 参考文献
  Leaflet
  MapTiler