feat(leaflet): implement venue map

i18n/venue/index.i18n.js

@@ -12,6 +12,9 @@ export default genI18nMessages({
             address:
                 'No. 128, Sec. 2, Academia Rd., Nankang, Taipei 115, Taiwan',
         },
+        venueMap: {
+            title: 'Venue Map',
+        },
         transMode: {
             car: 'By Car',
             publicTransport: 'By Public Transport',
@@ -143,6 +146,9 @@ export default genI18nMessages({
             name: '中央研究院\n人文社會科學館',
             address: '台北市南港區研究院路 2 段 128 號',
         },
+        venueMap: {
+            title: '會場地圖',
+        },
         transMode: {
             car: '自行開車',
             publicTransport: '大眾運輸工具',

layouts/default.vue

@@ -153,7 +153,8 @@ html {
 
 .default-layout__header {
     @apply fixed w-full;
-    z-index: 1000;
+    /* over leaflet z-index 1000 */
+    z-index: 1001;
     height: 52px;
 }
 

nuxt.config.js

@@ -61,11 +61,12 @@ export default {
 
     // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
     plugins: [
-        '~/plugins/iterator.js',
-        '~/plugins/http.js',
-        '~/plugins/strings.js',
-        '~/plugins/vue-dompurify.js',
-        '~/plugins/vue-awesome-swiper.js',
+        { src: '~/plugins/iterator.js' },
+        { src: '~/plugins/http.js' },
+        { src: '~/plugins/strings.js' },
+        { src: '~/plugins/vue-dompurify.js' },
+        { src: '~/plugins/vue-awesome-swiper.js' },
+        { src: '~/plugins/leaflet.js', mode: 'client' },
     ],
 
     // Auto import components (https://go.nuxtjs.dev/config-components)
@@ -97,7 +98,7 @@ export default {
         // https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module
         'nuxt-facebook-pixel-module',
         // https://i18n.nuxtjs.org/
-        'nuxt-i18n',
+        '@nuxtjs/i18n',
         [
             'nuxt-fontawesome',
             {
@@ -124,15 +125,14 @@ export default {
         // This module must be at the end of the modules array
         '@nuxtjs/sitemap',
     ],
-
     i18n: {
         strategy: 'prefix',
         locale: 'en-us',
         defaultLocale: 'en-us',
         fallbackLocale: 'en-us',
         locales: ['en-us', 'zh-hant'],
         detectBrowserLanguage: {
-            onlyOnRoot: true, // recommended
+            redirectOn: 'root',
         },
     },
 

package.json

@@ -19,19 +19,21 @@
         "@fortawesome/free-regular-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@nuxt/http": "^0.6.2",
+        "@nuxtjs/i18n": "^7.3.1",
         "@nuxtjs/markdownit": "^2.0.0",
         "@nuxtjs/sitemap": "^2.4.0",
         "@tailwindcss/aspect-ratio": "^0.2.1",
         "core-js": "^3.6.5",
         "dayjs": "^1.10.6",
+        "leaflet": "^1.9.4",
         "nuxt": "^2.15.3",
         "nuxt-facebook-pixel-module": "^1.5.0",
         "nuxt-fontawesome": "^0.4.0",
-        "nuxt-i18n": "^6.18.0",
         "swiper": "^6.7.5",
         "uuid": "^8.3.2",
         "vue-awesome-swiper": "^4.1.1",
-        "vue-dompurify-html": "^2.3.0"
+        "vue-dompurify-html": "^2.3.0",
+        "vue2-leaflet": "^2.7.1"
     },
     "devDependencies": {
         "@nuxt/types": "^2.14.11",

pages/venue/index.vue

@@ -30,6 +30,15 @@
                 v-if="selectedTransModeIndex === 2"
             ></VenueShuttleServiceTab>
         </div>
+        <client-only v-if="selectedTransModeIndex === 1">
+            <core-h1
+                class="venue-title whitespace-pre-line pt-20 text-center"
+                :title="$t('venueMap.title')"
+                center
+            >
+            </core-h1>
+            <VenueMap class=""></VenueMap>
+        </client-only>
     </i18n-page-wrapper>
 </template>
 
@@ -42,7 +51,6 @@ import VenueTab from '@/components/venue/VenueTab.vue'
 import VenuePublicTransporterTab from '@/components/venue/VenuePublicTransporterTab.vue'
 import VenueDriveTab from '@/components/venue/VenueDriveTab.vue'
 import VenueShuttleServiceTab from '@/components/venue/VenueShuttleServiceTab.vue'
-
 export default {
     i18n,
     name: 'PageVenue',
@@ -54,6 +62,7 @@ export default {
         VenuePublicTransporterTab,
         VenueDriveTab,
         VenueShuttleServiceTab,
+        VenueMap: () => import('./venueMap.vue'),
     },
     data() {
         return {

pages/venue/venueMap.vue

@@ -0,0 +1,122 @@
+<template>
+    <l-map
+        ref="leafletMap"
+        style="height: 300px"
+        :zoom="zoom"
+        :center="center"
+        :options="options"
+    >
+        <l-tile-layer
+            v-for="tileProvider in tileProviders"
+            :key="tileProvider.name"
+            :name="tileProvider.name"
+            :visible="tileProvider.visible"
+            :url="tileProvider.url"
+            :attribution="tileProvider.attribution"
+            layer-type="base"
+        />
+
+        <l-control-layers position="bottomright"></l-control-layers>
+        <l-control-zoom position="topright"></l-control-zoom>
+        <l-control
+            position="topright"
+            class="leaflet-bar custom-control rounded-sm"
+        >
+            <button
+                class="h-[30px] w-[30px] bg-white leading-[30px]"
+                @click="centerMap"
+            >
+                <img
+                    class="m-auto"
+                    :src="venueButtonUrl"
+                    alt="venue-center-btn"
+                />
+            </button>
+        </l-control>
+        <l-marker :lat-lng="markerLatLng" :icon="icon">
+            <l-tooltip
+                :options="{
+                    offset: [-4, 20],
+                    direction: 'bottom',
+                }"
+                >中央研究院 人文社會科學館</l-tooltip
+            ></l-marker
+        >
+    </l-map>
+</template>
+
+<script>
+import {
+    LMap,
+    LControl,
+    LTileLayer,
+    LMarker,
+    LControlZoom,
+    LControlLayers,
+    LTooltip,
+} from 'vue2-leaflet'
+import { icon } from 'leaflet'
+export default {
+    name: 'VenueMap',
+    components: {
+        LMap,
+        LTileLayer,
+        LMarker,
+        LControlZoom,
+        LControlLayers,
+        LTooltip,
+        LControl,
+    },
+    data() {
+        return {
+            venueButtonUrl: require('@/static/venue-button.png'),
+            currentCenter: [25.040997, 121.611417],
+            options: {
+                zoomControl: false,
+                scrollWheelZoom: false,
+                minZoom: 10,
+            },
+            tileProviders: [
+                {
+                    name: 'Stamen',
+                    visible: false,
+                    attribution:
+                        'Tiles by <a href="https://stamen.com">Stamen Design</a>. Data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors.',
+                    url: 'http://{s}.sm.mapstack.stamen.com/((toner-background,$fff[@20],$000[hsl-color])[@90],(toner-lines,$fff[@80],$fff[hsl-saturation@20],$502526[hsl-color]),(toner-labels,$fff[@30]))/{z}/{x}/{y}.png',
+                },
+                {
+                    name: 'Transport',
+                    visible: true,
+
+                    attribution:
+                        'Maps &copy; <a href="https://www.thunderforest.com" target="_blank" rel="noopener">Thunderforest</a>, Data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap </a> contributors.',
+                    url: 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38',
+                },
+            ],
+            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            attribution:
+                '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+            zoom: 16,
+            icon: icon({
+                iconUrl: '/snake.png',
+                shadowUrl: '/snake-bg.png',
+                iconSize: [42, 42],
+                iconAnchor: [21, 21],
+                shadowSize: [45, 55],
+                shadowAnchor: [25, 30],
+            }),
+            center: [25.040997, 121.611417],
+            markerLatLng: [25.040997, 121.611417],
+        }
+    },
+    methods: {
+        centerMap() {
+            this.$nextTick(() => {
+                this.$refs.leafletMap.mapObject.panTo([25.040997, 121.611417])
+            })
+        },
+    },
+}
+</script>
+
+<style scoped></style>

plugins/leaflet.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
+import 'leaflet/dist/leaflet.css'
+
+Vue.component('l-map', LMap)
+Vue.component('l-tile-layer', LTileLayer)
+Vue.component('l-marker', LMarker)