{"version":3,"sources":["webpack:///./src/views/maps/sensors/SensorsMap.vue?aa7f","webpack:///src/views/maps/sensors/SensorsMap.vue","webpack:///./src/views/maps/sensors/SensorsMap.vue?fb2f","webpack:///./src/views/maps/sensors/SensorsMap.vue","webpack:///./src/views/maps/sensors/SensorsMap.vue?bbbf","webpack:///./src/views/maps/sensors/SensorsMap.vue?63b6"],"names":["sensors","render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","$t","slot","_v","_s","playingAnim","on","onSelectionClick","_m","directives","name","rawName","value","expression","layers","onLayerSelect","onDownloadLayer","onLayerRemove","MapTime","_e","selectedSensor","feature","Aqparameters","H24Parameters","staticRenderFns","staticStyle","sourceandlayers","components","data","mounted","methods","computed","component"],"mappings":"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","file":"js/sensorsMap.d7bd1a25.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('l-container',{staticClass:\"mb-4\"},[_c('l-container-title',{attrs:{\"slot\":\"toolbar\",\"text\":this.$t('mapmenu'),\"icon\":\"network-wired\",\"color\":\"bg-pastel-purple\"},slot:\"toolbar\"}),_vm._v(\"\\n    \"+_vm._s(_vm.$t('layerselection'))+\"\\n    \"+_vm._s(_vm.$t('animationselection'))+\"\\n  \")],1),_c('div',{staticClass:\"grid grid-cols-3\"},[_c('div',{staticClass:\"col-span-2\"},[_c('LLayerSelection',{attrs:{\"playingAnim\":_vm.playingAnim},on:{\"click\":_vm.onSelectionClick}})],1),_vm._m(0),_c('div',[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.loading),expression:\"loading\"}]},[_vm._m(1),_c('div',{staticClass:\"flex justify-center items-center\"},[_vm._v(_vm._s(_vm.$t(\"dataloading\")))])]),_c('Layers',{attrs:{\"layers\":_vm.layers,\"id\":\"testid\"},on:{\"checklayer\":_vm.onLayerSelect,\"downloadlayer\":_vm.onDownloadLayer,\"removelayer\":_vm.onLayerRemove}}),(_vm.MapTime)?_c('div',{staticClass:\"timedisplay bg-gray-500 text-center text-lg text-white\"},[_vm._v(_vm._s(_vm.MapTime))]):_vm._e(),_c('SensorStatus',{attrs:{\"selectedSensor\":_vm.selectedSensor,\"ssfeature\":_vm.feature,\"ssH24Parameters\":_vm.Aqparameters.H24Parameters,\"measurementStatus\":true,\"placementStatus\":false}})],1)])],1)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"col-span-2\"},[_c('div',{staticClass:\"grid grid-cols-3\"},[_c('div',{staticClass:\"col-span-2\",staticStyle:{\"float\":\"left\",\"margin-top\":\"1%\"},attrs:{\"id\":\"menu\"}},[_c('input',{staticStyle:{\"margin-left\":\"3%\"},attrs:{\"id\":\"light-v10\",\"type\":\"radio\",\"name\":\"rtoggle\",\"value\":\"light\",\"checked\":\"checked\"}}),_c('label',{staticStyle:{\"margin-left\":\"0.2%\"},attrs:{\"for\":\"light-v10\"}},[_vm._v(\"Light\")]),_c('input',{staticStyle:{\"margin-left\":\"1.5%\"},attrs:{\"id\":\"satellite-v9\",\"type\":\"radio\",\"name\":\"rtoggle\",\"value\":\"satellite\"}}),_c('label',{staticStyle:{\"margin-left\":\"0.2%\"},attrs:{\"for\":\"satellite-v9\"}},[_vm._v(\"Satellite\")]),_c('input',{staticStyle:{\"margin-left\":\"1.5%\"},attrs:{\"id\":\"dark-v10\",\"type\":\"radio\",\"name\":\"rtoggle\",\"value\":\"dark\"}}),_c('label',{staticStyle:{\"margin-left\":\"0.2%\"},attrs:{\"for\":\"dark-v10\"}},[_vm._v(\"Dark\")]),_c('input',{staticStyle:{\"margin-left\":\"1.5%\"},attrs:{\"id\":\"streets-v11\",\"type\":\"radio\",\"name\":\"rtoggle\",\"value\":\"streets\"}}),_c('label',{staticStyle:{\"margin-left\":\"0.2%\"},attrs:{\"for\":\"streets-v11\"}},[_vm._v(\"Streets\")]),_c('input',{staticStyle:{\"margin-left\":\"1.5%\"},attrs:{\"id\":\"outdoors-v11\",\"type\":\"radio\",\"name\":\"rtoggle\",\"value\":\"outdoors\"}}),_c('label',{staticStyle:{\"margin-left\":\"0.2%\"},attrs:{\"for\":\"outdoors-v11\"}},[_vm._v(\"Outdoors\")]),_c('input',{staticStyle:{\"margin-left\":\"1.5%\"},attrs:{\"id\":\"navigation-night-v1\",\"type\":\"radio\",\"name\":\"rtoggle\",\"value\":\"navigation\"}}),_c('label',{staticStyle:{\"margin-left\":\"0.2%\"},attrs:{\"for\":\"navigation-night-v1\"}},[_vm._v(\"Navigation\")])]),_c('div',{staticClass:\"geocoder;col-span-3\",staticStyle:{\"margin-left\":\"15%\"},attrs:{\"id\":\"geocoder\"}})]),_c('div',{attrs:{\"id\":\"map\"}})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"flex justify-center items-center\"},[_c('div',{staticClass:\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900\"})])}]\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <l-container class=\"mb-4\">\n      <l-container-title\n        slot=\"toolbar\"\n        :text= \"this.$t('mapmenu')\"\n        icon=\"network-wired\"\n        color=\"bg-pastel-purple\"\n      />\n      {{$t('layerselection')}}\n      {{$t('animationselection')}}\n    </l-container>\n    <div class=\"grid grid-cols-3\">\n      <div class=\"col-span-2\">\n        <LLayerSelection :playingAnim=\"playingAnim\" @click=\"onSelectionClick\"/>\n      </div>\n      <div class=\"col-span-2\">\n        <div class=\"grid grid-cols-3\">\n          <div id=\"menu\" class=\"col-span-2\" style=\" float:left;margin-top: 1%;\">\n            \n            <input id=\"light-v10\" type=\"radio\" name=\"rtoggle\" value=\"light\" checked=\"checked\" style=\"margin-left: 3%;\">\n            <label for=\"light-v10\" style=\"margin-left: 0.2%;\">Light</label>\n            <input id=\"satellite-v9\" type=\"radio\" name=\"rtoggle\" value=\"satellite\" style=\"margin-left: 1.5%;\">\n            <label for=\"satellite-v9\" style=\"margin-left: 0.2%;\">Satellite</label>\n            <input id=\"dark-v10\" type=\"radio\" name=\"rtoggle\" value=\"dark\" style=\"margin-left: 1.5%;\">\n            <label for=\"dark-v10\" style=\"margin-left: 0.2%;\">Dark</label>\n            <input id=\"streets-v11\" type=\"radio\" name=\"rtoggle\" value=\"streets\" style=\"margin-left: 1.5%;\">\n            <label for=\"streets-v11\" style=\"margin-left: 0.2%;\">Streets</label>\n            <input id=\"outdoors-v11\" type=\"radio\" name=\"rtoggle\" value=\"outdoors\" style=\"margin-left: 1.5%;\">\n            <label for=\"outdoors-v11\" style=\"margin-left: 0.2%;\">Outdoors</label>\n            <input id=\"navigation-night-v1\" type=\"radio\" name=\"rtoggle\" value=\"navigation\" style=\"margin-left: 1.5%;\">\n            <label for=\"navigation-night-v1\" style=\"margin-left: 0.2%;\">Navigation</label>\n          </div>\n          <div id=\"geocoder\" class=\"geocoder;col-span-3\" style=\"margin-left: 15%;\"></div>\n        </div>\n        <div id='map'>\n        </div>        \n      </div>\n      <div>\n        <div v-show=\"loading\">\n          <div class=\"flex justify-center items-center\">\n            <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900\"></div>\n          </div>\n          <div class=\"flex justify-center items-center\">{{$t(\"dataloading\")}}</div>\n        </div>\n        <Layers :layers=\"layers\" id= \"testid\" v-on:checklayer=\"onLayerSelect\" v-on:downloadlayer=\"onDownloadLayer\" v-on:removelayer=\"onLayerRemove\"/>\n        <div v-if=\"MapTime\" class=\"timedisplay bg-gray-500 text-center text-lg text-white\">{{MapTime}}</div>\n        <SensorStatus :selectedSensor=\"selectedSensor\" :ssfeature=\"feature\" :ssH24Parameters=\"Aqparameters.H24Parameters\" :measurementStatus=\"true\" :placementStatus=\"false\"></SensorStatus>\n        \n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n\n\nimport mapboxgl from 'mapbox-gl'\nimport MapboxGeocoder from \"@mapbox/mapbox-gl-geocoder\";\nimport SensorsService from \"../../../helpers/apiservices/sensors/sensors.service\";\nimport MapboxglSettings from \"../../../helpers/settings/mapboxgl\";\nimport ObservationsService from \"../../../helpers/apiservices/observations/observations.service\";\nimport GeoJSONWrapper from \"../../../helpers/geojsonwrapper\";\n//Helpers\nimport Aqparameters from \"../../../helpers/settings/aqparameters\"; \nimport ObservationStatus from \"../../../helpers/observationstatus\"; \nimport MapboxglHelper from \"@/helpers/mapboxglhelper\";\n\n//Components\nimport LLayerSelection from \"../../../views/viewer/LLayerSelection\";\nimport Layers from './Layers';\nimport SensorStatus from './SensorStatus';\n\nimport {Legendgraphics} from '../../../components/controls/mapboxcontrols'\nimport GeoserverHelper from '../../../helpers/geoserver' \nimport * as moment from \"moment\";\nimport Vue from 'vue'\n\nrequire('mapbox-gl/dist/mapbox-gl.css');\n\n//Variables for map\nvar map;\nvar sensors;\nvar disabledSensors;\nconst DEFAULTLAYERDS = \"Disabled sensors\";\nvar sourceandlayers = [];\n\nconst selected = Vue.observable({sensor: {}}); \nconst mbfeature = Vue.observable({feature: {}}); \n\nexport default {\n\nname: 'SensorsMap',\ncomponents: {\n  LLayerSelection,\n  Layers,\n  SensorStatus\n},\ndata() {\n  return {\n    sensors: [],\n    disabledsensors:[],\n    playingAnim: false,\n    loading: false,\n    layers: {\n      placementlayers: [],\n      maplayers:[],\n      measurementlayers:[]\n    },\n    Aqparameters: Aqparameters.settings() ,\n    controls: [],\n  };\n},\nmounted() {\n  //Testing without using Notify\n  //Notify.loadData(null, this.loadInitialData);\n  this.loading = true;\n  this.loadInitialData();\n},\nmethods: {\n  async loadInitialData() { \n\n    //Map create\n    this.map();\n    \n    //Get all sensors\n    this.sensors = await SensorsService.sensors();\n    sensors = this.sensors; //variable for mapbox gl js for all sensors\n\n    //Check sensor status based on different parmameters (online, qc flags, mobile/static/disabled sensor)\n    await this.addStatus();\n\n    //Place disabled sensors in its own layer\n    this.loadDisabledSensors();\n\n    //Load Measurements- mobile sensors\n    this.loadMobileSensorMeasurements();\n\n    //Load Measurements- static sensors\n    this.loadStaticSensorMeasurements();\n\n    //Turn off loader\n    this.loading = false;\n  },\n\n  async loadStaticSensorMeasurements(){\n\n    const sensorscomp = [];\n    let onlineSensors = this.staticSensors.filter( s => s.onlinedata); \n\n    //sensor.onlinedata = true;\n    onlineSensors.forEach((s) => {\n      this.Aqparameters.LastHourParameters.forEach((c) => {\n        sensorscomp.push({\"SensorId\" : s.id, \"SensorName\": s.name, \"Component\": c.name, \"ProviderId\": s.provider.id});\n      });\n    });\n\n    const filtering = {\n      From: moment().utc().subtract(2, 'hours').unix(), \n      To : moment().utc().unix(), \n      AggLevel: 'hourly',\n      Sensors: sensorscomp\n    };\n\n    this.loading = true;\n    let obs = await ObservationsService.aggregeatedobservations(filtering);\n\n    //Create one layer for each of the defined parameters\n    this.Aqparameters.LastHourParameters.forEach(param => {\n\n      //Only static sensors that have this component registered\n      let compsensors = onlineSensors.filter(cs => cs.components.some(c=> c.name === param.name)); \n\n      let compsensorobs =  obs.filter( o => {\n          if(o.component == param.name && compsensors.some(cs => cs.id === o.id)){return true;}\n          return false;\n        });\n\n      var msobs = GeoJSONWrapper.wrapStaticSensorLastMeasurements(\n        obs.filter( o => {\n          if(o.component == param.name && compsensors.some(cs => cs.id === o.id)){return true;}\n          return false;\n        }),\n        onlineSensors);\n\n      MapboxglHelper.addCircleClusterValueSourceAndLayer(\n        this.addSourceAndLayer(msobs, 'lastmeasurement' + param.name, param.layername, 'none', 'clustercircle', param.colorcodes), //stores in variable and returns the object\n        map\n      );\n\n      //Custom event for showing sensor status with measurements for the last 24H, right side on screen \n      map.on('click', `${param.layername}_layer`, function(e) {\n        var features = map.queryRenderedFeatures(e.point, { layers: [`${param.layername}_layer`] });\n        var point_count = features[0].properties.point_count;\n        let numbers = parseInt(point_count) ? parseInt(point_count) : 0;\n        //If just showing one - add as selected sensor to show graphs\n        if(numbers === 0 ){\n          var ss =  sensors.find(s => {return s.id === features[0].properties.id});\n              selected.sensor = ss;\n              mbfeature.feature = features[0];\n        }\n      });\n\n      //Add filtering options - binding for Layer component\n      this.layers.measurementlayers.push({'name': param.layername, 'checked': false}); \n\n      this.loading = false;\n\n    });\n  },\n  async loadMobileSensorMeasurements(){\n\n    //Get observations\n    await Promise.all(this.mobileSensors.map(async (sensor) => {\n      let filter = {\n          datefrom: moment().utc().subtract(1, 'days').unix(), \n          dateto : moment().utc().unix(), \n          sensorid: sensor.id,\n          providerid : sensor.provider.id\n        };\n      \n      this.loading = true;\n      let obs = await ObservationsService.sensorobservationsTS(filter);\n\n      //Create sensor property for all data for the last 24 hours for each defined parameter \n      this.Aqparameters.H24Parameters.forEach(param => {\n        sensor['last24obs' + param.name] = obs.filter( o => o.component === param.name); \n      });\n\n    }));\n\n    //Create one layer for each of the defined parameters\n    this.Aqparameters.H24Parameters.forEach(param => {\n      var msobs = GeoJSONWrapper.wrapmobilesensors24hobs(this.mobileSensors, 'last24obs' + param.name);\n      MapboxglHelper.addCircleValueSourceAndLayer(\n        this.addSourceAndLayer(msobs, 'mobilesensorobs' + param.name, param.layername, 'none', 'circle', param.colorcodes), //stores in variable and returns the object\n        map\n      );\n\n      //Custom event for showing sensor status with measurements for the last 24H, right side on screen \n      map.on('click', `${param.layername}_layer`, function(e) {\n        var features = map.queryRenderedFeatures(e.point, { layers: [`${param.layername}_layer`] });\n        var point_count = features[0].properties.point_count;\n        let numbers = parseInt(point_count) ? parseInt(point_count) : 0;\n        //If just showing one - add as selected sensor to show graphs\n        if(numbers === 0 ){\n          var ss =  sensors.find(s => {return s.id === features[0].properties.id});\n              selected.sensor = ss;\n              mbfeature.feature = features[0];\n        }\n      });\n\n      //Add filtering options - binding for Layer component\n      this.layers.measurementlayers.push({'name': param.layername, 'checked': false}); \n      \n      this.loading = false;\n    });\n  },\n\n  loadDisabledSensors: function(){\n\n    this.loading = true;\n\n    this.disabledsensors = this.sensors.filter(function(v, i, a){return !v.enabled});\n    disabledSensors = this.disabledsensors; //variable used for map events, copy of vue data variable\n    this.sensors = this.sensors.filter(function(v, i, a){return v.enabled});\n\n    //Create a layer of the disabled sensors\n    var jsondatasource = GeoJSONWrapper.wrapsensors(this.disabledsensors);\n    //var sourcelayer = \n    MapboxglHelper.addSymbolSourceAndLayer(\n      this.addSourceAndLayer(jsondatasource, 'disabledsensors', DEFAULTLAYERDS, 'none', 'symbol',''), //stores in variable and returns the object\n      map\n      );\n\n    //Add filtering options - binding for Layer component\n    this.layers.measurementlayers.push({'name': DEFAULTLAYERDS, 'checked': false}); \n\n    this.loading = false;\n\n  },\n\n  map: function (layers) {\n\n    //set mapbox keys and init\n    mapboxgl.accessToken = MapboxglSettings.accessToken.key; \n    map = new mapboxgl.Map(MapboxglSettings.map);\n\n    // Initialize the search\n    const geocoder = new MapboxGeocoder({\n        \n        accessToken: mapboxgl.accessToken, // Set the access token\n        mapboxgl: mapboxgl, // Set the mapbox-gl instance\n        marker: false, // Do not use the default marker style\n        placeholder: this.$t('searchplace')\n      });\n    document.getElementById('geocoder').appendChild(geocoder.onAdd(map));\n\n    //Changes style - event\n    const layerList = document.getElementById('menu');\n    const inputs = layerList.getElementsByTagName('input');\n    for (const input of inputs) {\n        input.onclick = (layer) => {\n          const layerId = layer.target.id;\n          map.setStyle('mapbox://styles/mapbox/' + layerId + '?fresh=true');\n        };\n    } \n\n    //Need to recreate all sources and layers when new style is added\n    map.on('style.load', function () {\n      MapboxglHelper.recreatesourceandlayer(sourceandlayers, map);\n    });\n\n    //Set map attributes\n    map.addControl(new mapboxgl.AttributionControl({\n      customAttribution: 'The maps make partial use of open uEMEP data, whose provision by MET Norway is gratefully acknowledged'\n    }));\n\n  },\n\n  //Store sources and layers that are added on the map in a variable for map to use in events\n  //This will be used for recreation of sources and layers when the style is changed\n  addSourceAndLayer: function(jsondata, sourcename, layername, visibility, type, colorcodes){\n    var sourcelayer = {\n      jsondata: jsondata,\n      sourcename: sourcename,\n      layername: layername,\n      visibility: visibility,\n      type: type,\n      colorcodes: colorcodes\n    }\n    sourceandlayers.push(sourcelayer); \n    return sourcelayer;\n  },\n\n  async addStatus(){\n    \n    let obs = await ObservationsService.observationsasync();\n    let sensorobs = obs.filter((e, i) => obs.findIndex(a => a[\"id\"] === e[\"id\"]));\n\n    this.sensors.forEach(sensor => {\n      sensor.statustext = [];\n      sensor =  ObservationStatus.setStatus(sensor, obs, sensorobs);\n\n    });\n  },\n\n  //Event emitted from Layer component\n  async onLayerSelect(e) { \n    MapboxglSettings.onLayerSelect(e, map);\n    //Update list of source and layers\n    var layer = sourceandlayers.find((sourceandlayer) => sourceandlayer.layername==e.name);\n    layer.visibility = e.checked ? 'visible' : 'none';\n  },\n\n  //Event emitted from Layer component\n  async onLayerRemove(e) { \n    //remove layer, source and from the layout list\n    MapboxglSettings.onLayerRemove(`${e.name}_layer`, `${e.name}_source`, map); \n\n    //Only maplayers can be removed\n    if(this.layers.maplayers.find(function(v, i, a){return v.name == e.name}) !== null){\n      sourceandlayers = sourceandlayers.filter(function(v, i, a){return v.layername !== e.name});\n      this.layers.maplayers = this.layers.maplayers.filter(function(v, i, a){return v.name !== e.name});\n    } \n  },\n\n  async onDownloadLayer(e) {  \n  },\n\n\n  //******************* For animation ***************************\n  async onSelectionClick(selections) {  \n    switch (selections.filtering) {\n      case \"single\":\n        this.addMapLayer(selections);\n        break;\n      case \"animation\":\n        this.addMapAnimation(selections);\n        break;\n      case \"clear\":\n        this.clearMapAnimation(selections);\n        break;\n      default:\n        break;\n    }\n  },\n  addMapLayer: function(selections){\n    const name = `${selections.layer}_${selections.component}_${selections.to}`;\n    //avoid duplicate layers\n    if(!this.layers.maplayers.some(l => l.name === name)){\n      this.layers.maplayers.push({\n        'name': name, \n        'checked': true, \n        'selections': selections\n      });\n\n      MapboxglHelper.addMapLayer(\n        this.addSourceAndLayer([GeoserverHelper.SingleMap(selections).url], name, name, 'visible', 'map',''), //stores in variable and returns the object\n        map\n      );\n    }\n    this.addLegendGraphics(selections); \n  },\n  addLegendGraphics(selections){\n    if(!this.controls.some(e => e.component === selections.component)){\n      let legendgraphics = new Legendgraphics(selections.layer, selections.defaultstyle, selections.component);\n      this.controls.push(legendgraphics);\n      map.addControl(legendgraphics, 'top-left' );\n    }\n  },\n  addMapAnimation: function(selections){\n    //remove prevous animation layers\n    MapboxglSettings.onLayerRemove(`${selections.layer}_animl`, `${selections.layer}_anims`, map); \n    \n    this.currentAnimTime = moment(selections.from).utc().toISOString();\n    this.playingAnim = true;\n\n    map.addSource(`${selections.layer}_anims` , MapboxglSettings.imagesource(this.getMapPath(selections), selections));\n    map.addLayer(MapboxglSettings.rasterlayer(`${selections.layer}_animl`, `${selections.layer}_anims`));\n    map.flyTo({center: [(selections.latlonboundingbox.maxx + selections.latlonboundingbox.minx)/2, \n      (selections.latlonboundingbox.maxy + selections.latlonboundingbox.miny)/2], zoom: 11});\n\n    this.addLegendGraphics(selections);\n\n      //Update the image by creating a new url with the next hour,\n    this.intervalid = setInterval(() => {\n      if(this.currentAnimTime === selections.to){ //Stop adding new images when the stop time is matching\n        clearInterval(this.intervalid);  \n        this.playingAnim = false;  \n      }\n      else\n      {\n        map.getSource(`${selections.layer}_anims`).updateImage({ url: this.getMapPath(selections) });\n        this.currentAnimTime = moment(this.currentAnimTime).add(1, 'hours').utc().toISOString();\n      }\n    },1500);\n  },\n  clearMapAnimation: function(selections){\n    //remove prevous animation layers\n    MapboxglSettings.onLayerRemove(`${selections.layer}_animl`, `${selections.layer}_anims`, map);\n  },\n  getMapPath : function (selections) {\n      return (\n        GeoserverHelper.SingleMapBbox(selections, this.currentAnimTime).url\n      );\n  },\n  \n},\ncomputed:{\n  MapTime: function(){\n    if(this.currentAnimTime){\n      return moment(this.currentAnimTime).format(\"DD MM YYYY HH:mm\");  \n    }\n    return '';\n  },\n  selectedSensor(){\n     return selected.sensor;\n  },\n  feature(){\n     return mbfeature.feature;\n  },\n  staticSensors(){\n    return this.sensors.filter(sensor=> {return sensor.staticsensor});\n  },\n  mobileSensors(){\n    return this.sensors.filter(sensor=> {return !sensor.staticsensor});\n  }\n}\n};\n</script>\n\n<style lang=\"postcss\">\n\n/* purgecss start ignore */\n.geocoder {\n  position: absolute;\n  z-index: 1;\n  width: 50%;\n  left: 50%;\n  margin-left: -25%;\n  top: 10px;\n}\n.mapboxgl-ctrl-geocoder {\n  min-width: 100%;\n}\n#map {\n  width: 65%;\n  height: 70%;\n  position: absolute;\n  \n}\n.mappopups {\n  width: 800px;\n}\n.mapboxgl-popup mapboxgl-popup-anchor-bottom{\n  max-width: 500px;\n}\n.timedisplay\n{\n  height: 30px;\n  width: 175px;\n  right: 0;\n  left: 0;\n  margin-right: 60%;\n  margin-left: auto;\n  margin-top: 10px;\n  position: absolute;\n}\n\n/* purgecss end ignore */\n#loader {\n  position: absolute;\n  z-index: 1;\n  width: 35px;\n  height: 35px;\n  \n  border: 5px solid #d7d2d2;\n  border-radius: 50%;\n  border-top: 5px solid #3498db;\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n}\n\n@-webkit-keyframes spin {\n  0% { -webkit-transform: rotate(0deg); }\n  100% { -webkit-transform: rotate(360deg); }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Add animation to \"page content\" */\n.animate-bottom {\n  position: relative;\n  -webkit-animation-name: animatebottom;\n  -webkit-animation-duration: 1s;\n  animation-name: animatebottom;\n  animation-duration: 1s\n}\n\n@-webkit-keyframes animatebottom {\n  from { bottom:-100px; opacity:0 } \n  to { bottom:0px; opacity:1 }\n}\n\n@keyframes animatebottom { \n  from{ bottom:-100px; opacity:0 } \n  to{ bottom:0; opacity:1 }\n}\n\n</style>\n\n<style lang=\"postcss\">\n@import 'https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css';\n</style>","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!./SensorsMap.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!./SensorsMap.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SensorsMap.vue?vue&type=template&id=79d0c012&\"\nimport script from \"./SensorsMap.vue?vue&type=script&lang=js&\"\nexport * from \"./SensorsMap.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SensorsMap.vue?vue&type=style&index=0&lang=postcss&\"\nimport style1 from \"./SensorsMap.vue?vue&type=style&index=1&lang=postcss&\"\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  null,\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/index.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--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SensorsMap.vue?vue&type=style&index=0&lang=postcss&\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/index.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--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SensorsMap.vue?vue&type=style&index=1&lang=postcss&\""],"sourceRoot":""}