Map Loads

components/gis/Map.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div class="mapouter">
+      <div id="viewDiv"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { loadModules } from 'esri-loader'
+export default {
+  layout: 'dashboard',
+  mounted() {
+    loadModules(['esri/Map', 'esri/views/MapView']).then(
+      ([Map, MapView, Search, Expand, BasemapGallery]) => {
+        // create map with the given options at a DOM node w/ id 'mapNode'
+        const map = new Map({
+          basemap: 'streets'
+        })
+        // 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: 4, // Sets zoom level based on level of detail (LOD)
+          center: [15, 65] // Sets center point of view using longitude,latitude
+        })
+      }
+    )
+  }
+}
+</script>
+
+<style>
+@import url('https://js.arcgis.com/4.12/esri/css/main.css');
+.mapouter {
+  text-align: right;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+#viewDiv {
+  overflow: hidden;
+  background: none !important;
+  height: 100%;
+  width: 100%;
+}
+</style>

nuxt.config.js

@@ -8,7 +8,7 @@ export default {
    ** Headers of the page
    */
   head: {
-    title: pkg.name,
+    title: 'CMC Map Viewer',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },

pages/index.vue

@@ -1,67 +1,21 @@
 <template>
-  <section class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        nuxt-mapper
-      </h1>
-      <h2 class="subtitle">
-        An ArcGIS API for JavaScript 4 and Nuxt Project
-      </h2>
-      <div class="links">
-        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
-          >Documentation</a
-        >
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey"
-          >GitHub</a
-        >
-      </div>
-    </div>
-  </section>
+  <v-app>
+    <!-- Sizes your content based upon application components -->
+    <v-content>
+      <!-- Provides the application the proper gutter -->
+      <v-container fluid><Map /> </v-container>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue'
-
+import Map from '~/components/gis/Map.vue'
 export default {
+  title: 'CMC Map Viewer',
   components: {
-    Logo
+    Map
   }
 }
 </script>
 
-<style>
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
-</style>
+<style></style>