Add map to homepag

app/assets/stylesheets/components/_map.scss

@@ -0,0 +1,12 @@
+.map {
+  &--main {
+    @include gutters;
+
+    .map {
+
+      &__mapbox {
+        height: rem-calc(700);
+      }
+    }
+  }
+}

app/javascript/components/map/MapInteractive.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="classes">
+    <v-map
+      :mapbox-token="mapboxToken"
+      class="map__mapbox"
+    />
+  </div>
+</template>
+
+<script>
+import VMap from './VMap'
+
+export default {
+  name: 'map-interactive',
+
+  components: { VMap },
+
+  props: {
+    classes: {
+      type: String
+    }
+  },
+
+  data () {
+    return {
+      mapboxToken: process.env.MAPBOX_TOKEN
+    }
+  }
+}
+</script>

app/javascript/components/map/VMap.vue

@@ -0,0 +1,42 @@
+<template>
+  <div 
+    :id="id" 
+  />
+</template>
+
+<script>
+export default {
+  name: 'v-map',
+
+  props: {
+    mapboxToken: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      id: 'map-target',
+      mapbox: {
+        accessToken: this.mapboxToken,
+      }
+    }
+  },
+
+  mounted () {
+    mapboxgl.accessToken =  this.mapbox.accessToken
+    
+    const map = new mapboxgl.Map({
+      container: this.id,
+      style: 'mapbox://styles/mapbox/streets-v11'
+    })
+
+    this.map = map
+  },
+
+  methods: {
+
+  }
+}
+</script>

app/javascript/vue.js

@@ -27,6 +27,7 @@ import ChartTreemapInteractive from './components/charts/chart-treemap/ChartTree
 import ChartRectangles from './components/charts/chart-rectangles/ChartRectangles'
 import ChartRowTarget from './components/charts/chart-row-target/ChartRowTarget'
 import ChartSunburst from './components/charts/chart-sunburst/ChartSunburst'
+import MapInteractive from './components/map/MapInteractive'
 import NavBurger from './components/nav/NavBurger'
 import SelectWithContent from './components/select/SelectWithContent'
 import StickyBar from './components/sticky/StickyBar'
@@ -66,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
         ChartRectangles,
         ChartRowTarget,
         ChartSunburst,
+        MapInteractive,
         NavBurger,
         SelectWithContent,
         StickyBar,

app/views/home/index.html.erb

@@ -26,7 +26,7 @@
 </section>
 
 <section>
-  map main
+  <%= render partial: "partials/maps/main" %>
 </section>
 
 <section>

app/views/layouts/partials/_head.html.erb

@@ -22,22 +22,30 @@
 
 <!-- IE stuff -->
 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+<!-- end IE stuff -->
 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 <link rel="manifest" href="/manifest.json">
 <%= csrf_meta_tags %>
 
+<!-- stylesheets -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-<%= stylesheet_link_tag 'application', media: 'all' %>
+<link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet'>
 
 <% if @for_pdf %>
   <%= stylesheet_link_tag 'pdf', media: 'all' %>    
 <% end %>
 
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-
 <%= stylesheet_pack_tag 'application' %>
+<!-- end stylesheets -->
+
+<!-- scripts -->
 <%= javascript_pack_tag 'application' %>
 
-<%= render 'partials/google_analytics' %>
+<%= render 'partials/google_analytics' %>
+
+<script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
+<link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
+<!-- end scripts -->

app/views/partials/maps/_main.html.erb

@@ -0,0 +1 @@
+<map-interactive classes="map--main"></map-interactive>

package.json

@@ -8,6 +8,7 @@
     "bourbon": "^5.1.0",
     "bourbon-neat": "^1.9.0",
     "d3": "^5.9.2",
+    "dotenv-webpack": "^1.7.0",
     "es6-object-assign": "^1.1.0",
     "es6-promise": "^4.2.6",
     "leaflet": "^1.4.0",

yarn.lock

@@ -2703,6 +2703,25 @@ dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+dotenv-defaults@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.0.2.tgz#441cf5f067653fca4bbdce9dd3b803f6f84c585d"
+  integrity sha512-iXFvHtXl/hZPiFj++1hBg4lbKwGM+t/GlvELDnRtOFdjXyWP7mubkVr+eZGWG62kdsbulXAef6v/j6kiWc/xGA==
+  dependencies:
+    dotenv "^6.2.0"
+
+dotenv-webpack@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
+  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
+  dependencies:
+    dotenv-defaults "^1.0.2"
+
+dotenv@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"