{"version":3,"file":"map-4ca0c5d0.js","sources":["../../src/map/MapMarkerCategories.vue","../../src/map/Map.vue","../../src/map/app.js"],"sourcesContent":["<template>\r\n    <div v-show=\"canShow()\" class=\"map-marker-categories\" :class=\"{'map-marker-categories--open': open}\">\r\n        <button class=\"map-marker-categories__toggle\" aria-expanded=\"false\" @click=\"toggleCategories\"></button>\r\n            \r\n            \r\n        <ul class=\"map-marker-categories__list\">\r\n            <li\r\n                v-for=\"(category, index) in model\"\r\n                :key=\"index\"\r\n                class=\"map-marker-categories__item\"\r\n            >\r\n                <input\r\n                    type=\"checkbox\"\r\n                    :id=\"`map-marker-category-${index}`\"\r\n                    v-model=\"category.enabled\"\r\n                    class=\"map-marker-categories__checkbox\"\r\n                >\r\n                <label\r\n                    :for=\"`map-marker-category-${index}`\"\r\n                    class=\"map-marker-categories__label\"\r\n                    :title=\"category.name\"\r\n                >\r\n                    {{ category.name }}\r\n                    <span class=\"map-marker-categories__icon\" :style=\"{ backgroundColor: category.color }\">\r\n                        <img\r\n                            v-if=\"category.icon\"\r\n                            :src=\"category.icon\"\r\n                            :alt=\"category.name\"\r\n                            class=\"map-marker-categories__icon-image\"\r\n                        />\r\n                    </span>\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n</template>\r\n<script setup>\r\nimport { ref } from 'vue';\r\n\r\nconst model = defineModel();\r\n\r\nconst open = ref(false);\r\n\r\n// Toggle the categories display\r\nconst toggleCategories = () => {\r\n    open.value = !open.value;\r\n};\r\n\r\n// Only show the categories if there are more than one\r\nconst canShow = () => {\r\n    return Object.keys(model.value).length > 1;\r\n};\r\n</script>","<template>\r\n    <div class=\"map\" ref=\"mapElement\"></div>\r\n    <MapMarkerCategories class=\"map__categories\" v-model=\"markerCategories\" />\r\n</template>\r\n<script setup>\r\nimport { ref, reactive, onMounted, watch } from 'vue';\r\nimport { themeDir } from '@utils/theme.js';\r\nimport { apiUrl } from '@utils/api.js';\r\nimport axios from 'axios';\r\nimport MapMarkerCategories from './MapMarkerCategories.vue';\r\n\r\nconst props = defineProps({\r\n    // The Mapbox access token\r\n    token: {\r\n        type: String,\r\n        required: true,\r\n    },\r\n    // The latitude of the map centre\r\n    lat: {\r\n        type: Number,\r\n        required: true,\r\n    },\r\n    // The longitude of the map centre\r\n    lng: {\r\n        type: Number,\r\n        required: true,\r\n    },\r\n    // The initial zoom level of the map\r\n    zoom: {\r\n        type: Number,\r\n        required: false,\r\n        default: 14,\r\n    },\r\n    // The location ID to fetch POIs from\r\n    locationId: {\r\n        type: Number\r\n    },\r\n    // Whether to show a marker at the map centre\r\n    showDefaultMarker: {\r\n        type: Boolean,\r\n        default: false,\r\n    },\r\n    // The title of the default marker\r\n    defaultMarkerTitle: {\r\n        type: String\r\n    }\r\n});\r\n\r\n// The map element\r\nconst mapElement = ref(null);\r\n\r\n// The map instance\r\nlet map = null;\r\n\r\n// The displayed marker categories\r\nconst markerCategories = reactive({});\r\n\r\n// The displayed markers\r\nconst markers = [];\r\n\r\n// Watch for changes to the marker categories and update the markers accordingly\r\nwatch(markerCategories, (newVal, oldVal) => {\r\n    markers.forEach(marker => {\r\n        if (markerCategories[marker.almeroType].enabled) {\r\n            marker.getElement().style.display = 'block';\r\n        } else {\r\n            marker.getElement().style.display = 'none';\r\n        }\r\n    });\r\n}, { deep: true });\r\n\r\n\r\n/**\r\n * Add a marker to the map\r\n * \r\n * @param {*} options \r\n */\r\nconst addMarker = (options) => {\r\n    const defaultOptions = {\r\n        title: null,\r\n        icon: `${themeDir}/images/maps/icon-default.svg`,\r\n        color: null,\r\n        type: \"Default\"\r\n    };\r\n\r\n    const { map, lat, lng, title, color, icon, type } = { ...defaultOptions, ...options };\r\n\r\n    if (!map || !lat || !lng) {\r\n        return;\r\n    }\r\n\r\n    const marker = document.createElement('div');\r\n    const markerImage = document.createElement('img');\r\n    marker.className = 'marker';\r\n    if (color) {\r\n        marker.style.backgroundColor = color;\r\n    }\r\n    markerImage.className = 'marker__image';\r\n    markerImage.src = icon;\r\n    marker.appendChild(markerImage);\r\n    const m = new mapboxgl.Marker(marker)\r\n        .setLngLat([lng, lat]);\r\n\r\n    if (title) {\r\n        marker.classList.add('marker--has-popup');\r\n        m.setPopup(new mapboxgl.Popup({\r\n            offset: 17.5,\r\n            closeButton: false,\r\n            closeOnClick: false\r\n        }).setHTML(title));\r\n\r\n        marker.addEventListener('mouseenter', () => {\r\n            m.getPopup().addTo(map);\r\n        });\r\n\r\n        marker.addEventListener('mouseleave', () => {\r\n            m.getPopup().remove();\r\n        });\r\n    }\r\n\r\n    m.almeroType = type;\r\n\r\n    m.addTo(map);\r\n    markers.push(m);\r\n\r\n    return m;\r\n};\r\n\r\nonMounted(async () => {\r\n    // Set the mapbox token\r\n    mapboxgl.accessToken = props.token;\r\n\r\n    // Create the map\r\n    map = new mapboxgl.Map({\r\n        container: mapElement.value,\r\n        center: [props.lng, props.lat],\r\n        zoom: props.zoom\r\n    });\r\n\r\n    // Add the navigation control\r\n    map.addControl(new mapboxgl.NavigationControl({\r\n        showCompass: false,\r\n        showZoom: true\r\n    }));\r\n\r\n    // Disable scroll zoom so people can scroll the page without the map\r\n    // capturing the scroll event\r\n    map.scrollZoom.disable();\r\n\r\n    // Resize the map when a DOM event is fired (e.g. when the media tab panel\r\n    // is shown)\r\n    window.addEventListener('map-resize', (e) => {\r\n        setTimeout(() => {\r\n            map.resize();\r\n        }, 10);\r\n    });\r\n\r\n    // Keep a reference to the default marker\r\n    let defaultMarker = null;\r\n\r\n    // Add the default marker if required\r\n    if (props.showDefaultMarker) {\r\n        defaultMarker = addMarker({\r\n            map,\r\n            lat: props.lat,\r\n            lng: props.lng,\r\n            title: props.defaultMarkerTitle,\r\n            color: 'var(--wp--preset--color--dark-blue)',\r\n            icon: `${themeDir}/images/maps/icon-default.svg`\r\n        });\r\n        markerCategories[\"Default\"] = {\r\n            enabled: true,\r\n            color: 'var(--wp--preset--color--dark-blue)',\r\n            icon: `${themeDir}/images/maps/icon-default.svg`,\r\n            name: \"Misc\"\r\n        };\r\n    }\r\n\r\n    // Fetch the POIs for the location\r\n    if (props.locationId > 0) {\r\n        const response = await axios.get(`${apiUrl}/pois?post_id=${props.locationId}`);\r\n        const pois = response.data;\r\n        if (pois.length > 0) {\r\n            pois.forEach(poi => {\r\n                addMarker({\r\n                    map,\r\n                    lat: poi.lat,\r\n                    lng: poi.lng,\r\n                    title: poi.name,\r\n                    color: poi.color,\r\n                    icon: poi.icon,\r\n                    type: poi.type\r\n                });\r\n\r\n                markerCategories[poi.type] = {\r\n                    enabled: true,\r\n                    color: poi.color,\r\n                    icon: poi.icon,\r\n                    name: poi.type\r\n                };\r\n            });\r\n        }\r\n\r\n        // Bring default marker to front\r\n        if (defaultMarker) {\r\n            defaultMarker.getElement().style.zIndex = 1000;\r\n        }\r\n    }\r\n});\r\n\r\n</script>","import { createApp } from \"vue\";\r\n\r\nimport Map from \"./Map.vue\";\r\nimport MapMarkerCategories from \"./MapMarkerCategories.vue\";\r\n\r\nconst handle = \"almero-vue-map\";\r\nconst mountEls = document.querySelectorAll(`.${handle}`);\r\n\r\nmountEls.forEach((mountEl) => {\r\n    let props = {};\r\n    if (mountEl.dataset.rootProps) {\r\n        try {\r\n            props = JSON.parse(mountEl.dataset.rootProps);\r\n        }\r\n        catch (e) {\r\n            console.error(e);\r\n        }\r\n    }\r\n    const app = createApp(\r\n        Map, {\r\n            ...props,\r\n        }\r\n    );\r\n\r\n    app.component(\"Map\", Map);\r\n    app.component(\"MapMarkerCategories\", MapMarkerCategories);\r\n\r\n    app.mount(mountEl);\r\n});"],"names":["model","_useModel","__props","open","ref","toggleCategories","canShow","props","mapElement","map","markerCategories","reactive","markers","watch","newVal","oldVal","marker","addMarker","options","defaultOptions","themeDir","lat","lng","title","color","icon","type","markerImage","m","onMounted","e","defaultMarker","pois","axios","apiUrl","poi","handle","mountEls","mountEl","app","createApp","Map","MapMarkerCategories"],"mappings":"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"}