Store Locator with MapTiler SDK

MapTiler SDK

Build a store locator with a sidebar list and interactive map markers using MapTiler SDK.

progress_activityLoading map...

maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const stores = [
  { name: 'Store Marais', address: '15 Rue des Francs Bourgeois', lng: 2.3621, lat: 48.8571 },
  { name: 'Store Louvre', address: '2 Rue de Rivoli', lng: 2.3376, lat: 48.8606 },
  { name: 'Store Montmartre', address: '30 Rue Lepic', lng: 2.3334, lat: 48.8847 },
  { name: 'Store Latin Quarter', address: '10 Rue Mouffetard', lng: 2.3499, lat: 48.8430 },
  { name: 'Store Bastille', address: '5 Rue de la Roquette', lng: 2.3715, lat: 48.8534 }
];
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.STREETS,
  center: [2.3500, 48.8600],
  zoom: 13
});
const panel = document.getElementById('store-panel');
stores.forEach(s => {
  const popup = new maptilersdk.Popup({ offset: 25 }).setHTML(`<strong>${s.name}</strong><br>${s.address}`);
  const marker = new maptilersdk.Marker({ color: '#9C27B0' })
    .setLngLat([s.lng, s.lat])
    .setPopup(popup)
    .addTo(map);
  const item = document.createElement('div');
  item.className = 'store-item';
  item.innerHTML = `<strong>${s.name}</strong>${s.address}`;
  item.addEventListener('click', () => {
    map.flyTo({ center: [s.lng, s.lat], zoom: 16 });
    marker.togglePopup();
  });
  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://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.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: #9C27B0; 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>
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const stores = [
  { name: 'Store Marais', address: '15 Rue des Francs Bourgeois', lng: 2.3621, lat: 48.8571 },
  { name: 'Store Louvre', address: '2 Rue de Rivoli', lng: 2.3376, lat: 48.8606 },
  { name: 'Store Montmartre', address: '30 Rue Lepic', lng: 2.3334, lat: 48.8847 },
  { name: 'Store Latin Quarter', address: '10 Rue Mouffetard', lng: 2.3499, lat: 48.8430 },
  { name: 'Store Bastille', address: '5 Rue de la Roquette', lng: 2.3715, lat: 48.8534 }
];
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.STREETS,
  center: [2.3500, 48.8600],
  zoom: 13
});
const panel = document.getElementById('store-panel');
stores.forEach(s => {
  const popup = new maptilersdk.Popup({ offset: 25 }).setHTML(`<strong>${s.name}</strong><br>${s.address}`);
  const marker = new maptilersdk.Marker({ color: '#9C27B0' })
    .setLngLat([s.lng, s.lat])
    .setPopup(popup)
    .addTo(map);
  const item = document.createElement('div');
  item.className = 'store-item';
  item.innerHTML = `<strong>${s.name}</strong>${s.address}`;
  item.addEventListener('click', () => {
    map.flyTo({ center: [s.lng, s.lat], zoom: 16 });
    marker.togglePopup();
  });
  panel.appendChild(item);
});

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

import * as maptilersdk from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const stores = [
  { name: 'Store Marais', address: '15 Rue des Francs Bourgeois', lng: 2.3621, lat: 48.8571 },
  { name: 'Store Louvre', address: '2 Rue de Rivoli', lng: 2.3376, lat: 48.8606 },
  { name: 'Store Montmartre', address: '30 Rue Lepic', lng: 2.3334, lat: 48.8847 },
  { name: 'Store Latin Quarter', address: '10 Rue Mouffetard', lng: 2.3499, lat: 48.8430 },
  { name: 'Store Bastille', address: '5 Rue de la Roquette', lng: 2.3715, lat: 48.8534 }
];
const map = new maptilersdk.Map({
  container: 'map',
  style: maptilersdk.MapStyle.STREETS,
  center: [2.3500, 48.8600],
  zoom: 13
});
const panel = document.getElementById('store-panel');
stores.forEach(s => {
  const popup = new maptilersdk.Popup({ offset: 25 }).setHTML(`<strong>${s.name}</strong><br>${s.address}`);
  const marker = new maptilersdk.Marker({ color: '#9C27B0' })
    .setLngLat([s.lng, s.lat])
    .setPopup(popup)
    .addTo(map);
  const item = document.createElement('div');
  item.className = 'store-item';
  item.innerHTML = `<strong>${s.name}</strong>${s.address}`;
  item.addEventListener('click', () => {
    map.flyTo({ center: [s.lng, s.lat], zoom: 16 });
    marker.togglePopup();
  });
  panel.appendChild(item);
});

How it works

The store locator pairs a sidebar list with map markers. Each store in the data array gets a maptilersdk.Marker on the map and a clickable entry in the sidebar panel. Clicking a sidebar item flies the map to that store and toggles its popup.

The API key is set once via maptilersdk.config.apiKey and the map uses maptilersdk.MapStyle.STREETS for the base style. The sidebar is absolutely positioned over the left edge, with the #map element offset by a matching left margin.

Markers and list items are created in the same loop to keep the data synchronized. The flyTo method provides a smooth animated transition to the selected store.

Key APIs

API	Description	Docs
`maptilersdk.Marker`	Place store markers on the map	docs.maptiler.com/sdk-js/api/
`maptilersdk.Popup`	Show store details on click	docs.maptiler.com/sdk-js/api/
`map.flyTo()`	Animated camera transition to a store	docs.maptiler.com/sdk-js/api/

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.

Can I use custom marker icons for each store?

Yes. Pass an element option with a custom HTML element to the Marker constructor instead of the color option.

Common mistakes

Forgetting maptilersdk.config.apiKey: the map will fail to load tiles without the API key set
Using [lat, lng] instead of [lng, lat]: MapTiler SDK uses GeoJSON coordinate order
Not setting margin-left on the map container: the map renders underneath the sidebar

auto_awesome

Build maps using MapTiler SDK with AI

Generate code like this store locator with maptiler sdk example using the MapTiler SDK skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

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