pianello-api/resources/js/components/leaflet-map-loader/index.js

import locations from "../../../json/location.json"

(function () {
    "use strict";

    $(".leaflet").each(async function () {
        const map = L.map(this, {
            center: [$(this).data("lat"), $(this).data("long")],
            zoom: 9,
        });

        if (map) {
            const apiKey = $(this).data("api-key");

            L.tileLayer(
                `https://tile.thunderforest.com/atlas/{z}/{x}/{y}@2x.png?apikey=${apiKey}`,
                {
                    attribution:
                        "Map data © OpenStreetMap contributors, Tiles © Thunderforest",
                }
            ).addTo(map);

            const markers = L.markerClusterGroup({
                maxClusterRadius: 30,
                iconCreateFunction: function (cluster) {
                    const color = $("html").hasClass("dark")
                        ? getColor("darkmode.100", 0.6)
                        : getColor("primary", 0.8);
                    const mapMarkerRegionSvg =
                        window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="55.066" height="47.691" viewBox="0 0 55.066 47.691">
                            <g id="Group_15" data-name="Group 15" transform="translate(-319.467 -83.991)">
                                <g id="Group_14" data-name="Group 14">
                                <path id="Intersection_4" data-name="Intersection 4" d="M12.789,17.143a15,15,0,0,1,20.7,0l-1.6,2.141-.018-.018a12.352,12.352,0,0,0-17.469,0l-.018.018Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.845"/>
                                <path id="Intersection_5" data-name="Intersection 5" d="M10.384,13.919a19,19,0,0,1,25.511,0l-2.016,2.7a15.647,15.647,0,0,0-21.479,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.652"/>
                                <path id="Intersection_6" data-name="Intersection 6" d="M7.982,10.7a22.978,22.978,0,0,1,30.313,0l-2,2.679a19.652,19.652,0,0,0-26.316,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.453"/>
                                </g>
                                <g id="Group_13" data-name="Group 13" transform="translate(427.806 461.061) rotate(-120)">
                                <path id="Intersection_4-2" data-name="Intersection 4" d="M12.789,17.143a15,15,0,0,1,20.7,0l-1.6,2.141-.018-.018a12.352,12.352,0,0,0-17.469,0l-.018.018Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.845"/>
                                <path id="Intersection_5-2" data-name="Intersection 5" d="M10.384,13.919a19,19,0,0,1,25.511,0l-2.016,2.7a15.647,15.647,0,0,0-21.479,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.652"/>
                                <path id="Intersection_6-2" data-name="Intersection 6" d="M7.982,10.7a22.978,22.978,0,0,1,30.313,0l-2,2.679a19.652,19.652,0,0,0-26.316,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.453"/>
                                </g>
                                <circle id="Ellipse_9" data-name="Ellipse 9" cx="11" cy="11" r="11" transform="translate(336 96)" fill="${color}"/>
                                <g id="Group_12" data-name="Group 12" transform="translate(613.194 -139.96) rotate(120)">
                                <path id="Intersection_4-3" data-name="Intersection 4" d="M12.789,17.143a15,15,0,0,1,20.7,0l-1.6,2.141-.018-.018a12.352,12.352,0,0,0-17.469,0l-.018.018Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.845"/>
                                <path id="Intersection_5-3" data-name="Intersection 5" d="M10.384,13.919a19,19,0,0,1,25.511,0l-2.016,2.7a15.647,15.647,0,0,0-21.479,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.652"/>
                                <path id="Intersection_6-3" data-name="Intersection 6" d="M7.982,10.7a22.978,22.978,0,0,1,30.313,0l-2,2.679a19.652,19.652,0,0,0-26.316,0Z" transform="translate(323.861 78.999)" fill="${color}" opacity="0.453"/>
                                </g>
                            </g>
                            </svg>
                        `);

                    return L.divIcon({
                        html: `<div class="relative w-full h-full">
                                <div class="absolute inset-0 flex items-center justify-center ml-1.5 mb-0.5 font-medium text-white">${cluster.getChildCount()}</div>
                                <img class="w-full h-full" src="data:image/svg+xml;base64,${mapMarkerRegionSvg}">
                            </div>`,
                        className: "",
                        iconSize: L.point(42, 42),
                        iconAnchor: L.point(20, 45),
                    });
                },
                spiderfyOnMaxZoom: false,
                showCoverageOnHover: false,
            });

            map.addLayer(markers);

            const color = $("html").hasClass("dark")
                ? getColor("darkmode.100")
                : getColor("primary");
            const mapMarkerSvg =
                window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="31.063" viewBox="0 0 20 31.063">
                        <g id="Group_16" data-name="Group 16" transform="translate(-408 -150.001)">
                        <path id="Subtraction_21" data-name="Subtraction 21" d="M10,31.064h0L1.462,15.208A10,10,0,1,1,20,10a9.9,9.9,0,0,1-1.078,4.522l-.056.108c-.037.071-.077.146-.121.223L10,31.062ZM10,2a8,8,0,1,0,8,8,8,8,0,0,0-8-8Z" transform="translate(408 150)" fill="${color}"/>
                        <circle id="Ellipse_26" data-name="Ellipse 26" cx="6" cy="6" r="6" transform="translate(412 154)" fill="${color}"/>
                        </g>
                    </svg>
                    `);

            locations.map(function (markerElem) {
                const marker = L.marker(
                    {
                        lat: parseFloat(markerElem.latitude),
                        lng: parseFloat(markerElem.longitude),
                    },
                    {
                        title: markerElem.name,
                        icon: L.icon({
                            iconUrl: `data:image/svg+xml;base64,${mapMarkerSvg}`,
                            iconAnchor: L.point(10, 35),
                        }),
                    }
                );
                markers.addLayer(marker);
            });
        }
    });
})();