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.

How to use

  1. 1

    Install Leaflet

    Install leaflet via npm 
    npm i leaflet
  2. 2

    Add the Leaflet CSS

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

    Add the Leaflet JavaScript

    Include the JavaScript script tag 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>

basic leaflet map

Below map allows you to easily embed maps into web applications. 

<div class="flex items-center justify-center gap-3 w-full h-full">
    <div id="basic-leaflet" class="h-[400px] w-full rounded-lg "></div>
</div>

<script>
    window.addEventListener('load', () => {
        (function () {
            const map = L.map('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>

leaflet map with Pin

Below shows an interactive map to display a map centered on a specific location, with a marker (or “pin”) added to highlight that spot 

<div class="flex items-center justify-center gap-3 w-full h-full">
    <div id="basic-leaflet" class="h-[400px] w-full rounded-lg "></div>
</div>

<script>
    window.addEventListener('load', () => {
        (function () {
            const map = L.map('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>

leaflet map with Grayscale

following example shows grayscale styling map, tiles in black and white (grayscale), giving it a minimalist, clean, and professional look. 

<div class="flex items-center justify-center gap-3 w-full h-full">
    <div id="basic-leaflet" class="h-[400px] w-full rounded-lg "></div>
</div>

leaflet map with Custom Pin

Below example allows you to set custom pin to display your own marker icon instead of the default red one. 

<div class="flex items-center justify-center gap-3 w-full h-full">
    <div id="basic-leaflet" class="h-[400px] w-full rounded-lg "></div>
</div>

leaflet map with Custom popover

following example shows custom popover to enhances interactivity by displaying styled, informative popups when users click on a marker or specific location. 

<div class="flex items-center justify-center gap-3 w-full h-full">
    <div id="basic-leaflet" class="h-[400px] w-full rounded-lg "></div>
</div>

Change city

Below exampke shows map with custom pin and custom popover. 

<div class="flex items-center justify-center gap-3 w-full h-full">
    <div id="basic-leaflet" class="h-[400px] w-full rounded-lg "></div>
</div>