{"version":3,"sources":["webpack:///./src/views/AdvancedAnalytics/Map.vue?2803","webpack:///./src/views/AdvancedAnalytics/Map.vue","webpack:///src/views/AdvancedAnalytics/Map.vue","webpack:///./src/views/AdvancedAnalytics/Map.vue?1292","webpack:///./src/views/AdvancedAnalytics/Map.vue?dab2"],"names":["render","_vm","this","_c","_self","staticRenderFns","name","unmounted","data","stations","el","methods","component"],"mappings":"kHAAA,W,kECAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,QAElEE,EAAkB,GCSP,GACfC,KAAA,MAkCAC,cAIAC,UAAA,CACAC,SAAA,GACAC,GAAA,OAEAC,QAAA,ICtD2V,I,wBCQvVC,EAAY,eACd,EACAZ,EACAK,GACA,EACA,KACA,WACA,MAIa,aAAAO,E","file":"js/chunk-412e3b14.04768f86.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Map.vue?vue&type=style&index=0&id=885bb286&prod&scoped=true&lang=css\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c(\"div\")\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <!--<div ref=\"mapContainer\" class=\"map-container\"></div>-->\n</template>\n\n<script>\n/*import axios from 'axios';\nimport mapboxgl from 'mapbox-gl';\nimport MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';\nimport { mdiGasStation } from '@mdi/js';*/\n//mapboxgl.accessToken = process.env.VUE_APP_MAPBOX_ACCESS_TOKEN;\n\nexport default {\n    name: 'Map',\n    /*mounted() {\n        const map = new mapboxgl.Map({\n            container: this.$refs.mapContainer,\n            style: 'mapbox://styles/hcobian/clxtd8p9203v701qo756u664q'\n        });\n        const directions = new MapboxDirections({\n            accessToken: mapboxgl.accessToken,\n            unit: 'metric',\n            profile: 'mapbox/driving',\n            controls: {\n                instructions: true,\n                profileSwitcher: false\n            }\n        });\n\n        this.getStations();\n\n        //map.addControl(directions, 'top-left');\n\n        /*map.on('style.load', () => {\n            map.setConfigProperty('basemap', 'lightPreset', 'dusk');\n        });*/\n\n        /*const updateLocation = () =>\n            this.$emit('update:modelValue', this.getLocation());\n\n        map.on('move', updateLocation);\n        map.on('zoom', updateLocation);\n        map.on('rotate', updateLocation);\n        map.on('pitch', updateLocation);\n\n        this.map = map;\n    },*/\n    unmounted() {\n        //this.map.remove();\n        //this.map = null;\n    },\n    data: () => ({\n        stations: [],\n        el: null\n    }),\n    methods: {\n        /*getStations() {\n            axios\n                .get('v2/locations/stations/geodata')\n                .then(response => {\n                    this.stations = response.data;\n                    this.addMarkersToMap();\n                })\n                .catch(error => {\n                    console.error(error);\n                });\n        },\n        addMarkersToMap() {\n            this.stations.forEach(station => {\n                if (station.geo_data) {\n                    const location = station.geo_data.location.coordinates;\n                    const el = this.createMarkerElement(station);\n\n                    new mapboxgl.Marker({\n                        color: '#1976d2',\n                        el\n                    })\n                        .setLngLat([location[0], location[1]])\n                        .setPopup(\n                            new mapboxgl.Popup().setHTML(\n                                `\n                                <h3>${station.Name}</h3><br>\n                                <table>\n                                    <tr>\n                                        <td>Address:</td>\n                                        <td>${station.Address}</td>\n                                    </tr>\n                                    <tr>\n                                        <td>City:</td>\n                                        <td>${station.City}</td>\n                                    </tr>\n                                    <tr>\n                                        <td>State:</td>\n                                        <td>${station.State}</td>\n                                    </tr>\n                                    <tr>\n                                        <td>Zip:</td>\n                                        <td>${station.Zip}</td>\n                                    </tr>\n                                    <tr>\n                                        <td>Phone:</td>\n                                        <td>${station.Phone}</td>\n                                    </tr>\n                                </table>\n                                <a href=\"https://www.google.com/maps/search/?api=1&query=${\n                                    location[1]\n                                },${\n                                    location[0]\n                                }\" target=\"_blank\">Open in Google Maps</a>\n                                <h4>Tanks</h4>\n                                <table>\n                                    <tr>\n                                        <th>Product</th>\n                                        <th>Capacity</th>\n                                        <th>Level</th>\n                                        <th>Estimated Runout</th>\n                                    </tr>\n                                    ${station.tanks.map(tank => {\n                                        return `\n                                        <tr>\n                                            <td>${tank.Tank}</td>\n                                            <td>${tank.product.Product}</td>\n                                            <td>${tank.Capacity}</td>\n                                            <td>${tank.runout_at}</td>\n                                        </tr>\n                                        `;\n                                    })}\n                                </table>\n                                </div>\n                                `\n                            )\n                        )\n                        .addTo(this.map);\n                }\n            });\n        },\n        createMarkerElement(location) {\n            const el = document.createElement('div');\n            el.className = 'marker';\n            el.innerHTML = `\n        <svg class=\"marker\" style=\"width:24px;height:24px;color:blue\" viewBox=\"0 0 24 24\">\n          <path d=\"${mdiGasStation}\" />\n        </svg>\n      `;\n            el.addEventListener('click', this.getLocationClick(location));\n            return el;\n        },\n        getLocationClick(data) {\n            console.info(data);\n        }*/\n    }\n};\n</script>\n\n<style scoped>\n.map-container {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 100%;\n}\n\n.marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n    cursor: pointer;\n    color: #1976d2; /* Adjust the color as needed */\n}\n\n.marker svg {\n    color: #1976d2; /* Adjust the color as needed */\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Map.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Map.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Map.vue?vue&type=template&id=885bb286&scoped=true\"\nimport script from \"./Map.vue?vue&type=script&lang=js\"\nexport * from \"./Map.vue?vue&type=script&lang=js\"\nimport style0 from \"./Map.vue?vue&type=style&index=0&id=885bb286&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  \"885bb286\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}