使用 Replit 學習 HTML、CSS 和 JavaScript 以使用 MapTiler 建立簡單 WebGIS 的完整指南

簡介

開始學習 webGIS 程式設計之旅可能是一個挑戰，特別是如果我們是 HTML、CSS 和 JavaScript 世界的新手。幸運的是，有了像Replit這樣的工具，我們可以用簡單直接的方式開始學習。本文將引導您完成使用 MapTiler 建立簡單 WebGIS 應用程式的基本步驟。透過本教程，我們將學習如何建立只需使用瀏覽器即可從任何地方存取的互動式地圖。

步驟 1. 在 Replit 上建立帳戶和項目

1。註冊 Replit：

• 開啟 Repllit
• 點選右上角的「註冊」按鈕。
• 選擇所需的註冊方式（Google、GitHub 或電子郵件）。
• 註冊成功後，我們將被引導至 Replit 儀表板。

2。建立一個新專案：

• 在 Replit 儀表板中，按一下「建立 Repl」按鈕。
• 在範本部分中，選擇「HTML、CSS、JS」。
• 為我們的專案命名，例如「WebGIS-Simple」。
• 點選「Create Repl」建立項目。 專案創建後，我們將看到三個主要檔案：index.html、style.css 和 script.js。這些文件將用於建立我們的網頁。

第 2 步：設定 HTML 結構

1。了解基本 HTML 結構：

• 在Replit中開啟index.html檔案。
• index.html是決定我們網頁的結構和基本內容的文件。

2。為地圖加入元素：

• 將index.html的內容替換為以下程式碼：

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

說明：

• ：顯示頁面標題。

• ：地圖顯示的位置。
• 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：將地圖尺寸設定為全寬和 500px 高度。
• 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 !