hidayat panuntun Watch on YouTube

SIG Web #5 - LeafletJS

3 min read 2 hours ago
Published on Mar 10, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial aims to guide you through using LeafletJS, a powerful JavaScript library for creating interactive maps. LeafletJS is widely used in web applications for displaying geographical data. This step-by-step guide will help you understand the basics of LeafletJS, how to set it up, and how to create your first map.

Step 1: Setting Up Your Project

To get started with LeafletJS, you need to set up your project environment.

  1. Create a new directory for your project.
  2. Inside the directory, create an HTML file (e.g., index.html).
  3. Include LeafletJS in your project by adding the following lines in the <head> section of your HTML file:
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

Step 2: Creating a Basic Map

Now that you have set up your project, you can create a basic map.

  1. Inside the <body> section of your HTML file, add a <div> element where the map will be displayed:

    <div id="map" style="height: 500px;"></div>

  2. Initialize the map in a <script> tag before the closing </body> tag:

    var map = L.map('map').setView([51.505, -0.09], 13);
    • Here, [51.505, -0.09] represents the latitude and longitude of the center point of the map, and 13 is the zoom level.

  3. Add a tile layer to the map using the following code:

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Step 3: Adding Markers

To enhance your map's interactivity, you can add markers.

  1. Place this code after the tile layer code to add a marker:
    var marker = L.marker([51.5, -0.09]).addTo(map);
  2. Optionally, you can bind a popup to the marker:
    marker.bindPopup('Hello, I am a marker!').openPopup();

Step 4: Customizing Your Map

Customization makes your map more appealing and functional.

  1. Change the marker icon:

    var customIcon = L.icon({
    iconUrl: 'path/to/icon.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});
var customMarker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);

  2. Adjust map features, such as zoom control and attribution, by modifying the options in the L.map and L.tileLayer functions.

Conclusion

You have now created a basic interactive map using LeafletJS. You learned how to set up your project, create a map, add markers, and customize your map's appearance.

Next steps could include learning about more advanced features like adding layers, handling events, or integrating with additional data sources such as GeoJSON. Explore the LeafletJS documentation for more in-depth capabilities!

Table of Contents

Recent