From ec839e254dac397fb4800352855dfa473deebfe2 Mon Sep 17 00:00:00 2001 From: SeanHsieh Date: Sat, 5 Aug 2023 22:43:21 +0800 Subject: [PATCH 1/3] feat(leaflet): implement venue map --- i18n/venue/index.i18n.js | 6 + nuxt.config.js | 16 +-- package-lock.json | 246 +++++++++++++++++++++++++++++++++------ package.json | 6 +- pages/venue/index.vue | 11 +- pages/venue/venueMap.vue | 112 ++++++++++++++++++ plugins/leaflet.js | 7 ++ static/snake-icon.png | Bin 0 -> 723 bytes 8 files changed, 357 insertions(+), 47 deletions(-) create mode 100644 pages/venue/venueMap.vue create mode 100644 plugins/leaflet.js create mode 100644 static/snake-icon.png diff --git a/i18n/venue/index.i18n.js b/i18n/venue/index.i18n.js index ea5e449bc4..d8c50e076d 100644 --- a/i18n/venue/index.i18n.js +++ b/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: '大眾運輸工具', diff --git a/nuxt.config.js b/nuxt.config.js index cd75afce9f..12f13734e6 100644 --- a/nuxt.config.js +++ b/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,7 +125,6 @@ export default { // This module must be at the end of the modules array '@nuxtjs/sitemap', ], - i18n: { strategy: 'prefix', locale: 'en-us', @@ -132,7 +132,7 @@ export default { fallbackLocale: 'en-us', locales: ['en-us', 'zh-hant'], detectBrowserLanguage: { - onlyOnRoot: true, // recommended + redirectOn: 'root', }, }, diff --git a/package-lock.json b/package-lock.json index 3cab27c284..7aac45be69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -133,6 +133,11 @@ "semver": "^6.1.2" } }, + "@babel/helper-environment-visitor": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", + "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==" + }, "@babel/helper-explode-assignable-expression": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz", @@ -256,6 +261,11 @@ "@babel/types": "^7.14.5" } }, + "@babel/helper-string-parser": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", + "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==" + }, "@babel/helper-validator-identifier": { "version": "7.14.9", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", @@ -1154,9 +1164,9 @@ "dev": true }, "@intlify/shared": { - "version": "9.1.7", - "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.7.tgz", - "integrity": "sha512-zt0zlUdalumvT9AjQNxPXA36UgOndUyvBMplh8uRZU0fhWHAwhnJTcf0NaG9Qvr8I1n3HPSs96+kLb/YdwTavQ==" + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz", + "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==" }, "@intlify/vue-i18n-extensions": { "version": "1.0.2", @@ -1662,6 +1672,47 @@ } } }, + "@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "requires": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "@jridgewell/resolve-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==" + }, + "@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==" + }, + "@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" + }, + "@jridgewell/trace-mapping": { + "version": "0.3.18", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz", + "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==", + "requires": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + }, + "dependencies": { + "@jridgewell/sourcemap-codec": { + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" + } + } + }, "@koa/router": { "version": "9.4.0", "resolved": "https://registry.npmjs.org/@koa/router/-/router-9.4.0.tgz", @@ -3124,6 +3175,144 @@ } } }, + "@nuxtjs/i18n": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/@nuxtjs/i18n/-/i18n-7.3.1.tgz", + "integrity": "sha512-DZP6xR8zZA1ApcNjLnukH3BhMRCfi3r236epuXVuPWWOObPf5vkp+VamewnPiSU+zs0Age+PbaaIUryFv/6pDA==", + "requires": { + "@babel/parser": "^7.18.10", + "@babel/traverse": "^7.18.10", + "@intlify/vue-i18n-extensions": "^1.0.2", + "@intlify/vue-i18n-loader": "^1.1.0", + "@nuxt/utils": "2.x", + "cookie": "^0.5.0", + "devalue": "^2.0.1", + "is-https": "^4.0.0", + "js-cookie": "^3.0.1", + "klona": "^2.0.5", + "lodash.merge": "^4.6.2", + "ufo": "^0.8.5", + "vue-i18n": "^8.27.2" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz", + "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==", + "requires": { + "@babel/highlight": "^7.22.5" + } + }, + "@babel/generator": { + "version": "7.22.9", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz", + "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==", + "requires": { + "@babel/types": "^7.22.5", + "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", + "jsesc": "^2.5.1" + } + }, + "@babel/helper-function-name": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", + "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", + "requires": { + "@babel/template": "^7.22.5", + "@babel/types": "^7.22.5" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", + "requires": { + "@babel/types": "^7.22.5" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", + "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", + "requires": { + "@babel/types": "^7.22.5" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", + "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==" + }, + "@babel/highlight": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz", + "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==", + "requires": { + "@babel/helper-validator-identifier": "^7.22.5", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.22.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz", + "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==" + }, + "@babel/template": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz", + "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==", + "requires": { + "@babel/code-frame": "^7.22.5", + "@babel/parser": "^7.22.5", + "@babel/types": "^7.22.5" + } + }, + "@babel/traverse": { + "version": "7.22.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.8.tgz", + "integrity": "sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==", + "requires": { + "@babel/code-frame": "^7.22.5", + "@babel/generator": "^7.22.7", + "@babel/helper-environment-visitor": "^7.22.5", + "@babel/helper-function-name": "^7.22.5", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.22.7", + "@babel/types": "^7.22.5", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz", + "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==", + "requires": { + "@babel/helper-string-parser": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.5", + "to-fast-properties": "^2.0.0" + } + }, + "cookie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==" + }, + "klona": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", + "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==" + }, + "ufo": { + "version": "0.8.6", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.6.tgz", + "integrity": "sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==" + } + } + }, "@nuxtjs/markdownit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@nuxtjs/markdownit/-/markdownit-2.0.0.tgz", @@ -11443,9 +11632,9 @@ } }, "js-cookie": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.0.tgz", - "integrity": "sha512-oUbbplKuH07/XX2YD2+Q+GMiPpnVXaRz8npE7suhBH9QEkJe2W7mQ6rwuMXHue3fpfcftQwzgyvGzIHyfCSngQ==" + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==" }, "js-tokens": { "version": "4.0.0", @@ -11737,7 +11926,8 @@ "klona": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz", - "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==" + "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==", + "dev": true }, "koa": { "version": "2.13.1", @@ -11913,6 +12103,11 @@ "launch-editor": "^2.2.1" } }, + "leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -12966,32 +13161,6 @@ "@fortawesome/vue-fontawesome": "^0.1.4" } }, - "nuxt-i18n": { - "version": "6.28.1", - "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.28.1.tgz", - "integrity": "sha512-JKRs8AmixVZ7k90Rrwq468McfnInP1ymuejYHRGA4VV0nZCLYsdDQXZxXl3JXaER9VatM9C24GM3ArAYFOtUhg==", - "requires": { - "@babel/parser": "^7.14.9", - "@babel/traverse": "^7.14.9", - "@intlify/vue-i18n-extensions": "^1.0.2", - "@intlify/vue-i18n-loader": "^1.1.0", - "cookie": "^0.4.1", - "devalue": "^2.0.1", - "is-https": "^4.0.0", - "js-cookie": "^3.0.0", - "klona": "^2.0.4", - "lodash.merge": "^4.6.2", - "ufo": "^0.7.7", - "vue-i18n": "^8.25.0" - }, - "dependencies": { - "cookie": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", - "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==" - } - } - }, "nwsapi": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", @@ -19534,9 +19703,9 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==" }, "vue-i18n": { - "version": "8.25.0", - "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.25.0.tgz", - "integrity": "sha512-ynhcL+PmTxuuSE1T10htiSXzjBozxYIE3ffbM1RfgAkVbr/v1SP+9Mi/7/uv8ZVV1yGuKjFAYp9BXq+X7op6MQ==" + "version": "8.28.2", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz", + "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==" }, "vue-jest": { "version": "3.0.7", @@ -19730,6 +19899,11 @@ "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" }, + "vue2-leaflet": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz", + "integrity": "sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==" + }, "vuex": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", diff --git a/package.json b/package.json index e4b7b70430..9fa321231c 100644 --- a/package.json +++ b/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", diff --git a/pages/venue/index.vue b/pages/venue/index.vue index 23f52a1e16..664aa7a1fc 100644 --- a/pages/venue/index.vue +++ b/pages/venue/index.vue @@ -30,6 +30,15 @@ v-if="selectedTransModeIndex === 2" > + + + + + @@ -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 { diff --git a/pages/venue/venueMap.vue b/pages/venue/venueMap.vue new file mode 100644 index 0000000000..1516c48d9c --- /dev/null +++ b/pages/venue/venueMap.vue @@ -0,0 +1,112 @@ + + + + + diff --git a/plugins/leaflet.js b/plugins/leaflet.js new file mode 100644 index 0000000000..f5438c8424 --- /dev/null +++ b/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) diff --git a/static/snake-icon.png b/static/snake-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..dd94333df4c5060b752221ae6e74c65ad5be664c GIT binary patch literal 723 zcmV;^0xbQBP)l1rDl0z*|IEI7A(g7ma!vQ*2oz)prY<%Lj~Z)7c;guDmN0Zv2+PZ8~{)*?H@dQ+2+@ z!K1Umy~8iLqv5DA5Fd~Sk{*ME^_T|#!+^|Yvq7IXIAn`fs13!kK@O0eI@XlN4mm;A z(~mt2uUS?Ym>J#?@i-q0iyWm0eR7xnx?|(yd90irv}jSdk{T9S34O)cSmD8q$u*Nh zfhuA`P>N4PD3=(Kk4S{n5Jyyi~yEwrmLeht1b#+*5ukilQirq9}^;iWiWQw8h%4-Io9W002ovPDHLk FV1f?cO%nhB literal 0 HcmV?d00001 From 56bfc9caee08fd9e1f5784c1bcf8ee688c5cb2a8 Mon Sep 17 00:00:00 2001 From: SeanHsieh Date: Sun, 6 Aug 2023 01:17:44 +0800 Subject: [PATCH 2/3] feat(leaflet): implement icon in map --- pages/venue/venueMap.vue | 20 ++++++++++++++------ static/snake-bg.png | Bin 0 -> 5093 bytes static/{snake-icon.png => snake.png} | Bin static/venue-button.png | Bin 0 -> 252 bytes 4 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 static/snake-bg.png rename static/{snake-icon.png => snake.png} (100%) create mode 100644 static/venue-button.png diff --git a/pages/venue/venueMap.vue b/pages/venue/venueMap.vue index 1516c48d9c..4181067e01 100644 --- a/pages/venue/venueMap.vue +++ b/pages/venue/venueMap.vue @@ -15,10 +15,13 @@ :attribution="tileProvider.attribution" layer-type="base" /> + -

Go Back

+

+ venue-center-btn +

OpenStreetMap contributors', - zoom: 15, + zoom: 16, icon: icon({ - iconUrl: '/snake-icon.png', - iconSize: [41, 42], - iconAnchor: [33, 15], + 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], diff --git a/static/snake-bg.png b/static/snake-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..b31db4684cd7789bb185eeb93335635e8353cde7 GIT binary patch literal 5093 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 Hu0mjf8Xm(M literal 0 HcmV?d00001 diff --git a/static/snake-icon.png b/static/snake.png similarity index 100% rename from static/snake-icon.png rename to static/snake.png diff --git a/static/venue-button.png b/static/venue-button.png new file mode 100644 index 0000000000000000000000000000000000000000..9a45fcd955a2967e77b6b048f547832e08c1acb1 GIT binary patch literal 252 zcmVPx#wn;=mR45g_kv$HAKoEu3-wSAIV>|*{=^Z?jC$QB{JC7hYprhA{QZ8WP-}hja z5FutOC;521*_|17ajqFdQX9xk<$p%RY6_1U^2#^DcfYezFYxcmYkD=ct-Ig+t;N(1 z)oYkQ58iNtk@**@vyGt(@);Dd<*BZx(z>1bqxpmRy}YUwaVeFa&9|yAvOQt)|DvUR z*eXPI<#S_z>dG%Lg+AztuP_50 Date: Sat, 26 Aug 2023 10:01:31 +0800 Subject: [PATCH 3/3] fix(leaflet): z-index --- layouts/default.vue | 3 ++- pages/venue/venueMap.vue | 28 +++++++++++++++------------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/layouts/default.vue b/layouts/default.vue index f60c9f528f..1cadec27f7 100644 --- a/layouts/default.vue +++ b/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; } diff --git a/pages/venue/venueMap.vue b/pages/venue/venueMap.vue index 4181067e01..e60175baae 100644 --- a/pages/venue/venueMap.vue +++ b/pages/venue/venueMap.vue @@ -18,10 +18,20 @@ - -

- venue-center-btn -

+ + - +