How to Build an Interactive Church Map with Leaflet.js
This tutorial walks you through creating a simple interactive map using Leaflet. This JavaScript library uses a static image (like a church layout or floor plan), lets you add clickable markers, and works great on mobile. It’s perfect for beginners!
Step 1: Download the Starter Kit
Grab the folder here and unzip it:
The folder includes:
interactive-church-map.html— the code filechurch-map.jpg— a sample floorplan imageimages/window1.jpg— a popup image of a stained glass window
Click below to view a working demo:
Step 2: Open the HTML File
Open interactive-church-map.html in your browser. You’ll see a map with a single marker. Click it to see a popup with a photo and label. Try resizing the window to see how it responds to different screens.
Step 3: The Core HTML Code
This is the full code inside the HTML file. Paste it into your webpage and make sure your image files are correctly placed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Interactive Church Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
html, body, #map {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -2
});
var bounds = [[0,0], [600,800]];
var image = L.imageOverlay('church-map.jpg', bounds).addTo(map);
map.fitBounds(bounds);
L.marker([300, 400]).addTo(map)
.bindPopup("<b>Window 1</b><br><img src='images/window1.jpg' style='max-width:100%;'><br>Stained Glass Window");
</script>
</body>
</html>Step 4: Add More Markers
To add more locations, just repeat the L.marker line with different coordinates and content:
L.marker([350, 500]).addTo(map)
.bindPopup("<b>Altar</b><br>Main altar area");If you'd like to use your own marker image, define an icon first:
var customIcon = L.icon({
iconUrl: 'images/custom-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
L.marker([400, 450], { icon: customIcon }).addTo(map)
.bindPopup("<b>Bell Tower</b><br>Iconic structure with bell.");Step 5: Find Coordinates on Your Map
To accurately place markers, find the coordinates by clicking the image in your browser console:
1. Add a Click ListenerPlace this inside your script to log coordinates:
map.on('click', function(e) {
console.log(e.latlng);
});- Right-click your page and open Inspect.
- Click the Console tab.
- Click anywhere on the map to get coordinates like
LatLng(250, 610).
3. Plug in Those Coordinates
Use them inside your marker code like this:
L.marker([250, 610]).addTo(map)
.bindPopup("<b>Side Door</b><br>Accessible entry");Once you've finished finding and placing all your markers, it's a good idea to remove the tool that logs click coordinates so it doesn’t clutter the console every time someone clicks the map.
To do this, simply comment out or delete the line you added earlier:
// map.on('click', function(e) {
// console.log(e.latlng);
// });Or, if you prefer to keep the code but turn off the listener, use:
map.off('click');Optional: Use PixelMap to Find Coordinates
Need a faster way to find marker coordinates?
You can use the free online tool PixelMap to quickly locate coordinates on your map image. Just upload your floorplan, click on the spot where you want a marker, and it will show you the X and Y coordinates you need.
Important: Leaflet uses coordinates in [Y, X] format — that’s the vertical position first, then the horizontal.
So if PixelMap gives you X: 400, Y: 250, you’ll write:
L.marker([250, 400]).addTo(map)
.bindPopup("Your marker info here");It’s a handy way to get precise placement—no developer tools required.
May the Map be with You!
Let me know how this works for you! Or, would you like this as an online class? Say the word!
If you post about it on social media, use the tag #gooddesignisgoodministry.
Need help? I’m happy to troubleshoot—or create a custom map for you!
Stoneroller is here to help!