TokyoCityMapCard を largemap.vue から分離し単独表示用の設定を追加

components/cards/TokyoCityMapCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-col cols="12" md="12" class="DataCard">
+    <map-card
+      :title="''"
+      :caption="$t('※7:30〜8:30の平均値')"
+      :title-id="'tokyo-city-heatmap'"
+      :chart-id="'tokyo-city-chart'"
+      :map-id="'tokyo-city-map'"
+      :initial-bounds="[
+        [139.695239, 35.676437],
+        [139.773774, 35.694493]
+      ]"
+      :map-height="640"
+      :map-options="{ interactive: true }"
+      :unit="'人'"
+      :url="'https://ds.yahoo.co.jp/datapolicy/'"
+      :source-link-header="$t('※本データは2020年3月31日までの掲載となります')"
+      :heatmap-legend="[20000, 40000, 60000]"
+      :link-string="$t('ヤフー・データソリューション')"
+      :date="''"
+    />
+  </v-col>
+</template>
+
+<script>
+import MapCard from '@/components/MapCard.vue'
+
+export default {
+  components: {
+    MapCard
+  }
+}
+</script>

nuxt.config.ts

@@ -175,7 +175,8 @@ const config: Configuration = {
         '/cards/shinjuku-visitors',
         '/cards/chiyoda-visitors',
         '/cards/shinjuku-st-heatmap',
-        '/cards/tokyo-st-heatmap'
+        '/cards/tokyo-st-heatmap',
+        '/cards/tokyo-city-heatmap'
       ]
 
       const routes: string[] = []

pages/cards/_card.vue

@@ -48,6 +48,9 @@
     <tokyo-st-map-card
       v-else-if="this.$route.params.card == 'tokyo-st-heatmap'"
     />
+    <tokyo-city-map-card
+      v-else-if="this.$route.params.card == 'tokyo-city-heatmap'"
+    />
   </div>
 </template>
 
@@ -71,6 +74,7 @@ import ShinjukuVisitorsCard from '@/components/cards/ShinjukuVisitorsCard.vue'
 import ChiyodaVisitorsCard from '@/components/cards/ChiyodaVisitorsCard.vue'
 import ShinjukuStMapCard from '@/components/cards/ShinjukuStMapCard.vue'
 import TokyoStMapCard from '@/components/cards/TokyoStMapCard.vue'
+import TokyoCityMapCard from '@/components/cards/TokyoCityMapCard.vue'
 
 export default {
   components: {
@@ -87,7 +91,8 @@ export default {
     ShinjukuVisitorsCard,
     ChiyodaVisitorsCard,
     ShinjukuStMapCard,
-    TokyoStMapCard
+    TokyoStMapCard,
+    TokyoCityMapCard
   },
   data() {
     let title, updatedAt

pages/largemap.vue

@@ -4,29 +4,7 @@
       {{ headerItem.title }}
     </page-header>
     <v-row class="DataBlock">
-      <v-col cols="12" md="12" class="DataCard">
-        <map-card
-          :title="''"
-          :caption="$t('※7:30〜8:30の平均値')"
-          :title-id="'tokyo-city-title'"
-          :chart-id="'tokyo-city-chart'"
-          :map-id="'tokyo-city-map'"
-          :initial-bounds="[
-            [139.695239, 35.676437],
-            [139.773774, 35.694493]
-          ]"
-          :map-height="640"
-          :map-options="{ interactive: true }"
-          :unit="'人'"
-          :url="'https://ds.yahoo.co.jp/datapolicy/'"
-          :source-link-header="
-            $t('※本データは2020年3月31日までの掲載となります')
-          "
-          :heatmap-legend="[20000, 40000, 60000]"
-          :link-string="$t('ヤフー・データソリューション')"
-          :date="''"
-        />
-      </v-col>
+      <tokyo-city-map-card />
     </v-row>
   </div>
 </template>
@@ -37,12 +15,12 @@ import { MetaInfo } from 'vue-meta'
 import PageHeader from '@/components/PageHeader.vue'
 import Data from '@/data/data.json'
 import News from '@/data/news.json'
-import MapCard from '@/components/MapCard.vue'
+import TokyoCityMapCard from '@/components/cards/TokyoCityMapCard.vue'
 
 export default Vue.extend({
   components: {
     PageHeader,
-    MapCard
+    TokyoCityMapCard
   },
   data() {
     const data = {