Skip to content
GeoViewer 5

Source MyLocalisation

Source MyLocalisation

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/my-localisation/my-location.declaration.ts

packages/common/src/lib/widgets/my-localisation/my-location.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { myLocalisationConfig, type MyLocalisationConfig } from './my-localisation.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () => import('./MyLocalisation.svelte').then((MyLocalisation) => widgetFactorySvelte(MyLocalisation)),
    schema: () => myLocalisationConfig,
} satisfies WidgetDeclaration;


export type MyLocalisationProps = WidgetProps<MyLocalisationConfig>;

packages/common/src/lib/widgets/my-localisation/my-localisation.config.ts

packages/common/src/lib/widgets/my-localisation/my-localisation.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration/models/widget/widget-configuration.schema';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { i18nSchemaFrom } from '$lib/api/managers/i18n/i18n.schema';
import { z } from 'zod';
import { hiddenContainerId } from '$lib/components/containers/hidden/hidden.schema';
import { myLocationI18n } from '$lib/widgets/my-localisation/my-location.i18n';


export const myLocalisationConfig = defineWidgetConfig({
    title: {
        fr: 'Ma localisation',
        nl: 'NL - Ma localisation',
    },
    inToolbar: inToolbarSchemaFrom({
        type: 'button',
        icon: {
            active: {
                lucide: 'NavigationOff',
            },
            inactive: {
                lucide: 'Navigation',
            },
        },
    }),
    container: hiddenContainerId,
    i18n: i18nSchemaFrom(myLocationI18n),
    active: false,
    config: z
        .object({
            showAccuracyRadius: z.boolean().default(false),
            zoomBuffer: z.number().default(100),
        })
        .optional()
        .prefault({}),
});


export type MyLocalisationConfig = z.infer<typeof myLocalisationConfig>;

packages/common/src/lib/widgets/my-localisation/my-location.i18n.ts

packages/common/src/lib/widgets/my-localisation/my-location.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';


export const myLocationI18n = {
    'location-denied-message': {
        fr: 'Vous avez refusé de partager votre position',
        nl: 'NL - Vous avez refusé de partager votre position',
    },
    'location-error-message': {
        fr: `Votre localisation n'a pas pu être déterminée`,
        nl: `NL - Votre localisation n'a pas pu être déterminée`,
    },
} satisfies I18nRegistry;

packages/common/src/lib/widgets/my-localisation/MyLocalisation.svelte

packages/common/src/lib/widgets/my-localisation/MyLocalisation.svelte
<script lang="ts">
    import { onDestroy, onMount } from 'svelte';
    import { getMapManager } from '$lib/api/map';
    import { getCurrentLocalisation } from '$lib/api/utils';
    import type { ApiFeature } from '$lib/api/feature';
    import { showToast } from '$lib/components/toast/toast.utils';
    import { getI18n } from '$lib/api/managers/i18n';
    import type { MyLocalisationProps } from './my-location.declaration';


    const { fullConfig, reference }: MyLocalisationProps = $props();


    const { config } = fullConfig;
    const mapManager = getMapManager();
    const zoom = mapManager.tools.zoom;
    const highlight = mapManager.tools.highlight;
    const featureFactory = mapManager.tools.featureFactory;
    const i18n = getI18n(fullConfig.i18n);


    let centerLocalisationFeature: ApiFeature | undefined;
    let accuracyLocalisationFeature: ApiFeature | undefined;


    onMount(() => {
        getCurrentLocalisation()
            .then((userPosition) => {
                clearHighlights();
                switch (userPosition.type) {
                    case 'success': {
                        centerLocalisationFeature = featureFactory.createPoint(userPosition.center);
                        accuracyLocalisationFeature = featureFactory.createPolygon(userPosition.accuracyRadius);
                        highlight.highlightFeature(centerLocalisationFeature);
                        if (config.showAccuracyRadius) {
                            highlight.highlightFeature(accuracyLocalisationFeature);
                        }
                        zoom.zoomToFeature(
                            config.showAccuracyRadius ? accuracyLocalisationFeature : centerLocalisationFeature,
                            { buffer: config.zoomBuffer },
                        );
                        break;
                    }
                    case 'denied': {
                        showToast({
                            level: 'warning',
                            message: i18n('location-denied-message'),
                        });
                        reference.deactivate();
                        break;
                    }
                    case 'error': {
                        showToast({
                            level: 'error',
                            message: i18n('location-error-message'),
                        });
                        reference.deactivate();
                        break;
                    }
                }
            })
            .catch((error) => {
                reference.deactivate();
                throw error;
            });
    });


    function clearHighlights() {
        if (centerLocalisationFeature) {
            highlight.unhighlightFeature(centerLocalisationFeature);
        }
        if (accuracyLocalisationFeature) {
            highlight.unhighlightFeature(accuracyLocalisationFeature);
        }
    }


    onDestroy(() => {
        clearHighlights();
    });
</script>

Aller plus loin