PronounsPage/components/LanguageMap.vue

<template>
    <div>
        <div id="map"></div>
    </div>
</template>


<script>
import Vue from "vue";
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) {
        acc[language.walsCode] = language;
    }
    return acc;
}, {});

export default Vue.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 = L.map('map').setView([45, 15], 3);

        // alternatively, for full-width map:
        // typeof(window) !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT
        //     ? [45, 15]
        //     : [40, 65],

        L.control.attribution({ position: 'bottomright'})
            .addAttribution('&copy; <a href="https://doi.org/10.5281/zenodo.7385533" 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">wals.info</a>')
            .addTo(map);

        new 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 = 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, '_blank');
            });
        }

        // 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;
}
</style>