Vollständiger Leitfaden zum Erlernen von HTML, CSS und JavaScript mit Replit zum Erstellen eines einfachen WebGIS mit MapTiler-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Vollständiger Leitfaden zum Erlernen von HTML, CSS und JavaScript mit Replit zum Erstellen eines einfachen WebGIS mit MapTiler

王林

Sep 05, 2024 am 06:42 AM

Pendahuluan

Memulai perjalanan belajar pemrograman webGIS bisa menjadi tantangan, terutama jika kita baru mengenal dunia HTML, CSS, dan JavaScript. Untungnya, dengan alat seperti Replit, kita dapat mulai belajar dengan cara yang sederhana dan langsung. Artikel ini akan membimbing melalui langkah-langkah dasar untuk membuat aplikasi WebGIS sederhana menggunakan MapTiler. Dengan tutorial ini, kita akan belajar bagaimana membuat peta interaktif yang dapat diakses dari mana saja, cukup dengan menggunakan browser kita.

Langkah 1. Membuat Akun dan Proyek di Replit

1. Mendaftar ke Replit:

Buka Relplit
Klik tombol "Sign Up" di pojok kanan atas.
Pilih metode pendaftaran yang diinginkan (Google, GitHub, atau email).
Setelah berhasil mendaftar, kita akan diarahkan ke dashboard Replit.

2. Membuat Proyek Baru:

Di dashboard Replit, klik tombol "Create Repl".
Di bagian Template, pilih "HTML, CSS, JS".
Beri nama proyek kita, misalnya "WebGIS-Sederhana".
Klik "Create Repl" untuk membuat proyek. Setelah proyek dibuat, kita akan melihat tiga file utama: index.html, style.css, dan script.js. File-file ini akan digunakan untuk membangun halaman web kita.

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

Langkah 2: Menyiapkan Struktur HTML

1. Memahami Struktur Dasar HTML:

Buka file index.html di Replit.
index.html adalah file yang menentukan struktur dan isi dasar dari halaman web kita.

2. Menambahkan Elemen untuk Peta:

Gantilah isi index.html dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGIS Sederhana</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
    <h1>WebGIS Sederhana Menggunakan MapTiler</h1>
    <div id="map"></div>
    <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

Penjelasan:

: Menampilkan judul halaman.
: Tempat di mana peta akan ditampilkan.
Maplibre GL: Digunakan untuk menampilkan peta dari MapTiler.

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

Langkah 3: Menambahkan Gaya dengan CSS

1. Menambahkan CSS untuk Tampilan Peta:

Buka file style.css.
Gantilah isi file style.css dengan kode berikut:

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;
}

Nach dem Login kopieren

Penjelasan:

body, html: Mengatur margin dan padding agar peta bisa menggunakan seluruh layar.
#map: Mengatur ukuran peta agar lebar penuh dan tinggi 500px.
h1: Mengatur tampilan judul di tengah halaman.

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

Note: untuk bagian style ini bisa diatur sesuai dengan design dan kebutuhan sendiri dengan melihat style code disini W3 Schools

Langkah 4: Mengintegrasikan MapTiler dengan JavaScript

1. Mendapatkan API Key dari MapTiler

Buka MapTiler.
Klik "Sign Up" di pojok kanan atas.
Isi formulir pendaftaran dengan email atau daftar menggunakan akun Google.
Setelah mendaftar, kita akan dibawa ke dashboard MapTiler.

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

2. Mendapatkan API Key:

Di dashboard MapTiler, klik pada tab "API keys".
Anda akan melihat API key default yang diberikan oleh MapTiler.
Jika ingin membuat API key baru, klik tombol "Create a new key".
Beri nama untuk API key baru, misalnya "WebGIS-Sederhana", dan klik "Create".
Salin API key yang baru kita buat. API key ini akan digunakan untuk mengakses peta di proyek kita.

3. Membuat Peta Interaktif:

Buka file script.js.
Tambahkan kode berikut ke dalam 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
});

Nach dem Login kopieren

Penjelasan:

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.

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

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);

Nach dem Login kopieren

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

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:

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

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

Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler

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 !

Das obige ist der detaillierte Inhalt vonVollständiger Leitfaden zum Erlernen von HTML, CSS und JavaScript mit Replit zum Erstellen eines einfachen WebGIS mit MapTiler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Will R.E.P.O. Crossplay haben?

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7546

CakePHP-Tutorial

1382

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Aufbau einer Ethereum -App mit Redwood.js und Fauna Mar 28, 2025 am 09:18 AM

Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt

Erstellen Sie Ihr eigenes Bragdoc mit ELEITY Mar 18, 2025 am 11:23 AM

Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.

Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

See all articles

Vollständiger Leitfaden zum Erlernen von HTML, CSS und JavaScript mit Replit zum Erstellen eines einfachen WebGIS mit MapTiler

Pendahuluan

Langkah 1. Membuat Akun dan Proyek di Replit

Langkah 2: Menyiapkan Struktur HTML

: Menampilkan judul halaman.

Langkah 3: Menambahkan Gaya dengan CSS

Langkah 4: Mengintegrasikan MapTiler dengan JavaScript

Langkah 5: Menjalankan dan Menguji Proyek

Berikut Adalah Hasil Replit yang sudah kita buat:

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen