mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-23 04:34:15 -04:00
(pnpm) depend on leaflet instead of dynamically loading it
This commit is contained in:
Valentyne Stigloher
parent
e30e3fc444
commit
c75fabb58b
@ -3,11 +3,13 @@
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import dark from '../plugins/dark.ts';
|
||||
import walsLanguages from '../assets/languages.csv';
|
||||
import walsLanguages from '~/assets/languages.csv';
|
||||
import locales from '../locale/locales.ts';
|
||||
import { clearUrl } from '~/src/helpers.ts';
|
||||
import type { LocaleDescription } from '../locale/locales.ts';
|
||||
import type { GridLayerOptions } from 'leaflet/index.d.ts';
|
||||
|
||||
const MOBILE_BREAKPOINT = 992;
|
||||
|
||||
@ -16,32 +18,37 @@ const localesByWalsCode = locales.reduce((acc, language) => {
|
||||
acc[language.walsCode] = language;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}, {} as Record<string, LocaleDescription>);
|
||||
|
||||
declare module 'leaflet' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-namespace
|
||||
namespace GridLayer {
|
||||
class TinyWorld extends GridLayer {
|
||||
constructor(options?: GridLayerOptions & { render: unknown });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default dark.extend({
|
||||
async mounted() {
|
||||
await this.$loadStylesheet(
|
||||
'leaflet',
|
||||
'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css',
|
||||
);
|
||||
await this.$loadScript(
|
||||
'leaflet',
|
||||
'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
|
||||
);
|
||||
const { default: L } = await import('leaflet');
|
||||
await this.$loadScript(
|
||||
'tinyworldmap',
|
||||
'https://tinyworldmap.com/dist/v3/tiny-world-borders.js',
|
||||
);
|
||||
|
||||
const pos = window.innerWidth < MOBILE_BREAKPOINT ? [45, 15] : [40, 65];
|
||||
const map = window.L.map('map', { attributionControl: false }).setView(pos, 3);
|
||||
const map = L.map('map', {
|
||||
attributionControl: false,
|
||||
center: window.innerWidth < MOBILE_BREAKPOINT ? [45, 15] : [40, 65],
|
||||
zoom: 3,
|
||||
});
|
||||
|
||||
window.L.control.attribution({ position: 'bottomright' })
|
||||
L.control.attribution({ position: 'bottomright' })
|
||||
.addAttribution('© <a href="https://doi.org/10.5281/zenodo.7385533" target="_blank" title="Dryer, Matthew S. & Haspelmath, Martin (eds.) 2013. The World Atlas of Language Structures Online. Leipzig: Max Planck Institute for Evolutionary Anthropology.">WALS</a>')
|
||||
.addAttribution('<a href="https://wals.info" target="_blank">wals.info</a>')
|
||||
.addTo(map);
|
||||
|
||||
new window.L.GridLayer.TinyWorld({
|
||||
new L.GridLayer.TinyWorld({
|
||||
minZoom: 1,
|
||||
maxZoom: 5,
|
||||
render: {
|
||||
@ -67,7 +74,7 @@ export default dark.extend({
|
||||
}
|
||||
const locale = localesByWalsCode[walsLanguage.id];
|
||||
|
||||
const circle = window.L.circle([walsLanguage.latitude, walsLanguage.longitude], {
|
||||
const circle = L.circle([walsLanguage.latitude, walsLanguage.longitude], {
|
||||
color: '#971064',
|
||||
fillColor: '#c71585',
|
||||
fillOpacity: 0.5,
|
||||
@ -83,6 +90,8 @@ export default dark.extend({
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~leaflet/dist/leaflet.css';
|
||||
|
||||
#map {
|
||||
height: 500px;
|
||||
z-index: 0;
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
"js-md5": "^0.7.3",
|
||||
"jsdom": "^21.0.0",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"lodash": "^4.17.21",
|
||||
"luxon": "^1.28.1",
|
||||
"markdown-it": "^14.0.0",
|
||||
@ -104,6 +105,7 @@
|
||||
"@types/express-session": "^1.17.10",
|
||||
"@types/js-md5": "^0.7.2",
|
||||
"@types/jsonwebtoken": "^8.5.9",
|
||||
"@types/leaflet": "^1.9.12",
|
||||
"@types/lodash": "^4.14.197",
|
||||
"@types/luxon": "^1.27.1",
|
||||
"@types/multer": "1.4.5",
|
||||
|
||||
20
pnpm-lock.yaml
generated
20
pnpm-lock.yaml
generated
@ -101,6 +101,9 @@ dependencies:
|
||||
jsonwebtoken:
|
||||
specifier: ^8.5.1
|
||||
version: 8.5.1
|
||||
leaflet:
|
||||
specifier: ^1.9.4
|
||||
version: 1.9.4
|
||||
lodash:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
@ -271,6 +274,9 @@ devDependencies:
|
||||
'@types/jsonwebtoken':
|
||||
specifier: ^8.5.9
|
||||
version: 8.5.9
|
||||
'@types/leaflet':
|
||||
specifier: ^1.9.12
|
||||
version: 1.9.12
|
||||
'@types/lodash':
|
||||
specifier: ^4.14.197
|
||||
version: 4.14.197
|
||||
@ -4797,6 +4803,10 @@ packages:
|
||||
'@types/webpack': 4.41.38
|
||||
dev: true
|
||||
|
||||
/@types/geojson@7946.0.14:
|
||||
resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
|
||||
dev: true
|
||||
|
||||
/@types/graceful-fs@4.1.9:
|
||||
resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
|
||||
dependencies:
|
||||
@ -4872,6 +4882,12 @@ packages:
|
||||
'@types/node': 20.11.5
|
||||
dev: false
|
||||
|
||||
/@types/leaflet@1.9.12:
|
||||
resolution: {integrity: sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==}
|
||||
dependencies:
|
||||
'@types/geojson': 7946.0.14
|
||||
dev: true
|
||||
|
||||
/@types/less@3.0.5:
|
||||
resolution: {integrity: sha512-OdhItUN0/Cx9+sWumdb3dxASoA0yStnZahvKcaSQmSR5qd7hZ6zhSriSQGUU3F8GkzFpIILKzut4xn9/GvhusA==}
|
||||
dev: true
|
||||
@ -11387,6 +11403,10 @@ packages:
|
||||
invert-kv: 2.0.0
|
||||
dev: true
|
||||
|
||||
/leaflet@1.9.4:
|
||||
resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
|
||||
dev: false
|
||||
|
||||
/leven@3.1.0:
|
||||
resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user