Tailwind CSS Maps

Build interactive maps with Leaflet! Add features like stonescale 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

Installation

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
```
                          
                        
```

Default map

Start with a basic Leaflet map using OpenStreetMap tiles and bounded panning.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">
                            <link rel="stylesheet" href="../../assets/vendor/leaflet/dist/leaflet.css">
                            <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/leaflet/dist/leaflet.js"></script>
                            <style>
                              .hs-leaflet.leaflet-touch .leaflet-control-layers,
                              .hs-leaflet.leaflet-touch .leaflet-bar {
                                border-width: 0px;
                              }

.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>
                          </head>
                          <body><div id="hs-basic-leaflet" class="h-100 hs-leaflet z-10"></div>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const map = L.map('hs-basic-leaflet', {
                                    center: [51.5074, -0.1278],
                                    zoom: 14,
                                    // Prevent dragging over the limit
                                    maxBounds: [
                                      [40, -10],
                                      [60, 10]
                                    ],
                                    maxBoundsViscosity: 1.0
                                  });

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>
                          </body>
                        </html>

.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;
                          }

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>

Map with marker

Add a default Leaflet marker with a popup anchored to a specific location.

.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;
                              }

.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>
                          </head>
                          <body><div id="hs-pin-leaflet" class="h-100 hs-leaflet z-10"></div>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const map = L.map('hs-pin-leaflet', {
                                    center: [51.5074, -0.1278],
                                    zoom: 14,
                                    // Prevent dragging over the limit
                                    maxBounds: [
                                      [40, -10],
                                      [60, 10]
                                    ],
                                    maxBoundsViscosity: 1.0
                                  });

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