MapTiler を使用してシンプルな WebGIS を作成するための Replit で HTML、CSS、JavaScript を学習するための完全ガイド

はじめに

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

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

1. Replit にサインアップ:

• リプリットを開く
• 右上隅にある「サインアップ」ボタンをクリックします。
• 希望の登録方法 (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 の内容を次のコードに置き換えます。

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7WebGIS Sederhana6e916e0f7d1e588d4f442bf645aedb2f
    468dcf7b0ee61aef03af1a1fbe6725fc
    dbef08e381c0b8a41a4e7da66fde548d2cacc6d41bbb37262a98f745aa00fbf0
    f048bc6a849959de0baf2924e721825f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4a249f0d628e2318394fd9b75b4636b1WebGIS Sederhana Menggunakan MapTiler473f0a7621bec819994bb5020d29372a
    cfb086edc64cb2ae2da2bfe40f81af9d16b28748ea4df4d9c2150843fecfba68
    84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

説明:

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

• 91d006f6ab5cf9813b4505a9135dad16 : 地図が表示される場所
• 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: Mengacu pada elemen dengan id map di index.html.
• style: URL ke gaya peta dari MapTiler. Gantilah YOUR_MAPTILER_API_KEY dengan API key Anda.
• center: Koordinat geografis pusat peta (Jakarta).
• zoom: Level zoom awal dari peta.



4. Menambahkan Marker pada Peta (Opsional):

• Jika ingin menambahkan marker pada peta, tambahkan kode berikut di bawah inisialisasi peta.
• Marker akan ditampilkan pada koordinat yang ditentukan.

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

Langkah 5: Menjalankan dan Menguji Proyek

1. Menjalankan Proyek:

• Setelah kita selesai menulis kode, klik tombol "Run" di Replit. Replit akan membuka halaman web yang berisi peta yang sudah kita buat. Mengamati Hasilnya:

• Peta interaktif dari MapTiler akan ditampilkan di halaman web.
• kita bisa memperbesar, memperkecil, dan menggeser peta untuk melihat berbagai bagian.

Berikut Adalah Hasil Replit yang sudah kita buat:

Kita telah menyelesaikan proyek WebGIS sederhana ini dan bisa dilihat hasilnya di tautan berikut ini Source WebGIS Sederhana.

Proyek ini menunjukkan bagaimana menggunakan HTML, CSS, JavaScript, dan API MapTiler untuk membangun aplikasi WebGIS sederhana. Anda bisa mencoba sendiri atau menjadikan ini sebagai dasar untuk proyek yang lebih kompleks.

Dengan mengikuti langkah-langkah ini, kita telah berhasil membuat aplikasi WebGIS sederhana menggunakan Replit dan MapTiler. Panduan ini dirancang untuk pemula agar bisa memahami dasar-dasar pengembangan web dengan HTML, CSS, dan JavaScript sambil belajar membuat peta interaktif.

Semangat dan Terima kasih, semoga bermanfaat !

以上がMapTiler を使用してシンプルな WebGIS を作成するための Replit で HTML、CSS、JavaScript を学習するための完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。