導入

WebGIS プログラミングの学習を始めることは、特に HTML、CSS、JavaScript の世界に慣れていない場合には、困難になる可能性があります。幸いなことに、Replit のようなツールを使用すると、シンプルかつ直接的な方法で学習を始めることができます。この記事では、MapTiler を使用して単純な WebGIS アプリケーションを作成する基本的な手順を説明します。このチュートリアルでは、ブラウザを使用するだけでどこからでもアクセスできるインタラクティブなマップを作成する方法を学びます。

ステップ 1.Replit でアカウントとプロジェクトを作成する

1.リプリットに登録:

• リプリットを開く
• 右上隅の「サインアップ」ボタンをクリックします。
• 希望の登録方法 (Google、GitHub、または電子メール) を選択します。
• 登録が成功すると、Replit ダッシュボードに移動します。

2.新しいプロジェクトの作成:

• Replit ダッシュボードで、[Create Repl] ボタンをクリックします。
• [テンプレート]セクションで、「HTML、CSS、JS」を選択します。
• プロジェクトに名前を付けます (例: 「WebGIS-Simple」)。
• 「Create Repl」をクリックしてプロジェクトを作成します。 プロジェクトが作成されると、index.html、style.css、script.js の 3 つの主要なファイルが表示されます。これらのファイルは、Web ページの構築に使用されます。

ステップ 2: HTML 構造のセットアップ

1.基本的な HTML 構造を理解する:

• Replitでindex.htmlファイルを開きます。
• index.html は、Web ページの構造と基本コンテンツを決定するファイルです。

2.マップに要素を追加:

• index.html の内容を次のコードに置き換えます。

    
WebGIS Sederhana Menggunakan MapTiler
    

    

説明：

• : ページタイトルを表示します。

• : 地図を表示する場所。
• Maplibre GL: MapTiler からの地図を表示するために使用されます。



ステップ 3: CSS を使用してスタイルを追加する

1.マップビュー用のCSSの追加:

• style.css ファイルを開きます。
• style.css ファイルの内容を次のコードに置き換えます。

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

説明：

• body, html: 地図が画面全体を使用できるようにマージンとパディングを設定します。
• #map: マップ サイズを全幅、高さ 500 ピクセルに設定します。
• h1: ページ中段のタイトル表示を設定します。



注: このスタイル セクションは、ここにあるスタイル コードを参照して、独自のデザインやニーズに応じて調整できます W3 Schools

ステップ 4: MapTiler と JavaScript の統合

1. MapTiler

からAPIキーを取得
• MapTiler を開きます。
• 右上隅の「サインアップ」をクリックします。
• 電子メールで登録フォームに記入するか、Google アカウントを使用して登録します。
• 登録後、MapTiler ダッシュボードに移動します。



2. API キーの取得:

• MapTiler ダッシュボードで、[API キー] タブをクリックします。
• MapTiler によって提供されるデフォルトの API キーが表示されます。
• 新しい API キーを作成する場合は、[新しいキーを作成] ボタンをクリックします。
• 新しい API キーに名前を付けます (例: 「WebGIS-Simple」)。[作成] をクリックします。
• 作成した API キーをコピーします。この API キーは、プロジェクト内のマップにアクセスするために使用されます。

3.インタラクティブマップの作成:

• script.js ファイルを開きます。
• 次のコードを script.js に追加します。

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

説明：

• container:index.html 内の ID マップを持つ要素を参照します。
• style: MapTiler からのマップ スタイルへの URL。 YOUR_MAPTILER_API_KEY を API キーに置き換えます。
• center: マップ中心の地理座標 (ジャカルタ)。
• zoom: マップの初期ズーム レベル。



4.マップへのマーカーの追加 (オプション):

• 地図にマーカーを追加したい場合は、地図の初期化の下に次のコードを追加します。
• 指定した座標にマーカーを表示します。

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



ステップ 5: プロジェクトの実行とテスト

1.実行中のプロジェクト:

• コードの記述が完了したら、Replit の「実行」ボタンをクリックします。 Replit により、作成したマップを含む Web ページが開きます。 結果の観察:



• MapTiler からのインタラクティブな地図が Web ページに表示されます。
• 地図をズームイン、ズームアウト、パンしてさまざまな部分を表示できます。



これが私たちが行ったReplitの結果です:

この単純な WebGIS プロジェクトは完了しました。結果は次のリンクの Simple WebGIS ソースで確認できます。

このプロジェクトでは、HTML、CSS、JavaScript、MapTiler API を使用して単純な WebGIS アプリケーションを構築する方法を示します。自分で試してみることも、これをより複雑なプロジェクトの基礎として使用することもできます。

これらの手順に従って、Replit と MapTiler を使用した単純な WebGIS アプリケーションを正常に作成しました。このガイドは、初心者がインタラクティブなマップの作成を学びながら、HTML、CSS、JavaScript を使用した Web 開発の基本を理解できるように設計されています。

激励と感謝です。お役に立てば幸いです!