Store Locator with Leaflet

Leaflet

Build a store locator with a sidebar list and interactive map pins using Leaflet.

progress_activityLoading map...

const stores = [
  { name: 'Store Marais', address: '15 Rue des Francs Bourgeois', lat: 48.8571, lng: 2.3621 },
  { name: 'Store Louvre', address: '2 Rue de Rivoli', lat: 48.8606, lng: 2.3376 },
  { name: 'Store Montmartre', address: '30 Rue Lepic', lat: 48.8847, lng: 2.3334 },
  { name: 'Store Latin Quarter', address: '10 Rue Mouffetard', lat: 48.8430, lng: 2.3499 },
  { name: 'Store Bastille', address: '5 Rue de la Roquette', lat: 48.8534, lng: 2.3715 }
];
const map = L.map('map').setView([48.8600, 2.3500], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const panel = document.getElementById('store-panel');
stores.forEach(s => {
  const marker = L.marker([s.lat, s.lng]).addTo(map).bindPopup(`<strong>${s.name}</strong><br>${s.address}`);
  const item = document.createElement('div');
  item.className = 'store-item';
  item.innerHTML = `<strong>${s.name}</strong>${s.address}`;
  item.addEventListener('click', () => { map.setView([s.lat, s.lng], 16); marker.openPopup(); });
  panel.appendChild(item);
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
#store-panel { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: #141414; border-right: 2px solid #2a2a2a; z-index: 1000; overflow-y: auto; padding: 0; }
#store-panel h3 { color: #e0e0e0; font-family: monospace; padding: 12px; margin: 0; border-bottom: 2px solid #2a2a2a; }
.store-item { padding: 10px 12px; border-bottom: 1px solid #2a2a2a; cursor: pointer; color: #ccc; font-size: 13px; }
.store-item:hover { background: #1e1e1e; }
.store-item strong { color: #4CAF50; display: block; margin-bottom: 2px; }
#map { margin-left: 280px; }

</style>
</head>
<body>
<div id="map"></div>
<div id="store-panel"><h3>Stores in Paris</h3></div>

<script>
const stores = [
  { name: 'Store Marais', address: '15 Rue des Francs Bourgeois', lat: 48.8571, lng: 2.3621 },
  { name: 'Store Louvre', address: '2 Rue de Rivoli', lat: 48.8606, lng: 2.3376 },
  { name: 'Store Montmartre', address: '30 Rue Lepic', lat: 48.8847, lng: 2.3334 },
  { name: 'Store Latin Quarter', address: '10 Rue Mouffetard', lat: 48.8430, lng: 2.3499 },
  { name: 'Store Bastille', address: '5 Rue de la Roquette', lat: 48.8534, lng: 2.3715 }
];
const map = L.map('map').setView([48.8600, 2.3500], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const panel = document.getElementById('store-panel');
stores.forEach(s => {
  const marker = L.marker([s.lat, s.lng]).addTo(map).bindPopup(`<strong>${s.name}</strong><br>${s.address}`);
  const item = document.createElement('div');
  item.className = 'store-item';
  item.innerHTML = `<strong>${s.name}</strong>${s.address}`;
  item.addEventListener('click', () => { map.setView([s.lat, s.lng], 16); marker.openPopup(); });
  panel.appendChild(item);
});

</script>
</body>
</html>

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const stores = [
  { name: 'Store Marais', address: '15 Rue des Francs Bourgeois', lat: 48.8571, lng: 2.3621 },
  { name: 'Store Louvre', address: '2 Rue de Rivoli', lat: 48.8606, lng: 2.3376 },
  { name: 'Store Montmartre', address: '30 Rue Lepic', lat: 48.8847, lng: 2.3334 },
  { name: 'Store Latin Quarter', address: '10 Rue Mouffetard', lat: 48.8430, lng: 2.3499 },
  { name: 'Store Bastille', address: '5 Rue de la Roquette', lat: 48.8534, lng: 2.3715 }
];
const map = L.map('map').setView([48.8600, 2.3500], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const panel = document.getElementById('store-panel');
stores.forEach(s => {
  const marker = L.marker([s.lat, s.lng]).addTo(map).bindPopup(`<strong>${s.name}</strong><br>${s.address}`);
  const item = document.createElement('div');
  item.className = 'store-item';
  item.innerHTML = `<strong>${s.name}</strong>${s.address}`;
  item.addEventListener('click', () => { map.setView([s.lat, s.lng], 16); marker.openPopup(); });
  panel.appendChild(item);
});

How it works

The store locator combines a sidebar list with map markers. Each store in the data array gets both a marker on the map and a clickable entry in the sidebar panel. Clicking a sidebar item pans the map to that store and opens its popup.

The sidebar is positioned absolutely over the left side of the map container. The #map element has a left margin equal to the sidebar width so the map viewport does not overlap the panel. Each store’s marker and list item are created in the same loop to keep the data in sync.

Key APIs

API	Description	Docs
`L.marker()`	Place store markers	leafletjs.com/reference.html#marker
`map.setView()`	Pan to store on click	leafletjs.com/reference.html#map-setview
`.openPopup()`	Show store popup	leafletjs.com/reference.html#layer-openpopup

FAQ

How do I add search/filter to the store list?

Add a text input above the store list and filter the DOM elements on keyup by matching against the store name or address.

How do I load store data from an API?

Replace the stores array with a fetch() call to your API endpoint, then build markers and list items from the response data.

Common mistakes

Forgetting to set margin-left on the map container: the map will render underneath the sidebar
Not calling map.invalidateSize() if the sidebar is toggled: Leaflet caches the container size and needs to be told when it changes
Hardcoding store data in production: use a backend API or CMS for real store locator implementations

auto_awesome

Build maps using Leaflet with AI

Generate code like this store locator with leaflet example using the Leaflet skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

Add Markers and Popups to a Leaflet Map
Address Search with Leaflet
See how to do this in MapLibre GL JS, MapTiler SDK or OpenLayers