{"version":3,"file":"MapContainer.js","sources":["../../../resources/js/components/maps/MapContainer.vue?vue&type=template&lang.js","../../../resources/js/components/maps/MapContainer.vue"],"sourcesContent":["\n<div class=\"map_container\" v-show=\"isShow\">\n    <div\n        id=\"listingMap\"\n        :style=\"{\n            height: `${mapHeight}`\n        }\"\n    ></div>\n    <div class=\"menu\"></div>\n</div>\n","<template>\n    <div class=\"map_container\" v-show=\"isShow\">\n        <div\n            id=\"listingMap\"\n            :style=\"{\n                height: `${mapHeight}`\n            }\"\n        ></div>\n        <div class=\"menu\"></div>\n    </div>\n</template>\n<script>\nimport mapboxgl from 'mapbox-gl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\nimport bbox from '@turf/bbox';\nimport { multiPolygon, point, featureCollection } from '@turf/helpers';\nimport MapboxUtilitiesMixin from '@/mixins/MapboxUtilitiesMixin';\n\nexport default {\n    name: 'mapContainer',\n    props: {\n        location: {\n            default: null\n        },\n        boundary: {\n            default: null\n        },\n        mapHeight: {\n            default: '410px'\n        },\n        properties: {\n            default: [],\n            require: false\n        }\n    },\n    mixins: [MapboxUtilitiesMixin],\n\n    data() {\n        return {\n            map: null,\n\n            isShow: true,\n            mapLoaded: null,\n            dmpKey: null,\n            uuid: null,\n            oldData: [],\n            oldClusterMarkers: [],\n            mapSourceIds: {\n                boundary: 'boundary',\n                clusters: 'listing-clusters',\n                locations: 'location'\n            },\n            mapLayerIds: {\n                boundary: 'boundary',\n                clusters: 'cluster',\n                clusterCount: 'cluster-count'\n            }\n        };\n    },\n    mounted() {\n        this.toggleMapGallery();\n    },\n\n    computed: {\n        listingPinsFeatureCollection() {\n            let pins = [];\n            this.properties.forEach((listing, i) => {\n                pins.push({\n                    type: 'Feature',\n                    id: listing.listingKey,\n                    geometry: {\n                        type: 'Point',\n                        coordinates: [listing.longitude, listing.latitude]\n                    },\n                    properties: {\n                        title: this.getTitle(listing),\n                        url: listing.url,\n                        isFav: listing.isFav,\n                        listingID: listing.listingKey,\n                        data: JSON.stringify(listing),\n                        index: i\n                    }\n                });\n            });\n            return pins;\n        }\n    },\n    methods: {\n        getTitle(listing = null) {\n            let title = '';\n            title = title + (listing.isFav ? '<i class=\"bi-heart-fill\" style=\"color:red\" title=\"Favorited\"></i> ' : '');\n            title = title + (listing.openHouseStartTimestamp ? '<i class=\"realty-icon openhouse\" title=\"Open House\"></i>' : '');\n            if (listing.listPrice > 1000000) {\n                title = title + this.$root.$_formatNumber(listing.listPrice);\n            } else {\n                title = title + this.$root.$_formatNumber(listing.listPrice);\n            }\n            return title;\n        },\n        addMapSources() {\n            this.map.addSource(this.mapSourceIds.boundary, {\n                type: 'geojson',\n                data: {\n                    type: 'FeatureCollection',\n                    features: []\n                }\n            });\n            // Add map layer\n            this.map.addLayer({\n                id: this.mapLayerIds.boundary,\n                source: this.mapSourceIds.boundary,\n                type: 'line',\n                layout: {\n                    'line-join': 'round',\n                    'line-cap': 'round'\n                },\n                paint: {\n                    'line-color': '#0d73a8',\n                    'line-width': 3\n                }\n            });\n            this.map.addSource(this.mapSourceIds.locations, {\n                type: 'geojson',\n                data: {\n                    type: 'FeatureCollection',\n                    features: []\n                }\n            });\n\n            // Mapbox clusters\n            this.map.addSource(this.mapSourceIds.clusters, {\n                type: 'geojson',\n                data: {\n                    type: 'FeatureCollection',\n                    features: []\n                },\n                cluster: true,\n                clusterMaxZoom: 16,\n                clusterRadius: 40\n            });\n\n            this.map.addLayer({\n                id: 'clusters-listing',\n                type: 'circle',\n                //minzoom: 10,\n                source: this.mapSourceIds.clusters,\n                paint: {\n                    'circle-color': '#ff0006',\n                    'circle-stroke-color': '#ff0006',\n                    'circle-stroke-width': 0.5,\n                    'circle-radius': 0\n                }\n            });\n        },\n        renderClusterMarkers(features) {\n            let clusterMarkers = [];\n            this.oldClusterMarkers.forEach((oldClusterMarkers) => {\n                oldClusterMarkers.remove();\n            });\n            this.oldClusterMarkers = [];\n            /* I think this is dead code\n            if ( this.map.getZoom() < \"10\" && this.listingClusters.length > 4) {\n                return;\n            }*/\n\n            features.forEach((feature) => {\n                let el = document.createElement('div');\n                el.classList.add('property-dot');\n\n                el.innerHTML = '<div class=\"streamlined-property-label rounded\">' + feature.properties.point_count + ' listings</div>';\n\n                el.addEventListener('click', () => {\n                    this.zoomIntoMapboxCluster(feature);\n                });\n                el.addEventListener('mouseenter', () => {\n                    el.style.zIndex = 2000;\n                });\n\n                el.addEventListener('mouseleave', () => {\n                    el.style.zIndex = 1;\n                });\n\n                let marker = new mapboxgl.Marker({ element: el }).setLngLat(feature.geometry.coordinates).addTo(this.map);\n                this.oldClusterMarkers.push(marker);\n\n                clusterMarkers.push(marker);\n            });\n\n            return clusterMarkers;\n        },\n        renderMapMarkers(features) {\n            let self = this;\n\n            let locationMarkers = [];\n            self.oldData.forEach((oldData) => {\n                oldData.remove();\n            });\n            self.oldData = [];\n            // I think this is dead code\n            // If we're zoomed out farther than 10, and there's more than 4 clusters, do not render\n            //if ( this.map.getZoom() < \"10\" && this.listingClusters.length > 4) {\n            //return;\n            //}\n\n            //let marker = new Mapboxgl.Marker().addTo(this.map);\n            //marker.remove();\n            let marker = new mapboxgl.Marker();\n\n            features.forEach((feature) => {\n                let el = document.createElement('div');\n                el.classList.add('property-dot', 'streamlined-marker-container', 'streamlined-marker-position', 'streamlined-property-dot', 'no-outline');\n                //this determines whether or not the pin has been viewed\n\n                el.id = 'marker-' + feature.properties.listingID;\n                if (this.map.getZoom() > 9) {\n                    el.innerHTML = '<div class=\"streamlined-property-label rounded\">' + feature.properties.title + '</div>';\n                }\n                el.addEventListener('touchend', () => {\n                    this.property = JSON.parse(feature.properties.data);\n                    this.propId = feature.properties.listingID;\n                    this.intKey = feature.properties.listingID;\n                    this.$root.$_setPinAsViewed(this.propId);\n                    // let targetPoint = point(feature.geometry.coordinates);\n                    // this.open();\n                });\n                el.addEventListener('click', () => {\n                    event.preventDefault();\n                    this.property = JSON.parse(feature.properties.data);\n                    this.propId = feature.properties.listingID;\n                    this.intKey = feature.properties.listingID;\n                    this.$root.$_setPinAsViewed(this.propId);\n                    if (typeof brandPrependUrl !== 'undefined' && brandPrependUrl) {\n                        window.open(brandPrependUrl + feature.properties.url, '_blank');\n                    } else {\n                        window.open(feature.properties.url, '_blank');\n                    }\n                });\n                // el.addEventListener('mouseenter', () => {\n                //     //el.style.zIndex = 2000;\n\n                //     //only if there are updated pins do we bother with this logic\n                //     if (this.updatedPins.length > 0) {\n                //         for (let i = this.updatedPins.length - 1; i >= 0; i--) {\n                //             if (this.updatedPins[i].id == feature.properties.listingID) {\n                //                 feature = this.updatedPins[i];\n                //                 //remove the pin after it has been assigned so we dont loop all the time\n                //                 this.updatedPins.splice(i, 1);\n                //             }\n                //         }\n                //     }\n                //     this.property = JSON.parse(feature.properties.data);\n                //     //this.propId = feature.properties.listingID;\n                //     this.mbPopup.setLngLat(feature.geometry.coordinates).setHTML(this.returnMarkerHTML(this.property)).addTo(this.map);\n                //     this.intKey = feature.properties.listingID;\n                //     const popInfo = document.getElementsByClassName('popInfo_' + this.property.listingKey)[0];\n                //     popInfo.addEventListener('click', () => {\n                //         this.propId = feature.properties.listingID;\n                //         this.$root.$_setPinAsViewed(this.propId);\n                //         this.open();\n                //     });\n                // });\n\n                let marker = new mapboxgl.Marker({ element: el }).setLngLat(feature.geometry.coordinates).addTo(this.map);\n                self.oldData.push(marker);\n\n                locationMarkers.push(marker);\n            });\n            return locationMarkers;\n        },\n        zoomIntoMapboxCluster(feature) {\n            if (this.map) {\n                this.map.getSource(this.mapSourceIds.clusters).getClusterExpansionZoom(feature.properties.cluster_id, (err, zoom) => {\n                    if (err) return;\n\n                    this.map.easeTo({\n                        center: feature.geometry.coordinates,\n                        zoom: zoom\n                    });\n\n                    this.updateMapboxCluster();\n                });\n            }\n        },\n        async toggleMapGallery() {\n            let location = this.location;\n            let self = this;\n            if (!this.mapLoaded) {\n                this.mapLoaded = true;\n                setTimeout(function () {\n                    mapboxgl.accessToken = self.$config.mapbox.accessToken;\n                    mapboxgl.baseApiUrl = self.$config.mapbox.baseApiUrl;\n\n                    self.map = new mapboxgl.Map({\n                        container: 'listingMap',\n                        style: 'mapbox://styles/algib/ckner05tn430i17n7dm7fz65o?optimize=true',\n                        center: location,\n                        zoom: 12,\n                        antialias: true,\n                        attributionControl: false,\n                        interactive: true\n                    });\n\n                    self.map.addControl(new mapboxgl.NavigationControl());\n                    self.map.scrollZoom.disable();\n\n                    self.map.on('load', function () {\n                        //this.map.resize();\n                        self.addMapSources();\n                        if (self?.boundary?.boundary?.coordinates) {\n                            let mask = multiPolygon(self.boundary.boundary.coordinates);\n                            self.map.getSource(self.mapSourceIds.boundary).setData(mask);\n                            //map.getSource(self.mapSourceIds.locations).setData(featureCollection(self.listingPinsFeatureCollection));\n\n                            self.map.getSource(self.mapSourceIds.clusters).setData(featureCollection(self.listingPinsFeatureCollection));\n                            let bounds = bbox(mask);\n\n                            self.map.fitBounds(bounds, {\n                                padding: 10,\n                                duration: 0\n                            });\n                            self.map.on('sourcedata', () => {\n                                self.updateMapboxCluster();\n                            });\n                        }\n                        // self.renderMapMarkers(self.listingPinsFeatureCollection);\n                        // map.off('moveend', self.updateMapboxCluster);\n                        // map.once('moveend', () => {\n                        //     map.on('moveend', self.updateMapboxCluster);\n                        // });\n                    });\n                }, 0);\n            }\n        },\n        updateMapboxCluster() {\n            let { lat, lng } = this.map.getCenter();\n            let zoomLevel = this.map.getZoom();\n            /*dibarraremove\n            Cookies.set('mapPosition', {\n                latitude: lat,\n                longitude: lng,\n                zoomLevel: zoomLevel\n            })\n            Cookies.set('boundingBox', {\n               neLat: this.map.getBounds().getNorthEast().lat,\n               neLon: this.map.getBounds().getNorthEast().lng,\n               swLat: this.map.getBounds().getSouthWest().lat,\n               swLon: this.map.getBounds().getSouthWest().lng,\n            })*/\n\n            let features = this.map.querySourceFeatures(this.mapSourceIds.clusters);\n\n            // update the cluster\n            let clusterFeatures = features.filter((feature) => feature.properties.cluster);\n            this.renderClusterMarkers(clusterFeatures);\n\n            let ids = features.map((o) => o.id);\n            // update the markers\n            features = features.filter(({ id }, index) => !ids.includes(id, index + 1));\n\n            let markerFeatures = features.filter((feature) => !feature.properties.cluster);\n\n            this.renderMapMarkers(markerFeatures);\n        }\n    }\n};\n</script>\n"],"names":["render","_vm","_h","_c","staticRenderFns","__vue2_script","MapboxUtilitiesMixin","pins","listing","i","title","features","clusterMarkers","oldClusterMarkers","feature","el","marker","MapboxGl","self","locationMarkers","oldData","err","zoom","location","_b","_a","mask","multiPolygon","featureCollection","bounds","bbox","clusterFeatures","ids","o","id","index","markerFeatures"],"mappings":"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"}