Show me: Leaflet – a free map
Leaflet is a library used by millions of websites to show maps. It’s free and gets added with two lines in the <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Then all you need is a box for the map and a few lines of JavaScript:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Three steps: create the map, add the base layer, drop a pin. You can add as many pins as you like – just repeat L.marker.
A library is code someone else wrote that you borrow, so you don’t have to write everything yourself. Leaflet handles panning, zooming, and mobile touch gestures for you. You just tell the map what to show.
More pins from a list
When you have several places, store them in an array and loop through it – just like with the weather:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Your turn 💪
🏫 School website – solution
A map with the school’s location on the “Contact” page. Bonus: a second pin for the gym or field used for PE class.
🙋 Personal website – solution
A “My Places” map: where you live (just approximately – a city is enough!), your favorite playground, where you go on vacation.
🌍 Travel journal – solution
This is your star lesson: a map of all your trips with pins from a list. Each popup can link to a trip write-up.
⚽ Club website – solution
A “Where We Play” map: home field + opponents’ fields. Visiting parents will love it.
Privacy: never put your exact home address on a website. A pin on your town’s main square is more than enough.
Check: Your website has a pannable, zoomable map with at least two pins with popups.
What to take away from this lesson
- Libraries (like Leaflet) lend you ready-made superpowers.
- A map = a map + a base layer + pins.
- A list of places in an array + a loop = a map of any size.
© 2026 Ing. Martin Polak / AlgoRhino · Content usage terms