Einführung

Der Beginn der Reise zum Erlernen der WebGIS-Programmierung kann eine Herausforderung sein, insbesondere wenn wir neu in der Welt von HTML, CSS und JavaScript sind. Glücklicherweise können wir mit Tools wie Replit auf einfache und direkte Weise mit dem Lernen beginnen. Dieser Artikel führt Sie durch die grundlegenden Schritte zum Erstellen einer einfachen WebGIS-Anwendung mit MapTiler. In diesem Tutorial lernen wir, wie man interaktive Karten erstellt, auf die man von überall zugreifen kann, einfach mit unserem Browser.

Schritt 1. Erstellen Sie ein Konto und ein Projekt in Replit

1. Melden Sie sich für Replit an:

• Relplit öffnen
• Klicken Sie oben rechts auf die Schaltfläche „Anmelden“.
• Wählen Sie die gewünschte Registrierungsmethode (Google, GitHub oder E-Mail).
• Nach erfolgreicher Registrierung werden wir zum Replit-Dashboard weitergeleitet.

2. Ein neues Projekt erstellen:

• Klicken Sie im Replit-Dashboard auf die Schaltfläche „Repl erstellen“.
• Wählen Sie im Abschnitt „Vorlage“ „HTML, CSS, JS“ aus.
• Nennen Sie unser Projekt, zum Beispiel „WebGIS-Simple“.
• Klicken Sie auf „Repl erstellen“, um ein Projekt zu erstellen. Sobald das Projekt erstellt ist, sehen wir drei Hauptdateien: index.html, style.css und script.js. Diese Dateien werden zum Erstellen unserer Webseite verwendet.

Schritt 2: Einrichten der HTML-Struktur

1. Grundlegende HTML-Struktur verstehen:

• Öffnen Sie die Datei index.html in Replit.
• index.html ist eine Datei, die die Struktur und den grundlegenden Inhalt unserer Webseiten bestimmt.

2. Elemente zur Karte hinzufügen:

• Ersetzen Sie den Inhalt von index.html durch den folgenden Code:

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

Erläuterung:

• : Zeigt den Seitentitel an.

• : Der Ort, an dem die Karte angezeigt wird.
• Maplibre GL: Wird zum Anzeigen von Karten aus MapTiler verwendet.



Schritt 3: Stile mit CSS hinzufügen

1. CSS für die Kartenansicht hinzufügen:

• Öffnen Sie die Datei style.css.
• Ersetzen Sie den Inhalt der Datei style.css durch den folgenden 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;
}

Erläuterung:

• body, html: Ränder und Abstände so festlegen, dass die Karte den gesamten Bildschirm nutzen kann.
• #map: Setzt die Kartengröße auf volle Breite und 500 Pixel Höhe.
• h1: Legt die Titelanzeige in der Mitte der Seite fest.



Hinweis: Dieser Stilabschnitt kann an Ihr eigenes Design und Ihre Bedürfnisse angepasst werden, indem Sie sich den Stilcode hier W3 Schools ansehen

Schritt 4: MapTiler mit JavaScript integrieren

1. API-Schlüssel von MapTiler erhalten

• MapTiler öffnen.
• Klicken Sie oben rechts auf „Anmelden“.
• Füllen Sie das Registrierungsformular per E-Mail aus oder registrieren Sie sich mit einem Google-Konto.
• Nach der Registrierung werden wir zum MapTiler-Dashboard weitergeleitet.



2. API-Schlüssel abrufen:

• Klicken Sie im MapTiler-Dashboard auf die Registerkarte „API-Schlüssel“.
• Sie sehen den von MapTiler bereitgestellten Standard-API-Schlüssel.
• Wenn Sie einen neuen API-Schlüssel erstellen möchten, klicken Sie auf die Schaltfläche „Neuen Schlüssel erstellen“.
• Geben Sie dem neuen API-Schlüssel einen Namen, zum Beispiel „WebGIS-Simple“, und klicken Sie auf „Erstellen“.
• Kopieren Sie den API-Schlüssel, den wir gerade erstellt haben. Dieser API-Schlüssel wird für den Zugriff auf die Karte in unserem Projekt verwendet.

3. Erstellen einer interaktiven Karte:

• Öffnen Sie die Datei script.js.
• Fügen Sie den folgenden Code zu script.js hinzu:

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

Erläuterung:

• container: Bezieht sich auf das Element mit der ID-Map in index.html.
• style: URL zum Kartenstil von MapTiler. Ersetzen Sie YOUR_MAPTILER_API_KEY durch Ihren API-Schlüssel.
• center: Geografische Koordinaten des Kartenzentrums (Jakarta).
• zoom: Die anfängliche Zoomstufe der Karte.



4. Markierungen zur Karte hinzufügen (optional):

• Wenn Sie der Karte eine Markierung hinzufügen möchten, fügen Sie unter Karteninitialisierung den folgenden Code hinzu.
• Die Markierung wird an den angegebenen Koordinaten angezeigt.

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



Schritt 5: Ausführen und Testen des Projekts

1. Laufendes Projekt:

• Sobald wir mit dem Schreiben des Codes fertig sind, klicken Sie in Replit auf die Schaltfläche „Ausführen“. Replit öffnet eine Webseite mit der von uns erstellten Karte. Beobachtung der Ergebnisse:



• Eine interaktive Karte von MapTiler wird auf der Webseite angezeigt.
• Wir können die Karte vergrößern, verkleinern und schwenken, um verschiedene Teile zu sehen.



Hier sind die Ergebnisse des Replits, den wir erstellt haben:

Wir haben dieses einfache WebGIS-Projekt abgeschlossen und Sie können die Ergebnisse unter dem folgenden Link „Simple WebGIS Source“ sehen.

Dieses Projekt zeigt, wie man HTML, CSS, JavaScript und die MapTiler-API verwendet, um eine einfache WebGIS-Anwendung zu erstellen. Sie können es selbst ausprobieren oder es als Grundlage für ein komplexeres Projekt verwenden.

Durch Befolgen dieser Schritte haben wir erfolgreich eine einfache WebGIS-Anwendung mit Replit und MapTiler erstellt. Dieser Leitfaden richtet sich an Anfänger, damit sie die Grundlagen der Webentwicklung mit HTML, CSS und JavaScript verstehen und gleichzeitig lernen, interaktive Karten zu erstellen.

Ermutigung und Danke, hoffentlich ist das nützlich!