Straßenbahnnetz Großstadt Karte
Tim, Kiya | 14.8.2023

Creating Interactive Maps Made Easy: An Introduction to Creating Leaflet Maps

Geodata > Creating Interactive Maps Made Easy: An Introduction to Creating Leaflet Maps

Leaflet is an open-source library for interactive maps in web applications. Here's a quick guide on how you can create your own simple Leaflet map:

Prepare your HTML

Create a new HTML document and add the basic elements needed:

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        ...
5        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
6    </head>
7    <body>
8         <div id="map" style="width: 800px; height: 600px;"></div>
9         <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
10   </body>
11</html>

Add JavaScript:

Right before the closing </body> tag, insert your JavaScript code to create and display the map:

1<script>
2    // Create map
3    const map = L.map('map').setView([51.505, -0.09], 13); // Set coordinates and zoom level
4
5    // Add tile layer (e.g., OpenStreetMap)
6    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
7            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
8    }).addTo(map);
9
10    // Add an examplary marker
11    L.marker([51.5, -0.09]).addTo(map).bindPopup('A marker here.');
12</script>

Adjustments

You can adjust the coordinates, zoom level, map style, and more options as per your requirements. The Leaflet Documentation offers comprehensive information about all available options and features: Leaflet Documentation

Wrap Up

Save your HTML file and open it in a web browser. You should be able to see your interactive Leaflet map now.

Remember that this is only a basic introduction. You can adjust the functionality and the appearance further, depending on your requirements.

Content
  • How can I prepare my HTML for Leaflet?
  • How can I add JavaScript to create and display the map?
  • How can I make adjustments on my Leaflet map?
  • How do I finish up my Leaflet map?
Tim Tilch
Tim (Softwareentwickler)

Als erfahrener Geodaten-Spezialist habe ich eine Leidenschaft für die Entwicklung und Visualisierung von Karten- und Geoinformationssystemen. Meine Expertise ermöglicht es mir, komplexe Geodaten verst... mehr anzeigen

GitlabGithub
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund