Components
Maps

Third-Party Plugins

Tailwind CSS Maps

Build interactive maps with Leaflet! Add features like grayscale styles, custom pins, and city switching for seamless, mobile-friendly map experiences.

Requires Additional Installation

Note that this component requires the use of the third-party Leaflet plugin.

Learn more

How to use

Install Leaflet

Install leaflet via npm
```
npm i leaflet
```
Add the Leaflet CSS

Include the CSS <script> near the end of your </head> tag:
```
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
```

Add the Leaflet JavaScript

Include the JavaScript <script> near the end of your </head> tag:

<script src="./node_modules/lodash/lodash.min.js"></script><script src="./node_modules/leaflet/dist/leaflet.js"></script>

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                              maxZoom: 19,
                              minZoom: 2,
                              attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                            }).addTo(map);
                          })();
                        });
                      </script>

.hs-leaflet.leaflet-touch .leaflet-bar a {
                          line-height: 1.5;
                          background-color: rgba(255,255,255,.8);
                          box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                        }

.hs-leaflet.leaflet-touch .leaflet-bar a:first-child,
                        .hs-leaflet.leaflet-touch .leaflet-bar a:last-child {
                          border-radius: 8px;
                        }

.hs-leaflet .leaflet-control-zoom-in,
                        .hs-leaflet .leaflet-control-zoom-out {
                          font-weight: 400;
                          font-size: 18px;
                          color: #1f2937;
                          text-indent: 0px;
                        }

.hs-leaflet .leaflet-bar {
                          display: flex;
                          flex-direction: column;
                          gap: 6px;
                        }

.hs-leaflet .leaflet-bar a {
                          border-width: 0;
                        }

.hs-leaflet .leaflet-bar a:hover,
                        .hs-leaflet .leaflet-bar a:focus {
                          background-color: #e5e7eb;
                        }

.hs-leaflet .leaflet-popup-content-wrapper,
                        .hs-leaflet .leaflet-popup-tip {
                          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                        }

.hs-leaflet .leaflet-popup-tip {
                          border-radius: 4px;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button {
                          top: -10px;
                          right: -10px;
                          border-radius: 9999px;
                          background-color: #f3f4f6;
                          color: #1f2937;
                          font-size: 14px;
                          line-height: 1.6;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button:hover {
                          background-color: #e5e7eb;
                        }
                      </style>

L.marker([51.5074, -0.1278]).bindPopup('This is London, UK.').addTo(map);
                          })();
                        });
                      </script>

.hs-leaflet .leaflet-bar {
                          display: flex;
                          flex-direction: column;
                          gap: 6px;
                        }

.hs-leaflet .leaflet-bar a {
                          border-width: 0;
                        }

.hs-leaflet .leaflet-bar a:hover,
                        .hs-leaflet .leaflet-bar a:focus {
                          background-color: #e5e7eb;
                        }

.hs-leaflet .leaflet-popup-tip {
                          border-radius: 4px;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button:hover {
                          background-color: #e5e7eb;
                        }
                      </style>

Grayscale

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                              maxZoom: 19,
                              minZoom: 2,
                              attribution: '© <a href="https://carto.com/attributions">CARTO</a>'
                            }).addTo(map);

L.marker([51.5074, -0.1278]).bindPopup('This is London, UK.').addTo(map);
                          })();
                        });
                      </script>

.hs-leaflet .leaflet-bar {
                          display: flex;
                          flex-direction: column;
                          gap: 6px;
                        }

.hs-leaflet .leaflet-bar a {
                          border-width: 0;
                        }

.hs-leaflet .leaflet-bar a:hover,
                        .hs-leaflet .leaflet-bar a:focus {
                          background-color: #e5e7eb;
                        }

.hs-leaflet .leaflet-popup-tip {
                          border-radius: 4px;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button:hover {
                          background-color: #e5e7eb;
                        }
                      </style>

Custom Pin

const customIcon = L.icon({
                              iconUrl: customSvgIcon,
                              iconSize: [32, 32],
                              iconAnchor: [16, 32],
                              popupAnchor: [0, -32]
                            });

L.marker([51.5074, -0.1278], { icon: customIcon }).bindPopup('This is London, UK.').addTo(map);
                          })();
                        });
                      </script>

.hs-leaflet .leaflet-bar {
                          display: flex;
                          flex-direction: column;
                          gap: 6px;
                        }

.hs-leaflet .leaflet-bar a {
                          border-width: 0;
                        }

.hs-leaflet .leaflet-bar a:hover,
                        .hs-leaflet .leaflet-bar a:focus {
                          background-color: #e5e7eb;
                        }

.hs-leaflet .leaflet-popup-tip {
                          border-radius: 4px;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button:hover {
                          background-color: #e5e7eb;
                        }
                      </style>

function createPopupContent(city, description) {
                              return `
                                <div>
                                  <h3 class="text-xl font-bold text-gray-800 dark:text-neutral-200">${city}</h3>
                                  <div class="text-sm text-gray-500 dark:text-neutral-500">${description}</div>
                                </div>
                              `;
                            }

const cities = [
                              { coords: [51.5074, -0.1278], city: 'London, UK', description: 'Capital of the United Kingdom.' },
                              { coords: [52.4862, -1.8904], city: 'Birmingham, UK', description: 'A major city in England’s West Midlands region.' },
                              { coords: [53.8008, -1.5491], city: 'Leeds, UK', description: 'A vibrant city in West Yorkshire, England.' }
                            ];

cities.forEach(({ coords, city, description }) => {
                              L.marker(coords)
                                .bindPopup(createPopupContent(city, description))
                                .addTo(map);
                            });
                          })();
                        });
                      </script>

.hs-leaflet .leaflet-bar {
                          display: flex;
                          flex-direction: column;
                          gap: 6px;
                        }

.hs-leaflet .leaflet-bar a {
                          border-width: 0;
                        }

.hs-leaflet .leaflet-bar a:hover,
                        .hs-leaflet .leaflet-bar a:focus {
                          background-color: #e5e7eb;
                        }

.hs-leaflet .leaflet-popup-tip {
                          border-radius: 4px;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button:hover {
                          background-color: #e5e7eb;
                        }
                      </style>

Change city

.hs-leaflet .leaflet-bar {
                          display: flex;
                          flex-direction: column;
                          gap: 6px;
                        }

.hs-leaflet .leaflet-bar a {
                          border-width: 0;
                        }

.hs-leaflet .leaflet-bar a:hover,
                        .hs-leaflet .leaflet-bar a:focus {
                          background-color: #e5e7eb;
                        }

.hs-leaflet .leaflet-popup-tip {
                          border-radius: 4px;
                        }

.hs-leaflet.leaflet-container a.leaflet-popup-close-button:hover {
                          background-color: #e5e7eb;
                        }
                      </style>

const cities = [
                              { coords: [51.5074, -0.1278], city: 'London', description: 'Capital of the United Kingdom.' },
                              { coords: [52.4862, -1.8904], city: 'Birmingham', description: 'A major city in England’s West Midlands region.' },
                              { coords: [53.8008, -1.5491], city: 'Leeds', description: 'A vibrant city in West Yorkshire, England.' }
                            ];

cities.forEach(({ coords, city, description }) => {
                              L.marker(coords, { icon: customIcon })
                                .bindPopup(createPopupContent(city, description))
                                .addTo(map);
                            });

function changeMapCenter(cityName) {
                              const selectedCity = cities.find(city => city.city === cityName);

if (selectedCity) {
                                map.setView(selectedCity.coords, 14);
                              }
                            }

tabs.forEach((city) => {
                              city.addEventListener('click', () => {
                                const cityName = city.getAttribute('data-hs-tab');

Array.from(tabs).filter((el) => el !== city).forEach((city) => city.classList.remove('active'));
                                city.classList.add('active');
                                changeMapCenter(cityName);
                              });
                            });
                          })();
                        });
                      </script>

Tailwind CSS Maps

Requires Additional Installation

How to use

Install Leaflet

Add the Leaflet CSS

Add the Leaflet JavaScript

Basic

Pin

Grayscale

Custom Pin

Custom popover

Change city

On this page