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

Terminal

                      
                        npm i leaflet

Add the Leaflet CSS

Include the CSS <script> near the end of your </head> tag:
<link rel="stylesheet" href="./assets/vendor/leaflet/dist/leaflet.css">
HTML
```
                      
                    
```
Add the Leaflet JavaScript

Include the JavaScript <script> near the end of your </head> tag:
<script src="./assets/vendor/lodash/lodash.min.js"></script> <script src="./assets/vendor/leaflet/dist/leaflet.js"></script>
HTML
```
                      
                    
```

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: #f3f4f6;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content-wrapper {
                          display: flex;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content {
                          padding: 0;
                          margin: 0;
                          background: none;
                          line-height: normal;
                          border-radius: 0;
                          font-size: inherit;
                          min-height: auto;
                        }
                      </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: #f3f4f6;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content-wrapper {
                          display: flex;
                        }

Grayscale

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: #f3f4f6;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content-wrapper {
                          display: flex;
                        }

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: #f3f4f6;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content-wrapper {
                          display: flex;
                        }

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);
                          
                          cities.forEach(({ coords, country, city, short, current, previous }) => {
                            L.marker(coords)
                              .bindPopup(createPopupContent(country, city, short, current, previous))
                              .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: #f3f4f6;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content-wrapper {
                          display: flex;
                        }

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: #f3f4f6;
                        }

.hs-leaflet-unstyled-popover .leaflet-popup-content-wrapper {
                          display: flex;
                        }

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', 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>

Bubbles New

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);
                          
                          dataPoints.forEach(point => {
                            const circle = L.circle([point.lat, point.lng], {
                              fillColor: '#2563eb',
                              fillOpacity: 0.6,
                              radius: (point.percentage / 100) * maxRadius,
                              color: null,
                              weight: 0
                            }).addTo(map);
                            const { city, country, short, current, previous } = point;
                            const growUp = `<svg class="size-4 text-teal-500 dark:text-teal-400 " xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`;
                            const growDown = `<svg class="size-4 text-red-500 dark:text-red-400 " xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>`;
                            const popupContent = `<div class="bg-white rounded-xl shadow-xl w-40 p-3">
                              <div class="flex mb-1">
                                <div class="mt-0.5 me-2">
                                  <div class="size-4 rounded-full bg-no-repeat bg-center bg-cover" style="background-image: url('../assets/vendor/svg-country-flags/svg/${short}.svg')"></div>
                                </div>
                                <span class="text-sm font-medium">${city}, ${country}</span>
                              </div>
                              <div class="flex items-center space-x-1">
                                <span class="text-sm text-gray-500 dark:text-neutral-500 ">Active:</span>
                                <span class="text-sm ${current.isGrown ? 'text-teal-500 dark:text-teal-400' : 'text-red-500 dark:text-red-400'} ">${current.value}</span>
                                ${current.isGrown ? growUp : growDown}
                              </div>
                              <div class="flex items-center space-x-1">
                                <span class="text-sm text-gray-500 dark:text-neutral-500 ">New:</span>
                                <span class="text-sm ${previous.isGrown ? 'text-teal-500 dark:text-teal-400' : 'text-red-500 dark:text-red-400'} ">${previous.value}</span>
                                ${previous.isGrown ? growUp : growDown}
                              </div>
                            </div>`;

circle.on('click', function () {
                              circle.bindPopup(popupContent).openPopup();
                            });

circles.push({ 
                              circle,
                              data: point
                            });
                          });

map.on('zoomend', () => {
                            const zoom = map.getZoom();
                            const baseZoom = 3;
                            const scalePerZoom = 1.5;
                            const scaleFactor = 1 / Math.pow(scalePerZoom, (zoom - baseZoom));

circles.forEach(({ circle, data }) => {
                              const newRadius = (data.percentage / 100) * maxRadius * scaleFactor;
                              
                              circle.setRadius(newRadius);
                            });
                          });

map.fitBounds(bounds);
                        });
                      </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

Bubbles New

On this page