Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Adding a Basic Tile Layer | Tile Layers and Custom Marker Icons
JavaScript Leaflet.js Map Fundamentals

bookAdding a Basic Tile Layer

index.html

index.html

style.css

style.css

script.js

script.js

copy

When you add a tile layer to your Leaflet map, you are telling the map where to fetch the actual map images from. In the code above, the L.tileLayer function is used to specify the URL template for OpenStreetMap tiles. The curly braces in the URL ({s}, {z}, {x}, {y}) are placeholders that Leaflet replaces with the correct values as you move around the map or zoom in and out.

The attribution option is included as part of the tile layer configuration. This displays a small credit on the map, usually in a corner, showing where the map data comes from. Proper attribution is not just a courtesy; it is a legal requirement when using most third-party tile providers like OpenStreetMap. Failing to provide attribution may violate the provider's terms of use, so always ensure this text is present and visible. Giving credit also helps users know the source of the map data, which is important for transparency and trust.

question mark

Why is attribution important when using a tile layer from a third-party provider in Leaflet?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain what each placeholder ({s}, {z}, {x}, {y}) means in the tile URL?

What are some other common tile providers besides OpenStreetMap?

How can I customize the attribution text or its position on the map?

bookAdding a Basic Tile Layer

Swipe um das Menü anzuzeigen

index.html

index.html

style.css

style.css

script.js

script.js

copy

When you add a tile layer to your Leaflet map, you are telling the map where to fetch the actual map images from. In the code above, the L.tileLayer function is used to specify the URL template for OpenStreetMap tiles. The curly braces in the URL ({s}, {z}, {x}, {y}) are placeholders that Leaflet replaces with the correct values as you move around the map or zoom in and out.

The attribution option is included as part of the tile layer configuration. This displays a small credit on the map, usually in a corner, showing where the map data comes from. Proper attribution is not just a courtesy; it is a legal requirement when using most third-party tile providers like OpenStreetMap. Failing to provide attribution may violate the provider's terms of use, so always ensure this text is present and visible. Giving credit also helps users know the source of the map data, which is important for transparency and trust.

question mark

Why is attribution important when using a tile layer from a third-party provider in Leaflet?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1
some-alt