mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-10-20 21:06:04 -04:00
95 lines
3.1 KiB
Vue
95 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div id="map" :class="isDark ? 'dark' : ''"></div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import dark from '../plugins/dark.ts';
|
|
import walsLanguages from '../assets/languages.csv';
|
|
import locales from '../locale/locales.ts';
|
|
import { clearUrl } from '~/src/helpers.ts';
|
|
|
|
const localesByWalsCode = locales.reduce((acc, language) => {
|
|
if (language.walsCode && language.published) {
|
|
acc[language.walsCode] = language;
|
|
}
|
|
return acc;
|
|
}, {});
|
|
|
|
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',
|
|
);
|
|
await this.$loadScript(
|
|
'tinyworldmap',
|
|
'https://tinyworldmap.com/dist/v3/tiny-world-borders.js',
|
|
);
|
|
|
|
var map = window.L.map('map').setView([45, 15], 3);
|
|
|
|
// alternatively, for full-width map:
|
|
// typeof(window) !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT
|
|
// ? [45, 15]
|
|
// : [40, 65],
|
|
|
|
window.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({ maxZoom: 19 }).addTo(map);
|
|
|
|
for (const walsLanguage of walsLanguages) {
|
|
if (!localesByWalsCode.hasOwnProperty(walsLanguage.id)) {
|
|
continue;
|
|
}
|
|
const locale = localesByWalsCode[walsLanguage.id];
|
|
|
|
const circle = window.L.circle([walsLanguage.latitude, walsLanguage.longitude], {
|
|
color: '#971064',
|
|
fillColor: '#c71585',
|
|
fillOpacity: 0.5,
|
|
radius: 200000,
|
|
}).addTo(map);
|
|
circle.bindTooltip(`<strong>${locale.name}</strong><br/>${clearUrl(locale.url)}`);
|
|
circle.on('click', () => {
|
|
window.open(locale.url);
|
|
});
|
|
}
|
|
|
|
// attribution gets added twice somehow, remove the duplicate
|
|
// TODO proper fix
|
|
const attribution = this.$el.querySelectorAll('.leaflet-control-attribution');
|
|
if (attribution.length > 1) {
|
|
attribution[1].remove();
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#map {
|
|
height: 500px;
|
|
z-index: 0;
|
|
&.dark {
|
|
.leaflet-layer,
|
|
.leaflet-control-zoom-in,
|
|
.leaflet-control-zoom-out,
|
|
.leaflet-control-attribution {
|
|
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
|
|
svg, img {
|
|
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|