{"version":3,"sources":["webpack:///./src/client/heat_map.vue","webpack:///src/client/heat_map.vue","webpack:///./src/client/heat_map.vue?788c","webpack:///./src/client/heat_map.vue?a8f6","webpack:///./src/client/heat_map.vue?1f3f"],"names":["render","_vm","this","_c","_self","staticClass","_v","_s","$t","attrs","on","openSiderBar","mapLoaded","openFilters","_e","ref","totalSpots","spotDetail","type","_l","spotDetailImages","images","key","id","checkImage","serverUrl","slot","spot_type","name","location","spot_date","formatDate","spotter_user","user_name","detail","spot_questions","spot_question","question","answer","applyFilter","getClientAdminSpots","staticRenderFns","toast","position","Vue","props","data","accessToken","map","spotData","features","mapFeatures","spotForm","requireLatLong","spot_type_id","location_id","latitude","longitude","questions","client_url","client_id","adminMapStyle","default_map","default_map_zoom","default_latitude","default_longitude","appImage","routeTracks","components","FiltersModal","TotalCategoryCount","created","mounted","methods","image","openSpotDetail","API","properties","title","spot_id","description","spotted_by","iconUrl","geometry","coordinates","initMap","lngLat","mapboxgl","container","style","center","zoom","attributionControl","source","layout","paint","trackCoordinates","markerElement","setLngLat","coord","setPopup","offset","setHTML","index","addTo","console","logo","params","date_from","date_to","categories","locations","surveys","spotTypes","selectedQuestions","countRangeFilter","countRangeValues","spotted_username","date","getAppSettings","component"],"mappings":"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mD,iBAGAC,YACAC,oBACAC,2BAEAC,QAtCA,WAsCA,WACA,kDACA,eACA,4BAGAC,QA5CA,WA6CA,sBACA,4BAEAC,SACAjD,WADA,SACAkD,GACA,uBACA,cAMA/D,aATA,WAUA,8DAEAgE,eAZA,SAYApD,GAAA,WACA,GACAA,MAEA,gCACAqD,qBACA9B,GACA,YACA,oBACA,sBACA,0BACA,wCAEA,4CAGA,4BACA,6CAGA,4BACA,6CAEA,gDACA,4DAEA,iBAEAN,oBAxCA,WAwCA,WACA,GACAoB,yDAEAgB,2BACA9B,GACA,YACA,sBACA,2BAEAA,4BACA,sEACA,OACA,OACA5B,eACA2D,YACAtD,QACAuD,sCACAC,uBACAC,0CACAC,iDACAnD,oCACAoD,yDAEAC,UACAjE,aACAkE,uCAGA,0BAiBA,uDAGA,iBAGAC,QA5FA,SA4FAC,GAAA,WACA,kBACAC,iCACA,sBACAC,yBACAC,4CACAC,SACAC,2BAEAC,wBAGA,qCACA,oBAGA,+BAEA,SACA,yBACA,KACA,YACA,YACA,uCAGA,wBAKA,+BACA,eACA,eAGA,gCACA,gCAEA,gBACA,sBACA,eACA,qBACA,UACA,OAEA,kBACA,yBACA,cACA,EACA,EACA,EACA,GAIA,qBACA,yBACA,SACA,EACA,EACA,EACA,GAKA,iBACA,yBACA,oBACA,EACA,qBACA,GACA,mBACA,GACA,mBACA,GACA,mBACA,GACA,kBACA,EACA,kBAGA,kBACA,yBACA,SACA,EACA,EACA,EACA,IAGA,mBACA,yBACA,SACA,EACA,EACA,EACA,MAQA,OACAhC,yDAEAgB,qBACA9B,GACA,YAEA,2DAGA,+BACA5B,eACA4B,MACA5B,yBACAgC,WACAhC,eACAiE,UACAjE,kBACAkE,eAEAP,mBAMA,gBACAtD,WACAL,YACA2E,qBACAC,QACA,mBACA,qBAEAC,OACA,oBACA,eACA,0BAKAC,yBACA,oCACAC,kCACAA,qBACAA,sBACAA,2BACAA,iCAGA,kBACAC,UAAAC,GACAC,SAAA,eAAAC,YACAC,QADA,mBACAC,IADA,qBACAJ,KADA,kBACAA,KADA,UAEAK,MAAA,aAGA,YACAC,mDAGA,gBACA,uBACA,cACA,qBACA,UACA,OAEA,iBACA,yBACA,SACA,4BACA,uBAEA,6BACA,yBAIA,gBACA,yBACA,cACA,EACA,qBACA,EACA,mBACA,EACA,mBACA,EACA,mBACA,EACA,kBACA,EACA,kBAEA,8BACA,wBAEA,kBACA,yBACA,SACA,EACA,EACA,EACA,MAMA,kBAKA,oDACA,GACAC,YAGA7F,YAhUA,WAiUA,yDAGA0B,YApUA,SAoUAoE,GAAA,WACA,GACA5B,iBACA6B,qBACAC,iBACAnD,sBACAoD,wBACAC,sBACAC,kBACAC,sBACAC,sCACAtD,wDACAuD,oCACAC,qCAEAX,6BACA7B,iCACA,YACA,mBACA,8BACA,oBACA,iBACA,2BACA,sDACA,4CACA,2CACA,mDACA,sBACA9B,4BACA2D,sBACA,sEACA,OACA,OACAvF,eACA2D,YACAtD,QACAuD,sCAEAC,kBACAC,0CACAC,iDACAoC,0CACAvF,oCACAoD,yDAEAC,UACAjE,aACAkE,uCAGA,0BAGA,SACA,yBACA,KACA,YACA,YACA,uCAGA,wBAEA,gDACAqB,0CACA,iBACA,4BACA,4CACA,+CAGA,YACAA,eACA,4CACA,+CAIA1E,WAlZA,SAkZAuF,GACA,4CAGAC,eAtZA,WAsZA,WACA,GACA3D,yDAEAgB,sBACA9B,GACA,YACA,4CAGA,2CACA,6DACA,qEAGA,mBClkBkV,I,wBCQ9U0E,EAAY,eACd,EACAxH,EACAyC,GACA,EACA,KACA,WACA,MAIa,aAAA+E,E,2CCnBf,W","file":"js/chunk-0b1d156a.e50305a2.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"google-map new-updated-design google-map-design\"},[_c('vue-snotify'),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-12 col-lg-12\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-header\"},[_c('h4',{staticClass:\"card-title\"},[_vm._v(_vm._s(_vm.$t('heat-map')))])]),_c('div',{staticClass:\"card-body new-card-body rl-body\"},[_c('div',{staticClass:\"al-btn new-al-btn\"},[_c('b-button',{staticClass:\"ml-5 variant-orange\",attrs:{\"size\":\"sm\"},on:{\"click\":_vm.openSiderBar}},[_vm._v(_vm._s(_vm.$t('total-category-counts'))+\" \")]),(_vm.mapLoaded)?_c('b-button',{staticClass:\"ml-2 variant-orange\",attrs:{\"size\":\"sm\"},on:{\"click\":_vm.openFilters}},[_vm._v(_vm._s(_vm.$t('filters-btn')))]):_vm._e()],1),_c('div',{staticClass:\"google-map new-updated-design\"},[_c('div',{staticClass:\"map-container\",attrs:{\"id\":\"mapContainer\"}}),_c('div',{staticClass:\"sidebar-counter\"},[_c('TotalCategoryCount',{ref:\"sidebar\",attrs:{\"totalSpots\":_vm.totalSpots,\"user_type\":\"admin\"}})],1)])])])])]),_c('b-modal',{attrs:{\"id\":\"dashboard-spot-detail\",\"title\":_vm.$t('spot-details'),\"size\":\"md\",\"hide-footer\":true}},[(_vm.spotDetail.type == 'S')?_c('div',[_c('b-carousel',{attrs:{\"id\":\"carousel1\",\"controls\":\"\",\"indicators\":\"\",\"background\":\"#ababab\",\"interval\":2000}},_vm._l((_vm.spotDetailImages),function(images){return _c('b-carousel-slide',{key:images.id},[(_vm.checkImage(images))?_c('img',{attrs:{\"slot\":\"img\",\"src\":_vm.serverUrl+images,\"alt\":\"slide image\"},slot:\"img\"}):_c('audio',{staticClass:\"mb-5 mt-5 text-justify\",attrs:{\"controls\":\"\",\"src\":_vm.serverUrl+images}})])}),1)],1):_vm._e(),(_vm.spotDetail.type == 'A')?_c('div',[_c('b-carousel',{attrs:{\"id\":\"carousel1\",\"controls\":\"\",\"indicators\":\"\",\"background\":\"#ababab\",\"interval\":0}},_vm._l((_vm.spotDetailImages),function(images){return _c('b-carousel-slide',{key:images.id,staticClass:\"text-center\"},[_c('audio',{staticClass:\"mb-5 mt-5 text-justify\",attrs:{\"slot\":\"img\",\"controls\":\"\",\"src\":_vm.serverUrl+images},slot:\"img\"})])}),1)],1):_vm._e(),_c('table',{staticClass:\"table table-responsive mt-4\"},[_c('tr',[_c('td',{attrs:{\"width\":\"50%\"}},[_c('b',[_vm._v(\"Spot\")])]),_c('td',{attrs:{\"width\":\"50%\"}},[(_vm.spotDetail.spot_type)?_c('span',[_vm._v(_vm._s(_vm.spotDetail.spot_type.name))]):_vm._e()])]),_c('tr',[_c('td',{attrs:{\"width\":\"50%\"}},[_c('b',[_vm._v(\"Location\")])]),_c('td',{attrs:{\"width\":\"50%\"}},[(_vm.spotDetail.location)?_c('span',[_vm._v(_vm._s(_vm.spotDetail.location.name))]):_vm._e()])]),_c('tr',[_c('td',{attrs:{\"width\":\"50%\"}},[_c('b',[_vm._v(\"Date\")])]),_c('td',{attrs:{\"width\":\"50%\"}},[(_vm.spotDetail.spot_date)?_c('span',[_vm._v(_vm._s(this.formatDate(_vm.spotDetail.spot_date)))]):_vm._e()])]),_c('tr',[_c('td',{attrs:{\"width\":\"50%\"}},[_c('b',[_vm._v(\"Spotted By\")])]),_c('td',{attrs:{\"width\":\"50%\"}},[(_vm.spotDetail.spotter_user)?_c('span',[_vm._v(_vm._s(_vm.spotDetail.spotter_user.user_name))]):_vm._e()])]),_c('tr',[_c('td',{attrs:{\"width\":\"50%\"}},[_c('b',[_vm._v(\"Detail\")])]),_c('td',{attrs:{\"width\":\"50%\"}},[(_vm.spotDetail.detail)?_c('span',[_vm._v(_vm._s(_vm.spotDetail.detail))]):_vm._e()])]),_vm._l((_vm.spotDetail.spot_questions),function(spot_question){return _c('tr',{key:spot_question.id},[_c('td',{attrs:{\"width\":\"50%\"}},[_c('b',[(spot_question.question)?_c('span',[_vm._v(_vm._s(spot_question.question.question))]):_vm._e()])]),_c('td',{attrs:{\"width\":\"50%\"}},[(spot_question.answer)?_c('span',[_vm._v(_vm._s(spot_question.answer))]):_vm._e()])])})],2)]),_c('FiltersModal',{ref:\"filterComponent\",attrs:{\"user_type\":\"admin\"},on:{\"applyFilter\":_vm.applyFilter,\"resetMap\":_vm.getClientAdminSpots}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"google-map new-updated-design google-map-design\">\r\n        <vue-snotify></vue-snotify>\r\n        <div class=\"row\">\r\n    \r\n            <div class=\"col-md-12 col-lg-12\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        <h4 class=\"card-title\">{{ $t('heat-map') }}</h4>\r\n                    </div>\r\n                    \r\n                    <div class=\"card-body new-card-body rl-body\">\r\n                        <div class=\"al-btn new-al-btn\"> \r\n                            <b-button class=\"ml-5 variant-orange\" size=\"sm\" @click=\"openSiderBar\">{{ $t('total-category-counts') }}\r\n                            </b-button>\r\n                            <b-button v-if=\"mapLoaded\" class=\"ml-2 variant-orange\" size=\"sm\" @click=\"openFilters\">{{ $t('filters-btn') }}</b-button>\r\n                        </div>\r\n                        <div class=\"google-map new-updated-design\">\r\n                            \r\n                            <div class=\"map-container\" id=\"mapContainer\">\r\n                            <!--    <button v-if=\"mapLoaded\" class=\"filter-group\" variant=\"info\" size=\"sm\" @click=\"openFilters\">{{ $t('filters-btn') }}</button> -->\r\n                            </div>\r\n                            <div class=\"sidebar-counter\">\r\n                                <TotalCategoryCount  ref=\"sidebar\" :totalSpots=\"totalSpots\" user_type=\"admin\"/>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <b-modal id=\"dashboard-spot-detail\" :title=\"$t('spot-details')\" size=\"md\" :hide-footer=\"true\">\r\n            <div v-if=\"spotDetail.type == 'S'\">\r\n                <b-carousel id=\"carousel1\" controls indicators background=\"#ababab\" :interval=\"2000\">\r\n    \r\n                    <!-- <b-carousel-slide v-for=\"images of spotDetailImages\" :key=\"images.id\">\r\n                      <img slot=\"img\" :src=\"serverUrl+images\" alt=\"slide image\"/>\r\n                   </b-carousel-slide> -->\r\n                    <b-carousel-slide v-for=\"images of spotDetailImages\" :key=\"images.id\">\r\n                        <!-- <img slot=\"img\" :src=\"serverUrl+images\" alt=\"slide image\"/> -->\r\n                        <img slot=\"img\" v-if=\"checkImage(images)\" :src=\"serverUrl+images\" alt=\"slide image\" />\r\n                        <audio class=\"mb-5 mt-5  text-justify\" controls v-else :src=\"serverUrl+images\"></audio>\r\n    \r\n                    </b-carousel-slide>\r\n    \r\n                    <!-- <div v-if=\"spotDetail.type == 'A'\" >\r\n                       <b-carousel-slide  v-for=\"images of spotDetailImages\" :key=\"images.id\" class=\"text-center\">\r\n                           <audio slot=\"img\" controls :src=\"serverUrl+images\" class=\"mb-5 mt-5  text-justify\"></audio>\r\n                       </b-carousel-slide>\r\n                   </div> -->\r\n                </b-carousel>\r\n            </div>\r\n            <div v-if=\"spotDetail.type == 'A'\">\r\n                <b-carousel id=\"carousel1\" controls indicators background=\"#ababab\" :interval=\"0\">\r\n    \r\n                    <b-carousel-slide v-for=\"images of spotDetailImages\" :key=\"images.id\" class=\"text-center\">\r\n                        <audio slot=\"img\" controls :src=\"serverUrl+images\" class=\"mb-5 mt-5  text-justify\"></audio>\r\n                    </b-carousel-slide>\r\n                </b-carousel>\r\n            </div>\r\n            <table class=\"table table-responsive  mt-4\">\r\n                <tr>\r\n                    <td width=\"50%\"><b>Spot</b></td>\r\n                    <td width=\"50%\"><span v-if=\"spotDetail.spot_type\">{{spotDetail.spot_type.name}}</span></td>\r\n                </tr>\r\n                <tr>\r\n                    <td width=\"50%\"><b>Location</b></td>\r\n                    <td width=\"50%\"><span v-if=\"spotDetail.location\">{{spotDetail.location.name}}</span></td>\r\n                </tr>\r\n                <tr>\r\n                    <td width=\"50%\"><b>Date</b></td>\r\n                    <td width=\"50%\"><span v-if=\"spotDetail.spot_date\">{{this.formatDate(spotDetail.spot_date)}}</span>\r\n                    </td>\r\n                </tr>\r\n                <tr>\r\n                    <td width=\"50%\"><b>Spotted By</b></td>\r\n                    <td width=\"50%\"><span v-if=\"spotDetail.spotter_user\">{{spotDetail.spotter_user.user_name}}</span></td>\r\n                </tr>\r\n                <tr>\r\n                    <td width=\"50%\"><b>Detail</b></td>\r\n                    <td width=\"50%\"><span v-if=\"spotDetail.detail\">{{spotDetail.detail}}</span></td>\r\n                </tr>\r\n    \r\n                <tr v-for=\"spot_question of spotDetail.spot_questions\" :key=\"spot_question.id\">\r\n                    <td width=\"50%\"><b><span\r\n                           v-if=\"spot_question.question\">{{spot_question.question.question}}</span></b></td>\r\n                    <td width=\"50%\"><span v-if=\"spot_question.answer\">{{spot_question.answer}}</span></td>\r\n                </tr>\r\n            </table>\r\n        </b-modal>\r\n        <FiltersModal @applyFilter=\"applyFilter\" @resetMap=\"getClientAdminSpots\" ref=\"filterComponent\" user_type=\"admin\"></FiltersModal>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\n    import Vue from \"vue\";\r\n    import mapboxgl from \"mapbox-gl\";\r\n    import Snotify, {\r\n        SnotifyPosition\r\n    } from 'vue-snotify'\r\n    import API from '@/api';\r\n    import moment from 'moment'\r\n    import FiltersModal from \"../citizen/FiltersModal.vue\";\r\n    import TotalCategoryCount from '../client/TotalCategoryCounts';\r\n    const options = {\r\n        toast: {\r\n            position: SnotifyPosition.rightTop,\r\n        }\r\n    }\r\n    Vue.use(Snotify, options)\r\n    export default {\r\n        props: ['countableQuestions', 'total_spots'],\r\n        data() {\r\n            return {\r\n                accessToken: 'pk.eyJ1Ijoid2F0Y2hzcG90dGVyIiwiYSI6ImNsMmY0OTgxdzA3MW0zYm1jMmY5MGY5OG4ifQ.vEle7r52YhgPJ8D-MVlZ2A',\r\n                map: [],\r\n                spotData: [],\r\n                features: [],\r\n                mapFeatures: [],\r\n                spotForm: {\r\n                    requireLatLong: 1,\r\n                    spot_type_id: '',\r\n                    location_id: '',\r\n                    detail: '',\r\n                    spot_date: '',\r\n                    latitude: '',\r\n                    longitude: '',\r\n                    questions: [],\r\n                    client_url: window.location.href.split('#')[0],\r\n                    client_id: JSON.parse(localStorage.getItem(\"client_id\")),\r\n                },\r\n                adminMapStyle: '',\r\n                default_map: '',\r\n                default_map_zoom: '',\r\n                default_latitude: '',\r\n                default_longitude: '',\r\n                appImage: null,\r\n                spotDetailImages: [],\r\n                spotDetail: [],\r\n                mapLoaded: false,\r\n                totalSpots: 0,\r\n                routeTracks: [],\r\n            };\r\n        },\r\n        components: {\r\n            FiltersModal,\r\n            TotalCategoryCount\r\n        },\r\n        created() {\r\n            this.$EventBus.$on(\"reinitializeMap\", (data) => {\r\n                this.map.remove();\r\n                this.getClientAdminSpots();\r\n            });\r\n        },\r\n        mounted() {\r\n            this.getAppSettings();\r\n            this.getClientAdminSpots();\r\n        },\r\n        methods: {\r\n            checkImage(image) {\r\n                let found = image.search('.mp3');\r\n                if (found === -1) {\r\n                    return true;\r\n                } else {\r\n                    return false;\r\n                }\r\n            },\r\n            openSiderBar() {\r\n                this.$root.$emit(\"bv::toggle::collapse\", \"sidebar-no-header\");\r\n            },\r\n            openSpotDetail(id) {\r\n                const data = {\r\n                    id: id\r\n                }\r\n                this.serverUrl = this.$server_url;\r\n                API.getSpotDetail(\r\n                    data,\r\n                    data => {\r\n                        this.spotDetail = data.data;\r\n                        this.spotDetailImages = [];\r\n                        if (this.spotDetail.image === null) {\r\n                            this.spotDetailImages.push(this.defaultImage);\r\n                        } else {\r\n                            this.spotDetailImages.push(this.spotDetail.image);\r\n                        }\r\n    \r\n                        if (this.spotDetail.image1 !== null) {\r\n                            this.spotDetailImages.push(this.spotDetail.image1);\r\n                        }\r\n    \r\n                        if (this.spotDetail.image2 !== null) {\r\n                            this.spotDetailImages.push(this.spotDetail.image2);\r\n                        }\r\n                        this.$root.$emit(\"bv::hide::modal\", \"recent-spots\");\r\n                        this.$root.$emit(\"bv::show::modal\", \"dashboard-spot-detail\");\r\n                    },\r\n                    err => {});\r\n            },\r\n            getClientAdminSpots() {\r\n                const data = {\r\n                    client_id: JSON.parse(localStorage.getItem('client_id')),        \r\n                }\r\n                API.getClientAdminSpots(\r\n                    data,\r\n                    data => {\r\n                        const spot_dImage = data.default_image;\r\n                        this.totalSpots = data.total_spots;\r\n    \r\n                        data.data.forEach(data => {\r\n                            let exists = this.mapFeatures.find(p => p.properties.id == data.id)\r\n                            if (!exists) {\r\n                                const d1 = {\r\n                                    type: \"Feature\",\r\n                                    properties: {\r\n                                        id: data.id,\r\n                                        title: (data.spot_type) ? data.spot_type.name : '',\r\n                                        spot_id: data.spot_type_id,\r\n                                        description: (data.location) ? data.location.name : '',\r\n                                        spotted_by: (data.spotter_user) ? data.spotter_user.name : '',\r\n                                        spot_date: this.formatDate(data.spot_date),\r\n                                        iconUrl: (data.primary_image) ? this.$server_url + data.primary_image : spot_dImage,\r\n                                    },\r\n                                    geometry: {\r\n                                        type: \"Point\",\r\n                                        coordinates: [data.longitude, data.latitude]\r\n                                    }\r\n                                }\r\n                                this.mapFeatures.push(d1);\r\n                            }\r\n                        })\r\n    \r\n                        // alert('working')\r\n    \r\n                        // if (navigator.geolocation) {\r\n                        //     var self = this;\r\n                        //     navigator.geolocation.getCurrentPosition(e => {\r\n                        //         this.initMap([e.coords.longitude, e.coords.latitude])\r\n                        //     }, function (error) {\r\n                        //         if (error.code == error.PERMISSION_DENIED) {\r\n                        //             // pop up dialog asking for location\r\n                        //             self.initMap([self.default_longitude, self.default_latitude]);\r\n                        //         }\r\n                        //     })\r\n                        // } else {\r\n                        this.initMap([this.default_longitude, this.default_latitude]);\r\n                        // }\r\n                    },\r\n                    err => {}\r\n                )\r\n            },\r\n            initMap(lngLat) {\r\n                this.mapLoaded = false;\r\n                mapboxgl.accessToken = this.accessToken;\r\n                this.map = new mapboxgl.Map({\r\n                    container: 'mapContainer',\r\n                    style: 'mapbox://styles/mapbox/satellite-v9',\r\n                    center: lngLat,\r\n                    zoom: this.default_map_zoom,\r\n                    // projection: 'globe'\r\n                    attributionControl: false\r\n                });\r\n    \r\n                this.map.on('style.load', () => {\r\n                    this.map.setFog({});\r\n                });\r\n    \r\n                this.map.on('load', () => {\r\n    \r\n                    this.data2 = {\r\n                        \"type\": \"FeatureCollection\",\r\n                        \"crs\": {\r\n                            \"type\": \"name\",\r\n                            \"properties\": {\r\n                                \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                            }\r\n                        },\r\n                        \"features\": this.mapFeatures\r\n                    }\r\n    \r\n                    // Add a geojson point source.\r\n                    // Heatmap layers also work with a vector tile source.\r\n                    this.map.addSource('earthquakes', {\r\n                        'type': 'geojson',\r\n                        'data': this.data2\r\n                    });\r\n    \r\n                    const nav = new mapboxgl.NavigationControl();\r\n                    this.map.addControl(nav, \"top-right\");\r\n    \r\n                    this.map.addLayer({\r\n                            'id': 'earthquakes-heat',\r\n                            'type': 'heatmap',\r\n                            'source': 'earthquakes',\r\n                            'maxzoom': 9,\r\n                            'paint': {\r\n                                // Increase the heatmap weight based on frequency and property magnitude\r\n                                'heatmap-weight': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['get', 'mag'],\r\n                                    0,\r\n                                    0,\r\n                                    6,\r\n                                    1\r\n                                ],\r\n                                // Increase the heatmap color weight weight by zoom level\r\n                                // heatmap-intensity is a multiplier on top of heatmap-weight\r\n                                'heatmap-intensity': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['zoom'],\r\n                                    0,\r\n                                    1,\r\n                                    9,\r\n                                    3\r\n                                ],\r\n                                // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).\r\n                                // Begin color ramp at 0-stop with a 0-transparancy color\r\n                                // to create a blur-like effect.\r\n                                'heatmap-color': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['heatmap-density'],\r\n                                    0,\r\n                                    'rgba(33,102,172,0)',\r\n                                    0.2,\r\n                                    'rgb(103,169,207)',\r\n                                    0.4,\r\n                                    'rgb(209,229,240)',\r\n                                    0.6,\r\n                                    'rgb(253,219,199)',\r\n                                    0.8,\r\n                                    'rgb(239,138,98)',\r\n                                    1,\r\n                                    'rgb(178,24,43)'\r\n                                ],\r\n                                // Adjust the heatmap radius by zoom level\r\n                                'heatmap-radius': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['zoom'],\r\n                                    0,\r\n                                    2,\r\n                                    9,\r\n                                    20\r\n                                ],\r\n                                // Transition from heatmap to circle layer by zoom level\r\n                                'heatmap-opacity': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['zoom'],\r\n                                    7,\r\n                                    1,\r\n                                    9,\r\n                                    0\r\n                                ]\r\n                            }\r\n                        },\r\n                        // 'waterway-label'\r\n                    );\r\n    \r\n                    // Fetch and add the route track data\r\n                    const data = {\r\n                        client_id: JSON.parse(localStorage.getItem('client_id')),\r\n                    }\r\n                    API.getTracksData(\r\n                        data,\r\n                        (data) => {\r\n                            // Prepare the track data for the map\r\n                            const trackCoordinates = data.map(track => [track.longitude, track.latitude]);\r\n\r\n                            // Add a new source for the route tracks\r\n                            this.map.addSource('routeTracks', {\r\n                                type: 'geojson',\r\n                                data: {\r\n                                    type: 'FeatureCollection',\r\n                                    features: [{\r\n                                        type: 'Feature',\r\n                                        geometry: {\r\n                                            type: 'LineString',\r\n                                            coordinates: trackCoordinates\r\n                                        },\r\n                                        properties: {}\r\n                                    }]\r\n                                }\r\n                            });\r\n\r\n                            // Add a layer to display the route tracks with a curved, dotted style\r\n                            this.map.addLayer({\r\n                                id: 'route',\r\n                                type: 'line',\r\n                                source: 'routeTracks',\r\n                                layout: {\r\n                                    'line-cap': 'round',  // Rounded end for smoother curves\r\n                                    'line-join': 'round'  // Rounded join for smoother corners\r\n                                },\r\n                                paint: {\r\n                                    'line-color': '#888',  // Line color\r\n                                    'line-width': 4,       // Line width\r\n                                    'line-dasharray': [4, 4]  // Dash pattern: 4px dash, 4px space\r\n                                }\r\n                            });\r\n\r\n                            // Add markers at each point along the route\r\n                            trackCoordinates.forEach((coord, index) => {\r\n                                const markerElement = document.createElement('div');\r\n                                markerElement.style.backgroundColor = '#FF0000'; // Red color for the marker\r\n                                markerElement.style.width = '20px';\r\n                                markerElement.style.height = '20px';\r\n                                markerElement.style.borderRadius = '50%'; // Make it circular\r\n                                markerElement.style.border = '2px solid white'; // Add a white border for better visibility\r\n                                \r\n                                // Add marker to the map\r\n                                new mapboxgl.Marker(markerElement)\r\n                                    .setLngLat(coord)\r\n                                    .setPopup(new mapboxgl.Popup({ offset: 25 }) // Add a popup\r\n                                        .setHTML(`<p>Point ${index + 1}:<br>Lat: ${coord[1]}, Lng: ${coord[0]}</p>`)) // Popup content\r\n                                    .addTo(this.map);\r\n                            });\r\n                        },\r\n                        (error) => {\r\n                            console.error('Error fetching route tracks:', error);\r\n                        }\r\n                    );\r\n                    this.map.addLayer({\r\n                            'id': 'earthquakes-point',\r\n                            'type': 'circle',\r\n                            'source': 'earthquakes',\r\n                            'minzoom': 7,\r\n                            'paint': {\r\n                                // Size circle radius by earthquake magnitude and zoom level\r\n                                'circle-radius': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['zoom'],\r\n                                    7, ['interpolate', ['linear'],\r\n                                        ['get', 'mag'], 1, 1, 6, 4\r\n                                    ],\r\n                                    16, ['interpolate', ['linear'],\r\n                                        ['get', 'mag'], 1, 5, 6, 50\r\n                                    ]\r\n                                ],\r\n                                // Color circle by earthquake magnitude\r\n                                'circle-color': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['get', 'mag'],\r\n                                    1,\r\n                                    'rgba(33,102,172,0)',\r\n                                    2,\r\n                                    'rgb(103,169,207)',\r\n                                    3,\r\n                                    'rgb(209,229,240)',\r\n                                    4,\r\n                                    'rgb(253,219,199)',\r\n                                    5,\r\n                                    'rgb(239,138,98)',\r\n                                    6,\r\n                                    'rgb(178,24,43)'\r\n                                ],\r\n                                'circle-stroke-color': 'white',\r\n                                'circle-stroke-width': 1,\r\n                                // Transition from heatmap to circle layer by zoom level\r\n                                'circle-opacity': [\r\n                                    'interpolate', ['linear'],\r\n                                    ['zoom'],\r\n                                    7,\r\n                                    0,\r\n                                    8,\r\n                                    1\r\n                                ]\r\n                            }\r\n                        },\r\n                        // 'waterway-label'\r\n                    );\r\n                    this.mapLoaded = true;\r\n                    // this.map.on('click', 'earthquakes-point', (e) => {\r\n                    //     alert(e)\r\n                    // })    \r\n                });\r\n                const logo = document.querySelector('.mapboxgl-ctrl-logo');\r\n                if (logo) {\r\n                    logo.remove();\r\n                }\r\n            },\r\n            openFilters() {\r\n                this.$root.$emit(\"bv::show::modal\", \"modal-map-filters\");\r\n                // this.$refs.filterComponent.getFiltersData();\r\n            },\r\n            applyFilter(params) {\r\n                let data = {\r\n                    spot_id: params.spotId,\r\n                    date_from: params.dateFrom,\r\n                    date_to: params.dateTo,\r\n                    questions: params.questions,\r\n                    categories: params.categories,\r\n                    locations: params.locations,\r\n                    surveys: params.surveys,\r\n                    spotTypes: params.spotTypes,\r\n                    selectedQuestions: params.selectedQuestions,\r\n                    client_id: JSON.parse(localStorage.getItem('client_id')),\r\n                    countRangeFilter: params.countRangeFilter,\r\n                    countRangeValues: params.countRangeValues,\r\n                }\r\n                console.log('filter data', data);\r\n                API.getSpotsByAdminFilters(data,\r\n                    data => {\r\n                        if (data.status === 200) {\r\n                            this.$snotify.success(data.message);\r\n                            this.data2.features = [];\r\n                            this.mapFeatures = [];\r\n                            this.totalSpots = data.total_spots;\r\n                            this.$refs.sidebar.assignQuestions(data.countableQuestions);\r\n                            this.$refs.filterComponent.StopFilterLoading();\r\n                            this.$refs.filterComponent.StopResetLoading();\r\n                            this.$refs.filterComponent.changeSliderValue(data.range);\r\n                            const spot_dImage = data.default_image;\r\n                            data.data.forEach(data => {\r\n                                console.log('spot', data);\r\n                                let exists = this.mapFeatures.find(p => p.properties.id == data.id)\r\n                                if (!exists) {\r\n                                    const d1 = {\r\n                                        type: \"Feature\",\r\n                                        properties: {\r\n                                            id: data.id,\r\n                                            title: (data.spot_type) ? data.spot_type.name : '',\r\n                                            // spot_id: data.spot_type_id,\r\n                                            spot_id: data.spot_id,\r\n                                            description: (data.location) ? data.location.name : '',\r\n                                            spotted_by: (data.spotter_user) ? data.spotter_user.name : '',\r\n                                            spotted_username: data.spotter_user.user_name,\r\n                                            spot_date: this.formatDate(data.spot_date),\r\n                                            iconUrl: (data.primary_image) ? this.$server_url + data.primary_image : spot_dImage,\r\n                                        },\r\n                                        geometry: {\r\n                                            type: \"Point\",\r\n                                            coordinates: [data.longitude, data.latitude]\r\n                                        }\r\n                                    }\r\n                                    this.mapFeatures.push(d1);\r\n                                }\r\n                            })\r\n                            this.data2 = {\r\n                                \"type\": \"FeatureCollection\",\r\n                                \"crs\": {\r\n                                    \"type\": \"name\",\r\n                                    \"properties\": {\r\n                                        \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                                    }\r\n                                },\r\n                                \"features\": this.mapFeatures\r\n                            }\r\n                            this.map.getSource(\"earthquakes\").setData(this.data2);\r\n                            console.log('applyFilterresponse', data)\r\n                        } else if (data.status === 500) {\r\n                            this.$snotify.error(data.message);\r\n                            this.$refs.filterComponent.StopFilterLoading();\r\n                            this.$refs.filterComponent.StopResetLoading();\r\n                        }\r\n                    },\r\n                    err => {\r\n                        console.log(err);\r\n                        this.$refs.filterComponent.StopFilterLoading();\r\n                        this.$refs.filterComponent.StopResetLoading();\r\n                    }\r\n                );\r\n            },\r\n            formatDate(date) {\r\n                return moment(String(date)).format('DD-MM-YYYY')\r\n            },\r\n    \r\n            getAppSettings() {\r\n                const data = {\r\n                    client_id: JSON.parse(localStorage.getItem('client_id')),\r\n                }\r\n                API.getAppSettings(\r\n                    data,\r\n                    data => {\r\n                        this.appImage = this.$server_url + data.data.stock_image;\r\n                        // this.adminMapStyle = data.data.default_map;\r\n                        // this.default_map = data.data.default_map;\r\n                        this.default_map_zoom = data.data.default_map_zoom;\r\n                        this.default_latitude = (data.data.latitude) ? data.data.latitude : 39.452717;\r\n                        this.default_longitude = (data.data.longitude) ? data.data.longitude : -123.813866;\r\n    \r\n                    },\r\n                    err => {}\r\n                )\r\n            },\r\n        }\r\n    };\r\n</script>\r\n\r\n<style scoped>\r\n    .basemap {\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    \r\n    .mapboxgl-canvas {\r\n        width: 1200px;\r\n        height: 689.15px;\r\n        position: static !important;\r\n    }\r\n    \r\n    .mapboxgl-canvas-container {\r\n        position: static !important;\r\n        width: 1200px !important;\r\n    }\r\n    \r\n    #menu {\r\n        position: absolute;\r\n        background: #efefef;\r\n        padding: 10px;\r\n        font-family: 'Open Sans', sans-serif;\r\n        z-index: 1;\r\n    }\r\n    .google-map-design {\r\n        min-height: calc(100vh - 184px);\r\n        height: 100%;\r\n    }\r\n    .google-map-design #mapContainer {\r\n        height: calc(100vh - 285px);\r\n    }\r\n    .rl-body {\r\n        position: relative;\r\n    }\r\n    .al-btn {\r\n        position: absolute;\r\n        left: -10px;\r\n        z-index: 5;\r\n        top: 30px;\r\n    }\r\n    .al-btn button {\r\n        color:#fff !important;\r\n    }\r\n    .al-btn button:hover {\r\n        color:#fff !important;\r\n    }\r\n    .variant-orange {\r\n        color: #fff !important;\r\n        background-color: #fa6400;\r\n        border-color: #fa6400;\r\n    }\r\n    @media (max-width: 375px) {\r\n        .row .card .new-card-body {\r\n            padding: 1.25rem 1.437rem !important;\r\n        }\r\n        .new-al-btn {\r\n            left: 0px;\r\n        }\r\n        .new-al-btn button:nth-child(1) {\r\n            margin-left: 28px !important;\r\n            margin-right: 0px !important;\r\n        }\r\n        .new-al-btn button:nth-child(2) {\r\n            margin-left: 5px !important;\r\n        }\r\n    }\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./heat_map.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./heat_map.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./heat_map.vue?vue&type=template&id=41f149b0&scoped=true&\"\nimport script from \"./heat_map.vue?vue&type=script&lang=js&\"\nexport * from \"./heat_map.vue?vue&type=script&lang=js&\"\nimport style0 from \"./heat_map.vue?vue&type=style&index=0&id=41f149b0&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"41f149b0\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./heat_map.vue?vue&type=style&index=0&id=41f149b0&prod&scoped=true&lang=css&\""],"sourceRoot":""}