basic maps WIP

app/assets/stylesheets/application.scss

@@ -50,6 +50,11 @@ body {
   }
 }
 
+#map {
+  height: 600px; /* The height is 400 pixels */
+  width: 100%; /* The width is the width of the web page */
+}
+
 .background-color {
   position: fixed;
   z-index: -2;

app/controllers/api/v1/data_centers_controller.rb

@@ -64,6 +64,14 @@ def index_with_nodes
         }, status: :ok
       end
 
+      def index_for_map
+        data_centers = DataCenter.select(:data_center_key, :location_latitude, :location_longitude)
+                                 .where.not(data_center_key: "0--Unknown")
+        render json: {
+          data_centers: data_centers
+        }, status: :ok
+      end
+
       def data_center_stats
         dc_by_country = DataCenterStat.where(network: dc_params[:network])
                                       .joins(:data_center)

app/controllers/map_controller.rb

@@ -0,0 +1,4 @@
+class MapController < ApplicationController
+  def index
+  end
+end

app/helpers/map_helper.rb

@@ -0,0 +1,2 @@
+module MapHelper
+end

app/javascript/packs/data_centers/map_component.js

@@ -0,0 +1,14 @@
+import Vue from 'vue/dist/vue.esm'
+import TurbolinksAdapter from 'vue-turbolinks';
+import MapComponent from './map_component.vue';
+
+Vue.use(TurbolinksAdapter);
+
+document.addEventListener('turbolinks:load', () => {
+  new Vue({
+    el: '#data-center-map-component',
+    render(createElement) {
+      return createElement(MapComponent)
+    }
+  })
+})

app/javascript/packs/data_centers/map_component.vue

@@ -0,0 +1,73 @@
+<template>
+    <div id="map"></div>
+</template>
+
+<script>
+  import axios from 'axios';
+  import { mapGetters } from 'vuex';
+
+  axios.defaults.headers.get["Authorization"] = window.api_authorization;
+
+  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+    key: "AIzaSyDgZS-lkCg_dKPRU-oRTSM6ZY0mXwiznEk",
+    v: "weekly",
+  });
+
+  export default {
+    data() {
+      return {
+        data_centers: [],
+        map: null
+      }
+    },
+
+    created() {
+        this.initMap();
+        this.add_markers();
+    },
+
+    computed: mapGetters([
+      'network'
+    ]),
+
+    methods: {
+      initMap: async function() {
+        // The location of Uluru
+        const position = { lat: -25.344, lng: 131.031 };
+
+        const { Map } = await google.maps.importLibrary("maps")
+
+        // The map, centered at Uluru
+        this.map = new Map(document.getElementById("map"), {
+            zoom: 4,
+            center: position,
+            mapId: "DEMO_MAP_ID",
+        });
+        },
+
+        add_markers: async function() {
+          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+          const infoWindow = new google.maps.InfoWindow();
+          axios.get('/api/v1/data-centers-for-map')
+               .then(response => {
+                 this.data_centers = response.data['data_centers'];
+                 this.data_centers.forEach(data_center => {
+                    let position = { lat: parseFloat(data_center.location_latitude), lng: parseFloat(data_center.location_longitude) };
+                    let marker = new google.maps.Marker({
+                        position: position,
+                        map: this.map,
+                        title: data_center.data_center_key,
+                        optimized: false
+                    });
+
+                    marker.addListener("click", () => {
+                        infoWindow.close();
+                        infoWindow.setContent(marker.getTitle());
+                        infoWindow.open(marker.getMap(), marker);
+                    });
+                });
+          });
+        }
+    }
+  }
+</script>

app/views/map/index.html.erb

@@ -0,0 +1,3 @@
+<%= javascript_pack_tag "data_centers/map_component.js" %>
+
+<div id="data-center-map-component"></div>

config/routes.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
+  get 'map/index'
   mount ActionCable.server => '/cable'
 
   # Default root path
@@ -193,6 +194,7 @@
       get "gossip-nodes/:network", to: "gossip_nodes#index", as: "gossip_nodes"
 
       get "data-centers-with-nodes/:network", to: "data_centers#index_with_nodes", as: "data_centers_with_nodes"
+      get "data-centers-for-map", to: "data_centers#index_for_map", as: "data_centers_for_map"
       get "data-center-stats/:network", to: "data_centers#data_center_stats", as: "data_center_stats"
 
       get "account-authorities/:network", to: "account_authority#index", as: "account_authorities"

test/controllers/map_controller_test.rb

@@ -0,0 +1,8 @@
+require "test_helper"
+
+class MapControllerTest < ActionDispatch::IntegrationTest
+  test "should get index" do
+    get map_index_url
+    assert_response :success
+  end
+end