Tutorials.ja

Tutorials（日本語）

ブラウザおよびバンドラーから MaplatCore を利用するためのステップバイステップガイドです。

注: 最新のクイックスタート（インストールコマンド・CDN URL・バージョン番号）は README を参照してください。本ページはリリース非依存の チュートリアルを扱います。

目次

• 1. ブラウザ利用（ES Modules + CDN）
• 2. バンドラー利用（Vite / TypeScript）
• 3. イベントハンドリング
• 4. POI レイヤー管理
• 5. ラインとベクター
• 関連項目

---

1. ブラウザ利用（ES Modules + CDN）

ブラウザでバンドラーを使わずに利用する場合は、MaplatCore より先に OpenLayers を 読み込む必要があります。MaplatCore を UMD スクリプトとして読み込む場合、 グローバル ol 名前空間が存在することを前提とします。

<!-- OpenLayers CSS（必須） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10/ol.css">
<!-- OpenLayers JS（必須） -->
<script src="https://cdn.jsdelivr.net/npm/ol@10/dist/ol.js"></script>

<div id="map_div" style="width: 100%; height: 100vh;"></div>

<!-- MaplatCore -->
<script src="https://cdn.jsdelivr.net/npm/@maplat/core@0.13.2/dist/maplat_core.umd.js"></script>

<script>
  var option = {
    startFrom: 'gsi',     // 初期地図 ID
    div: 'map_div'        // ターゲット div ID（オプション・デフォルトは 'map_div'）
  };

  MaplatApp.createObject(option).then(function (app) {
    console.log('Maplat initialized', app);
  });
</script>

オプション: MapLibre GL JS / Mapbox GL JS

ベクタータイルを使用する場合は MapLibre GL JS または Mapbox GL JS も読み込み、 グローバルを option に注入します:

var option = {
  maplibregl: maplibregl,
  // mapboxgl: mapboxgl,
  // mapboxToken: 'YOUR_ACCESS_TOKEN',
  startFrom: 'gsi',
};

※最新の互換バージョンを使用してください。

2. バンドラー利用（Vite / TypeScript）

import { MaplatApp } from '@maplat/core';
import 'ol/ol.css'; // 必須: OpenLayers CSS

const option = {
  startFrom: 'gsi',
};

MaplatApp.createObject(option).then((app) => {
  console.log('Maplat initialized', app);
});

peer dependency として ol（OpenLayers）v9 または v10 を別途インストールする 必要があります。

pnpm add @maplat/core ol

3. イベントハンドリング

app.addEventListener(type, callback) でユーザー操作に反応します。

MaplatApp.createObject(option).then(function (app) {
  app.addEventListener('clickMarker', function (evt) {
    console.log('Marker clicked:', evt.detail);
    app.selectMarker(evt.detail.namespaceID);
  });

  app.addEventListener('clickMap', function (evt) {
    console.log('Map clicked:', evt);
  });
});

イベント一覧:

• clickMarker — マーカーがクリックされたときに発火します。evt.detail に マーカーデータが含まれます。
• clickMap — 地図の背景がクリックされたときに発火します。
• gps_result — GPS 位置更新があったときに発火します。
• gps_error — GPS が失敗したときに発火します。

4. POI レイヤー管理

Maplat はマーカーを「レイヤー」で管理します。デフォルトレイヤーは 'main' です。 追加レイヤーを作成し、表示/非表示を切り替えられます。

MaplatApp.createObject(option).then(function (app) {
  // カスタムレイヤーを追加
  app.addPoiLayer('main2', {
    icon: 'parts/blue_marker.png',
    selected_icon: 'parts/red_marker.png',
  });

  // カスタムレイヤーへマーカーを追加
  app.addMarker(
    {
      lng: 141.151995,
      lat: 39.701599,
      name: '桜山神社',
      desc: '盛岡にある歴史ある神社です。',
    },
    'main2',
  );

  // 表示/非表示を切り替え
  app.showPoiLayer('main2');
  app.hidePoiLayer('main2');

  // 利用可能なレイヤー ID 一覧を取得
  console.log(app.listPoiLayers());
});

5. ラインとベクター

ラインとベクターは GeoJSON 互換のフィーチャコレクションとして地図上に描画されます。

app.addLine({
  lnglats: [
    [141.151995, 39.701599],
    [141.151137, 39.703736],
    [141.1521671, 39.7090232],
  ],
  stroke: { color: '#ffcc33', width: 2 },
});

app.addVector({ /* GeoJSON ポリゴン */ });

リセット / クリア:

app.resetLine();
app.clearLine();
app.resetVector();
app.clearVector();

---

英語版はこちら / Read this page in English

関連項目

• Home
• Concepts.ja — データ形式と座標変換の理論
• API-Reference.ja — API の概念と利用パターン
• README — 最新のクイックスタート
• docs/api/ — API シグネチャ（正本）