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 in 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 Template section, select "HTML, CSS, JS".
• Name our project, 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 pages.

2. Adding Elements to Map:

• Replace the contents of index.html with the following code:

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

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

Explanation:

• body, html: Set margins and padding so that 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. Getting 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 a name to the new API key, 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
});

Explanation:

• container: Refers to the element with the id map in index.html.
• style: URL to the map style from MapTiler. Replace YOUR_MAPTILER_API_KEY with your API key.
• center: Geographic coordinates of the map center (Jakarta).
• zoom: The initial zoom level of the map.



4. Adding Markers to the Map (Optional):

• If you want to add a marker to the map, add the following code under map initialization.
• The marker will be displayed at the specified coordinates.

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



Step 5: Running and Testing the Project

1. Running Project:

• Once we have finished writing the code, click the "Run" button in Replit. Replit will open a web page containing the map we have created. Observing the Results:



• An interactive map from MapTiler will be displayed on the web page.
• we can zoom in, zoom out, and pan the map to see different parts.



Here are the results of the Replit that we have made:

We have completed this simple WebGIS project and you can see the results in the following link Simple WebGIS Source.

This project shows how to use HTML, CSS, JavaScript, and the MapTiler API to build a simple WebGIS application. You can try it yourself or use this as the basis for a more complex project.

By following these steps, we have successfully created a simple WebGIS application using Replit and MapTiler. This guide is designed for beginners to understand the basics of web development with HTML, CSS, and JavaScript while learning to create interactive maps.

Encouragement and Thank you, hopefully this is useful!