Sheep-Service/web/lib/pages/territory/map/script.js

let map_all;

const Territory_Map = {
    init: async () => {
        let html = await fetch('/lib/pages/territory/map/index.html').then((response) => response.text());
        app.innerHTML = html;

        Territory_Map.map.init();
        Territory_Map.info.setHTML();
    },
    info: {
        loadAPI: async (url) => {
            const uuid = localStorage.getItem("uuid");

            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                }
            });

            return await response.json();
        },

        setHTML: async () => {
            const houses = await Territory_Map.info.loadAPI(`${CONFIG.api}houses/list`);
            const homestead = await Territory_Map.info.loadAPI(`${CONFIG.api}homestead/list`);

            Territory_Map.map.added({ type: "houses", data: houses });
            Territory_Map.map.added({ type: "homestead", data: homestead });
        }
    },
    map: {
        polygons: [],

        init: () => {
            if (map_all && map_all.remove) map_all.remove();

            const mapElement = document.getElementById('map');
            if (!mapElement) return;

            let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                minZoom: 15,
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
            });

            let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            });

            let mytile = L.tileLayer('https://sheep-service.com/map/{z}/{x}/{y}.webp', {
                maxZoom: 20,
                minZoom: 15,
                tms: true
            });

            map_all = L.map(mapElement, {
                renderer: L.canvas(),
                center: [49.5629016, 25.6145625],
                zoom: 17,
                zoomControl: false,
                layers: [
                    googleHybrid,
                    osm,
                    mytile
                ]
            });

            let baseMaps = {
                "Google Hybrid": googleHybrid,
                "OpenStreetMap": osm,
                "Sheep Service Map": mytile,
            };

            let layerControl = L.control.layers(baseMaps, [], { position: 'bottomright' }).addTo(map_all);

            map_all.pm.setLang("ua");
        },

        added: ({ type, data }) => {
            for (let index = 0; index < data.length; index++) {
                const element = data[index];
                let posPersonal, posGroup;
                let polygonOptions = type === "homestead" ? {
                    color: "#f2bd53",
                    radius: 500,
                    fillOpacity: 0.3,
                    dashArray: '20,15',
                    dashOffset: '20',
                } : {
                    color: "#585858",
                    fillColor: "#f2bd53",
                    fillOpacity: 0.8
                };

                if (type === "homestead") {
                    posPersonal = Home.personal.homestead.list.map(e => e.id).indexOf(element.id);
                    posGroup = Home.group.homestead.list.map(e => e.id).indexOf(element.id);

                    if (posPersonal != -1 || posGroup != -1) {
                        polygonOptions = {
                            color: "#9a77c9",
                            fradius: 500,
                            fillOpacity: 0.3,
                            dashArray: '20,15',
                            dashOffset: '20',
                        }
                    }

                } else {
                    posPersonal = Home.personal.house.list.map(e => e.id).indexOf(element.id);
                    posGroup = Home.group.house.list.map(e => e.id).indexOf(element.id);

                    if (posPersonal != -1 || posGroup != -1) {
                        polygonOptions = {
                            color: "#585858",
                            fillColor: "#9a77c9",
                            fillOpacity: 0.8
                        }
                    }
                }

                const polygon = L.polygon(element.points, polygonOptions).addTo(map_all);

                polygon.bindPopup("");

                // при открытии popup генерим div заново
                polygon.on("popupopen", () => {
                    const div = document.createElement("div");
                    let text = () => {
                        if (posPersonal != -1) return "<span>Моя територія</span>"
                        else if (posGroup != -1) return "<span>Групова територія</span>"
                        return ""
                    }

                    div.innerHTML = `${text()} ${element.title} ${element.number}`;
                    div.className = "leaflet_drop"

                    polygon.setPopupContent(div);
                });

                // Territory_Map.map.polygons[type][element.id] = polygon; // сохраним ссылку на маркер
            }
        },

        marker: ({ data, personal = false, group = false }) => {
            console.log(data);

            for (let index = 0; index < data.length; index++) {
                const element = data[index];


                console.log(element);

                const redDot = L.divIcon({
                    className: "leaflet_drop",
                    html: `<div id="redDot_${element.id}"></div>`,
                    iconSize: [16, 16],
                    iconAnchor: [8, 8]
                });

                // создаём маркер
                const marker = L.marker([element.geo.lat, element.geo.lng], { icon: redDot }).addTo(map_all);
                marker.bindPopup("");

                // при открытии popup генерим div заново
                marker.on("popupopen", () => {
                    const div = document.createElement("div");
                    let text = () => {
                        if (personal) return "Моя територія"
                        else if (group) return "Групова територія"
                        return ""
                    }
                    div.innerHTML = text();

                    marker.setPopupContent(div);
                });

            }
        }
    }
}