Interactive Church Map — Stoneroller Coop

How to Build an Interactive Church Map with Leaflet.js

by Libby Clarke, Stoneroller Cooperative

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:

Download Starter Files (.zip)

The folder includes:

interactive-church-map.html — the code file
church-map.jpg — a sample floorplan image
images/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");

Use Custom Marker Icons

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 Listener

Place this inside your script to log coordinates:

map.on('click', function(e) {
  console.log(e.latlng);
});

2. Use Developer Tools

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");

4. Clean Up

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!

We are proudly LGBTQIA+ and Mom-Owned.
We are proud to serve those who help the disadvantaged and outcast.

Stoneroller Cooperative is stationed in Maplewood, NJ. We serve clients worldwide.

©2025 Stoneroller Cooperative | All Rights Reserved
Photography Disclaimer

All photography shown on this site is included as part of design work completed for and licensed by Stoneroller Cooperative’s clients. We do not claim copyright to any photography or videogrpahy unless otherwise stated. Image rights remain with the original photographers, videographers, or stock agencies, and we strive to credit all visual collaborators whenever we are provided with that information. Some photos were licensed through commercial platforms such as iStock.

If you are a photographer, videographer, or rights holder and see your work here without credit, please contact us—we will gladly add attribution and a link to your portfolio or remove the image at your request.

Cookie Preferences