Initial ui - Toolbar is now floating over the map'

components/gis/Map.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <div class="mapouter">
+      <div id="info" class="esri-widget">
+        <toolbar :toolbar="toolbar"></toolbar>
+      </div>
       <div id="viewDiv"></div>
     </div>
   </div>
@@ -9,8 +12,12 @@
 <script>
 import { loadModules, loadCss } from 'esri-loader'
 import { mapState, mapGetters, mapMutations } from 'vuex'
+import Toolbar from '~/components/tools/Toolbar.vue'
 export default {
   layout: 'dashboard',
+  components: {
+    Toolbar
+  },
   computed: {
     ...mapState({
       gisLayers: state => state.gis.defaultLayers
@@ -20,43 +27,70 @@ export default {
     })
   },
   mounted() {
+    window.dojoConfig = {
+      packages: [
+        {
+          name: 'vue',
+          location: 'https://unpkg.com/vue/dist/',
+          main: 'vue'
+        }
+      ]
+    }
     loadModules([
       'esri/Map',
       'esri/views/MapView',
       'esri/WebMap',
       'esri/layers/TileLayer',
-      'esri/layers/FeatureLayer'
-    ]).then(
-      ([Map, MapView, WebMap, TileLayer, FeatureLayer]) => {
-        loadCss()
-        const self = this
-        const defaultExtent = self.defaultExtent
-        const map = new Map({})
-        // eslint-disable-next-line no-unused-vars
-        const view = new MapView({
-          container: 'viewDiv', // Reference to the scene div created in step 5
-          map: map, // Reference to the map object created before the scene
-          zoom: defaultExtent.zoom, // Sets zoom level based on level of detail (LOD)
-          center: defaultExtent.center, // Sets center point of view using longitude,latitude
-          extent: {
-            xmin: defaultExtent.xmin,
-            ymin: defaultExtent.ymin,
-            xmax: defaultExtent.xmax,
-            ymax: defaultExtent.ymax,
-            spatialReference: defaultExtent.spatialReference
-          }
-        })
-        const mapLayer = new TileLayer({
-          url:
-            'http://apnsgis1.apsu.edu:6080/arcgis/rest/services/CommunityMaps/CMC_Basemaps_2274/MapServer',
-          // This property can be used to uniquely identify the layer
-          id: 'Streets',
-          visible: true,
-          spatialReference: 102736
-        })
-        map.add(mapLayer)
-      } // END Map
-    )
+      'esri/layers/FeatureLayer',
+      'esri/core/watchUtils',
+      'vue'
+    ])
+      .then(
+        ([Map, MapView, WebMap, TileLayer, FeatureLayer, watchUtils, Vue]) => {
+          loadCss()
+          const self = this
+          const defaultExtent = self.defaultExtent
+          const map = new Map({})
+          // eslint-disable-next-line no-unused-vars
+          const view = new MapView({
+            container: 'viewDiv', // Reference to the scene div created in step 5
+            map: map, // Reference to the map object created before the scene
+            zoom: defaultExtent.zoom, // Sets zoom level based on level of detail (LOD)
+            center: defaultExtent.center, // Sets center point of view using longitude,latitude
+            extent: {
+              xmin: defaultExtent.xmin,
+              ymin: defaultExtent.ymin,
+              xmax: defaultExtent.xmax,
+              ymax: defaultExtent.ymax,
+              spatialReference: defaultExtent.spatialReference
+            }
+          })
+          const mapLayer = new TileLayer({
+            url:
+              'http://apnsgis1.apsu.edu:6080/arcgis/rest/services/CommunityMaps/CMC_Basemaps_2274/MapServer',
+            // This property can be used to uniquely identify the layer
+            id: 'Streets',
+            visible: true,
+            spatialReference: 102736
+          })
+          map.add(mapLayer)
+          // ***  Start Toolbar *** Makes the Toolbar floating over the map
+          view.when(function() {
+            const info = new Vue({
+              el: '#info',
+              data: {
+                toolbar: view.toolbar
+              }
+            })
+            view.ui.add(info.$el, 'top-right')
+          }) // ***  End Toolbar ***
+        } // END Map
+      )
+      .catch(err => {
+        // handle any errors
+        // eslint-disable-next-line no-console
+        console.error(err)
+      })
   },
   methods: {
     ...mapMutations({})

components/tools/Toolbar.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="toolbar">
+    <v-toolbar dense floating>
+      <v-text-field
+        hide-details
+        prepend-icon="search"
+        single-line
+      ></v-text-field>
+
+      <v-btn icon>
+        <v-icon>my_location</v-icon>
+      </v-btn>
+      <v-btn icon>
+        <v-icon>more_vert</v-icon>
+      </v-btn>
+    </v-toolbar>
+  </div>
+</template>
+<script>
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['toolbar']
+}
+</script>

pages/index.vue

@@ -1,6 +1,5 @@
 <template>
   <v-app>
-    <!-- Sizes your content based upon application components -->
     <v-content>
       <!-- Provides the application the proper gutter -->
       <v-container fluid><Map /> </v-container>