Web Front-end
CSS Tutorial
Complete Guide to Learning HTML, CSS, and JavaScript with Replit to Create a Simple WebGIS Using MapTiler
Complete Guide to Learning HTML, CSS, and JavaScript with Replit to Create a Simple WebGIS Using MapTiler
Introduction
Starting the journey of learning webGIS programming can be a challenge, especially if we are new to the world of HTML, CSS, and JavaScript. Fortunately, with tools like Replit, we can start learning in a simple and direct way. This article will walk you through the basic steps to create a simple WebGIS application using MapTiler. With this tutorial, we will learn how to create interactive maps that can be accessed from anywhere, just by using our browser.
Step 1. Create an Account and Project on Replit
1. Sign up for Replit:
- Open Relplit
- Click the "Sign Up" button in the top right corner.
- Select the desired registration method (Google, GitHub, or email).
- After successful registration, we will be directed to the Replit dashboard.
2. Creating a New Project:
- In the Replit dashboard, click the "Create Repl" button.
- In the Templates section, select "HTML, CSS, JS".
- Give our project a name, for example "WebGIS-Simple".
- Click "Create Repl" to create a project. Once the project is created, we will see three main files: index.html, style.css, and script.js. These files will be used to build our web page.
Step 2: Setting Up the HTML Structure
1. Understanding Basic HTML Structure:
- Open the index.html file in Replit.
- index.html is a file that determines the structure and basic content of our web page.
2. Adding Elements for Map:
- Replace the contents of index.html with the following code:
<!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>
Explanation:
-
: Displays the page title.
-
: The place where the map will be displayed.
- Maplibre GL: Used to display maps from MapTiler.
Step 3: Adding Styles with CSS
1. Added CSS for Map View:
- Open the style.css file.
- Replace the contents of the style.css file with the following code:
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; }Copy after loginExplanation:
- body, html: Set margins and padding so the map can use the entire screen.
- #map: Sets the map size to full width and 500px height.
- h1: Sets the title display in the middle of the page.
Note: this style section can be adjusted according to your own design and needs by looking at the style code here W3 Schools
Step 4: Integrating MapTiler with JavaScript
1. Getting API Key from MapTiler
- Open MapTiler.
- Click "Sign Up" in the top right corner.
- Fill in the registration form with email or register using a Google account.
- After registering, we will be taken to the MapTiler dashboard.
2. Get API Key:
- In the MapTiler dashboard, click on the "API keys" tab.
- You will see the default API key provided by MapTiler.
- If you want to create a new API key, click the "Create a new key" button.
- Give the new API key a name, for example "WebGIS-Simple", and click "Create".
- Copy the API key we just created. This API key will be used to access the map in our project.
3. Creating an Interactive Map:
- Open the script.js file.
- Add the following code into 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 });Copy after loginExplanation:
- 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.
- Jika ingin menambahkan marker pada peta, tambahkan kode berikut di bawah inisialisasi peta.
- Marker akan ditampilkan pada koordinat yang ditentukan.
4. Menambahkan Marker pada Peta (Opsional):
const marker = new maplibregl.Marker() .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta .addTo(map);
Copy after loginLangkah 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 !
The above is the detailed content of Complete Guide to Learning HTML, CSS, and JavaScript with Replit to Create a Simple WebGIS Using MapTiler. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1663
14
1419
52
1313
25
1263
29
1237
24
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
How We Created a Static Site That Generates Tartan Patterns in SVG
Apr 09, 2025 am 11:29 AM
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
How to Build Vue Components in a WordPress Theme
Apr 11, 2025 am 11:03 AM
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
PHP is A-OK for Templating
Apr 11, 2025 am 11:04 AM
PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic
Programming Sass to Create Accessible Color Combinations
Apr 09, 2025 am 11:30 AM
We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
