@mapcreator/sdk 0.0.8 → 0.0.9

package/dist/{controls → esm/controls}/geocoderControl.d.ts

@@ -1,4 +1,4 @@
-import { Map } from '@mapcreator/maplibre-gl';
+import type { Map } from '@mapcreator/maplibre-gl';
 export declare class GeocoderControl {
     private map;
     private mapContainer;

package/dist/esm/controls/geocoderControl.js

@@ -0,0 +1,202 @@
+import searchIcon from '@/images/search.svg?raw';
+import closeIcon from '@/images/close.svg?raw';
+import { GraphHopperGeocoderService } from '@/utils/graphhopper';
+import { t } from '@/i18n';
+export class GeocoderControl {
+    map;
+    mapContainer;
+    container;
+    control;
+    input;
+    dropdown;
+    inputWrapper;
+    button;
+    isOpen = false;
+    geocoder = new GraphHopperGeocoderService();
+    suggestions = [];
+    items = [];
+    index = 0;
+    debounce;
+    constructor(map) {
+        this.map = map;
+        this.container = document.createElement('div');
+        this.control = document.createElement('div');
+        this.input = document.createElement('input');
+        this.dropdown = document.createElement('div');
+        this.inputWrapper = document.createElement('div');
+        this.button = document.createElement('button');
+        this.mapContainer = this.map.getContainer();
+    }
+    init() {
+        this.container.className = 'geocoder-container';
+        this.control.className = 'geocoder-control';
+        this.input.className = 'geocoder-input';
+        this.dropdown.className = 'geocoder-dropdown';
+        this.inputWrapper.className = 'geocoder-input-wrapper';
+        this.button.className = 'control-button';
+        this.input.type = 'text';
+        this.input.placeholder = t('search');
+        this.button.innerHTML = searchIcon;
+        const clearBtn = document.createElement('button');
+        clearBtn.className = 'geocoder-clear';
+        clearBtn.innerHTML = closeIcon;
+        const scrollWrapper = document.createElement('div');
+        scrollWrapper.className = 'geocoder-scrollwrapper';
+        scrollWrapper.append(this.dropdown);
+        this.inputWrapper.append(this.input, clearBtn);
+        this.control.append(this.button, this.inputWrapper, scrollWrapper);
+        clearBtn.addEventListener('click', () => this.clearAll());
+        this.button.addEventListener('click', () => this.toggle());
+        this.input.addEventListener('input', () => this.onInput());
+        this.input.addEventListener('keydown', e => this.onKeyDown(e));
+        this.dropdown.addEventListener('mousemove', e => this.onMouseMove(e));
+        this.mapContainer.addEventListener('mousedown', e => this.clickOutside(e));
+        window.addEventListener('resize', () => this.setMaxSizes());
+        this.setMaxSizes();
+        this.updateVisibility();
+        this.container.append(this.control);
+        return this.container;
+    }
+    clickOutside(e) {
+        if (e.target instanceof Node && !this.control.contains(e.target)) {
+            this.hide();
+        }
+    }
+    setMaxSizes() {
+        const { width, height } = this.mapContainer.getBoundingClientRect();
+        this.control.style.maxWidth = `${width - 40}px`;
+        this.dropdown.style.maxHeight = `${Math.min(310, height - 63)}px`;
+    }
+    toggle() {
+        this.isOpen = !this.isOpen;
+        this.button.classList.toggle('open');
+        this.updateVisibility();
+        if (this.isOpen) {
+            this.input.focus();
+        }
+    }
+    hide() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.button.classList.remove('open');
+        this.updateVisibility();
+    }
+    clearDropdown() {
+        this.suggestions = [];
+        this.items = [];
+        this.dropdown.innerHTML = '';
+    }
+    clearAll() {
+        this.input.value = '';
+        this.clearDropdown();
+    }
+    updateVisibility() {
+        const show = this.isOpen;
+        this.inputWrapper.style.display = show ? 'flex' : 'none';
+        if (!show) {
+            this.clearAll();
+        }
+    }
+    onInput() {
+        const query = this.input.value.trim();
+        if (this.debounce) {
+            clearTimeout(this.debounce);
+        }
+        if (query.length < 2) {
+            this.dropdown.innerHTML = '';
+            return;
+        }
+        this.debounce = window.setTimeout(async () => {
+            this.suggestions = await this.geocoder.getLocationInBounds(query, this.map.getCenter(), 20);
+            this.items = [];
+            this.renderSuggestions();
+        }, 200);
+    }
+    renderSuggestions() {
+        this.dropdown.innerHTML = '';
+        this.items = [];
+        this.index = 0;
+        this.suggestions.forEach(suggestion => {
+            const el = document.createElement('div');
+            const title = document.createElement('div');
+            const subtitle = document.createElement('div');
+            el.className = 'geocoder-suggestion';
+            title.className = 'title';
+            subtitle.className = 'subtitle';
+            title.textContent = suggestion.labelTitle;
+            subtitle.textContent = suggestion.subtitle;
+            el.append(title, subtitle);
+            el.addEventListener('mousedown', e => {
+                e.stopPropagation();
+                this.goToSelection(suggestion);
+            });
+            this.dropdown.appendChild(el);
+            this.items.push({ data: suggestion, el });
+        });
+        this.updateHighlight();
+    }
+    updateHighlight() {
+        this.items.forEach((item, index) => {
+            item.el.classList.toggle('highlight', index === this.index);
+        });
+    }
+    onKeyDown(e) {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.index--;
+            if (this.index < 0) {
+                this.index = this.items.length - 1;
+            }
+            this.adjustScroll();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.index++;
+            if (this.index > this.items.length - 1) {
+                this.index = 0;
+            }
+            this.adjustScroll();
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const item = this.items[this.index];
+            if (item) {
+                this.goToSelection(item.data);
+            }
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.hide();
+        }
+        this.updateHighlight();
+    }
+    onMouseMove(e) {
+        const el = e.target.closest('.geocoder-suggestion');
+        this.index = this.items.findIndex(item => item.el === el);
+        this.updateHighlight();
+    }
+    goToSelection(suggestion) {
+        if (suggestion.bbox) {
+            this.map.fitBounds(suggestion.bbox, { duration: 0, animate: false });
+        }
+        else {
+            this.map.jumpTo({ center: suggestion.position, zoom: 16 });
+        }
+        this.input.value = suggestion.labelTitle;
+        this.clearDropdown();
+    }
+    adjustScroll() {
+        const item = this.items[this.index].el;
+        const dropdown = this.dropdown;
+        const dropdownBox = dropdown.getBoundingClientRect();
+        const itemBox = item.getBoundingClientRect();
+        if (itemBox.bottom > dropdownBox.bottom) {
+            dropdown.scrollTop += itemBox.bottom - dropdownBox.bottom;
+        }
+        else if (itemBox.top < dropdownBox.top) {
+            dropdown.scrollTop += itemBox.top - dropdownBox.top;
+        }
+    }
+}

package/dist/{controls → esm/controls}/geolocationControls.d.ts

@@ -1,2 +1,2 @@
-import { Map } from '@mapcreator/maplibre-gl';
+import type { Map } from '@mapcreator/maplibre-gl';
 export declare function useGeolocationButton(map: Map): HTMLElement;

package/dist/esm/controls/geolocationControls.js

@@ -0,0 +1,65 @@
+import geolocationIcon from '@/images/geolocation.svg?raw';
+import locatingIcon from '@/images/locating.svg?raw';
+import { useButtonControl } from '@/controls/controls';
+import { initLayersAndSources, showNotification, addLocationDot, createCircle, } from '@/utils/geolocation';
+export function useGeolocationButton(map) {
+    let isLocating = false;
+    const updateIcons = (locating) => {
+        const button = document.querySelector('.geolocation-button');
+        const geoIcon = button?.querySelector('.geolocation-icon');
+        const locatingIconElem = button?.querySelector('.locating-icon');
+        if (geoIcon && locatingIconElem) {
+            geoIcon.classList.toggle('active', !locating);
+            locatingIconElem.classList.toggle('active', locating);
+        }
+        isLocating = locating;
+    };
+    const handleSuccess = (position) => {
+        const { longitude, latitude, accuracy } = position.coords;
+        const center = [longitude, latitude];
+        if (map.easeTo) {
+            map.easeTo({ center, zoom: 19, duration: 1000 });
+        }
+        else if (map.setCenter) {
+            map.setCenter(center);
+        }
+        const circleSource = map.getSource('location-circle');
+        if (circleSource) {
+            circleSource.setData(createCircle(longitude, latitude, accuracy / 2));
+        }
+        addLocationDot(map, longitude, latitude);
+        map.once('moveend', () => updateIcons(false));
+    };
+    const handleError = (error) => {
+        console.error('Geolocation error:', error);
+        updateIcons(false);
+    };
+    const onClick = () => {
+        if (isLocating) {
+            return;
+        }
+        if (!map.getSource('location-circle')) {
+            initLayersAndSources(map);
+        }
+        updateIcons(true);
+        if (!navigator.geolocation) {
+            showNotification();
+            updateIcons(false);
+            return;
+        }
+        navigator.geolocation.getCurrentPosition(handleSuccess, handleError, {
+            maximumAge: 60000,
+            timeout: 5000,
+        });
+    };
+    const control = {
+        type: 'button',
+        className: 'control-button geolocation-button',
+        content: `
+      <div class="location-icon geolocation-icon active">${geolocationIcon}</div>
+      <div class="location-icon locating-icon">${locatingIcon}</div>
+    `,
+        onClick,
+    };
+    return useButtonControl(control);
+}

package/dist/esm/controls/refreshMapControls.d.ts

@@ -0,0 +1,3 @@
+import type { InitialPositionInfo } from '@/types';
+import type { Map } from '@mapcreator/maplibre-gl';
+export declare function useRefreshButton(map: Map, initialPosition: InitialPositionInfo): HTMLElement;

package/dist/esm/controls/refreshMapControls.js

@@ -0,0 +1,26 @@
+import refreshIcon from '@/images/refresh.svg?raw';
+import { useButtonControl } from '@/controls/controls';
+export function useRefreshButton(map, initialPosition) {
+    const onClick = () => {
+        const container = map.getContainer();
+        let zoomCorrection = 0;
+        // Adjust map's zoom level to preserve viewport regardless of map size
+        if (container.clientWidth > 0 && container.clientHeight > 0) {
+            const scale = Math.min(container.clientWidth / initialPosition.width, container.clientHeight / initialPosition.height);
+            zoomCorrection = Math.log(scale) / Math.LN2;
+        }
+        map.easeTo({
+            center: initialPosition.center,
+            zoom: initialPosition.zoom - initialPosition.detailLevel + zoomCorrection,
+            pitch: initialPosition.pitch,
+            bearing: initialPosition.rotation,
+        });
+    };
+    const control = {
+        type: 'button',
+        className: 'control-button refresh-button',
+        content: refreshIcon,
+        onClick,
+    };
+    return useButtonControl(control);
+}

package/dist/esm/controls/webControls.d.ts

@@ -0,0 +1,4 @@
+import type { JobObjectWebControls } from '@/types/jobObject';
+import type { InitialPositionInfo } from '@/types';
+import type { Map } from '@mapcreator/maplibre-gl';
+export declare function useWebControls(webControls: JobObjectWebControls, map: Map, initialPosition: InitialPositionInfo): HTMLElement;

package/dist/esm/controls/webControls.js

@@ -0,0 +1,40 @@
+import { isMobile } from '@/utils/browser';
+import { useZoomInButton, useZoomOutButton } from '@/controls/zoomControls';
+import { useFullScreenButton } from '@/controls/fullscreenControls';
+import { useGeolocationButton } from '@/controls/geolocationControls';
+import { useRefreshButton } from '@/controls/refreshMapControls';
+import { GeocoderControl } from '@/controls/geocoderControl';
+export function useWebControls(webControls, map, initialPosition) {
+    const controlContainer = document.createElement('div');
+    controlContainer.classList.add('web-control', 'adornment');
+    const expandedButtons = webControls.buttons.flatMap(btn => btn === 'zoom' ? ['zoomIn', 'zoomOut'] : btn);
+    const finalButtons = isMobile()
+        ? expandedButtons.filter(btn => btn !== 'zoomIn' && btn !== 'zoomOut')
+        : expandedButtons;
+    finalButtons.forEach(btn => {
+        let buttonElem;
+        if (btn === 'zoomIn') {
+            buttonElem = useZoomInButton(map);
+        }
+        else if (btn === 'zoomOut') {
+            buttonElem = useZoomOutButton(map);
+        }
+        else if (btn === 'fullscreen') {
+            buttonElem = useFullScreenButton(map);
+        }
+        else if (btn === 'geolocation') {
+            buttonElem = useGeolocationButton(map);
+        }
+        else if (btn === 'refresh') {
+            buttonElem = useRefreshButton(map, initialPosition);
+        }
+        else if (btn === 'search') {
+            buttonElem = new GeocoderControl(map).init();
+        }
+        else {
+            return;
+        }
+        controlContainer.appendChild(buttonElem);
+    });
+    return controlContainer;
+}

package/dist/{controls → esm/controls}/zoomControls.d.ts

@@ -1,3 +1,3 @@
-import { Map } from '@mapcreator/maplibre-gl';
+import type { Map } from '@mapcreator/maplibre-gl';
 export declare function useZoomInButton(map: Map): HTMLElement;
 export declare function useZoomOutButton(map: Map): HTMLElement;

package/dist/esm/controls/zoomControls.js

@@ -0,0 +1,23 @@
+import zoomInIcon from '@/images/plus.svg?raw';
+import zoomOutIcon from '@/images/minus.svg?raw';
+import { useButtonControl } from '@/controls/controls';
+export function useZoomInButton(map) {
+    const onClick = () => map.zoomIn();
+    const control = {
+        type: 'button',
+        className: 'control-button zoom-in-button',
+        content: zoomInIcon,
+        onClick,
+    };
+    return useButtonControl(control);
+}
+export function useZoomOutButton(map) {
+    const onClick = () => map.zoomOut();
+    const control = {
+        type: 'button',
+        className: 'control-button zoom-out-button',
+        content: zoomOutIcon,
+        onClick,
+    };
+    return useButtonControl(control);
+}

package/dist/esm/i18n.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/extensions */
+import da_DK from '@/locales/da_DK/strings.json';
+import de_DE from '@/locales/de_DE/strings.json';
+import en_GB from '@/locales/en_GB/strings.json';
+import es_ES from '@/locales/es_ES/strings.json';
+import fr_FR from '@/locales/fr_FR/strings.json';
+import it_IT from '@/locales/it_IT/strings.json';
+import nl_NL from '@/locales/nl_NL/strings.json';
+/* eslint-enable import/extensions */
+const locales = { da_DK, de_DE, en_GB, es_ES, fr_FR, it_IT, nl_NL };
+function selectBestLocale() {
+    const lang = navigator.language.replace('-', '_');
+    const availableLocales = Object.keys(locales);
+    return (availableLocales.find(x => x === lang) ??
+        availableLocales.find(x => x.split('_')[0] === lang.split('_')[0]) ??
+        'en_GB');
+}
+export const locale = selectBestLocale();
+export function t(key) {
+    return locales[locale][key] ?? key;
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+import '@mapcreator/maplibre-gl/dist/maplibre-gl.css';
+import '@/style.css';
+import { setRTLTextPlugin } from '@mapcreator/maplibre-gl';
+import { initMap, type MCMap } from '@/MCMap';
+export { setRTLTextPlugin, initMap, type MCMap };

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+import '@mapcreator/maplibre-gl/dist/maplibre-gl.css';
+import '@/style.css';
+import { setRTLTextPlugin } from '@mapcreator/maplibre-gl';
+import { initMap } from '@/MCMap';
+export { setRTLTextPlugin, initMap };

package/dist/esm/locales/da_DK/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Search",
+    "videoAlert": "The video will only work when you publish the map",
+    "mobileHelpText": "Use two fingers to move the map",
+    "windowsHelpText": "Use Ctrl + scroll to zoom the map",
+    "macHelpText": "Use ⌘ + scroll to zoom the map"
+}

package/dist/esm/locales/de_DE/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Suche",
+    "videoAlert": "Das Video ist in der veröffentlichten Karte sichtbar.",
+    "mobileHelpText": "Verwenden Sie zwei Finger um die Karte zu bewegen",
+    "windowsHelpText": "Verwenden Sie Strg + Scroll um in der Karte zu zoomen",
+    "macHelpText": "Verwenden Sie ⌘ + Scroll um in der Karte zu zoomen"
+}

package/dist/esm/locales/en_GB/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Search",
+    "videoAlert": "The video will only work when you publish the map",
+    "mobileHelpText": "Use two fingers to move the map",
+    "windowsHelpText": "Use Ctrl + scroll to zoom the map",
+    "macHelpText": "Use ⌘ + scroll to zoom the map"
+}

package/dist/esm/locales/es_ES/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Buscar",
+    "videoAlert": "The video will only work when you publish the map",
+    "mobileHelpText": "Use dos dedos para mover el mapa",
+    "windowsHelpText": "Use Ctrl + desplazamiento para hacer zoom en el mapa",
+    "macHelpText": "Use ⌘ + desplazamiento para hacer zoom en el mapa"
+}

package/dist/esm/locales/fr_FR/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Rechercher",
+    "videoAlert": "Votre vidéo sera diffusée sur la carte publiée",
+    "mobileHelpText": "Utilisez deux doigts pour déplacer la carte",
+    "windowsHelpText": "Utilisez Ctrl + défilement pour zoomer sur la carte",
+    "macHelpText": "Utilisez ⌘ + défilement pour zoomer sur la carte"
+}

package/dist/esm/locales/it_IT/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Cercare",
+    "videoAlert": "The video will only work when you publish the map",
+    "mobileHelpText": "Usa due dita per muovere la mappa",
+    "windowsHelpText": "Usa Ctrl + Scroll per ingrandire la mappa",
+    "macHelpText": "Usa ⌘ + Scroll per ingrandire la mappa"
+}

package/dist/esm/locales/nl_NL/strings.json

@@ -0,0 +1,7 @@
+{
+    "search": "Zoeken",
+    "videoAlert": "The video will only work when you publish the map",
+    "mobileHelpText": "Gebruik twee vingers om de kaart te bewegen",
+    "windowsHelpText": "Gebruik Ctrl + Scroll om de kaart te zoomen",
+    "macHelpText": "Gebruik ⌘ + Scroll om de kaart te zoomen"
+}

package/dist/esm/models/area.d.ts

@@ -0,0 +1,5 @@
+import { SvgCache } from '@/utils/svgHelpers';
+import type { JobObjectAreaGroup } from '@/types/jobObject';
+import type { Map as MapLibre } from '@mapcreator/maplibre-gl';
+import type { Svgs } from '@/types';
+export declare function addAreaGroup(map: MapLibre, group: JobObjectAreaGroup, beforeId: string, svgs: Svgs, svgCache: SvgCache, vectorUrl: string, accessToken: string): void;

package/dist/esm/models/area.js

@@ -0,0 +1,165 @@
+import { getAreaLayerId, getAreaSourceId } from '@/utils/models';
+import { getColorValue, SvgCache } from '@/utils/svgHelpers';
+import { getColorGenerator } from '@/utils/choropleth';
+export function addAreaGroup(map, group, beforeId, svgs, svgCache, vectorUrl, accessToken) {
+    const colorGenerator = getColorGenerator(group);
+    const sources = new Map();
+    const layers = new Map();
+    for (const area of group.models) {
+        // MC-2870 The registry ensures the featureId is not undefined
+        const featureId = area.featureId;
+        const groupId = group.id;
+        const featureIds = [];
+        const sourceId = getAreaSourceId(area);
+        const layerId = getAreaLayerId(groupId, area);
+        const data = layers.get(layerId) ?? {
+            model: area,
+            featureIds,
+            modelIdToFillColor: {},
+            modelIdToFillPattern: {},
+            modelIdToOutlineColor: {},
+            modelIdToOutlineWidth: {},
+        };
+        if (area.visible ?? true) {
+            data.featureIds.push(featureId);
+            const patternKey = area.fillPattern !== undefined
+                ? svgCache.getMapLibreImageKey(svgs[area.fillPattern], 2 * window.devicePixelRatio)
+                : null;
+            data.modelIdToFillColor[featureId] =
+                group.fillColor || area.fillColor
+                    ? getColorValue(area.dataBindings ?? {}, area.fillColor, group.fillColor, colorGenerator, group.choropleth?.unmatchedColor)
+                    : '#000000';
+            data.modelIdToFillPattern[featureId] = patternKey;
+            data.modelIdToOutlineColor[featureId] =
+                group.outlineColor || area.outlineColor
+                    ? getColorValue(area.dataBindings ?? {}, area.outlineColor, group.outlineColor)
+                    : '#000000';
+            data.modelIdToOutlineWidth[featureId] = area.outlineWidth ?? 0.5;
+        }
+        sources.set(sourceId, area);
+        layers.set(layerId, data);
+    }
+    for (const id of sources.keys()) {
+        if (map.getSource(id)) {
+            continue;
+        }
+        map.addSource(id, {
+            type: 'vector',
+            url: `${vectorUrl}${sources.get(id).vectorUrl}?access_token=${accessToken}`,
+        });
+    }
+    for (const id of layers.keys()) {
+        const { model } = layers.get(id);
+        const { sourceLayerId } = model;
+        const sourceId = getAreaSourceId(model);
+        map.addLayer({
+            id,
+            'type': 'fill',
+            'source': sourceId,
+            'source-layer': sourceLayerId,
+            'filter': ['literal', false],
+            'metadata': {
+                'mc-model-type': 'area',
+                'mc-model-id-prefix': model.vectorUrl,
+                'mc-group-id': group.id,
+            },
+            'paint': {
+                'fill-color': '#ffffff',
+                'fill-outline-color': '#000000',
+                'fill-antialias': false,
+            },
+        }, beforeId);
+        map.addLayer({
+            'id': `${id}-pattern`,
+            'type': 'fill',
+            'source': sourceId,
+            'source-layer': sourceLayerId,
+            'filter': ['literal', false],
+            'metadata': {
+                'mc-model-type': 'area',
+                'mc-model-id-prefix': model.vectorUrl,
+                'mc-group-id': group.id,
+            },
+            'paint': {
+                'fill-pattern': ['get', 'fill-pattern'],
+            },
+            'layout': {
+                visibility: 'visible',
+            },
+        }, beforeId);
+        map.addLayer({
+            'id': `${id}-outline`,
+            'type': 'line',
+            'source': sourceId,
+            'source-layer': sourceLayerId,
+            'filter': ['literal', false],
+            'metadata': {
+                'mc-model-type': 'area',
+                'mc-model-id-prefix': model.vectorUrl,
+                'mc-group-id': group.id,
+            },
+            'paint': {
+                'line-color': '#000000',
+                'line-width': 0.5,
+            },
+        }, beforeId);
+    }
+    layers.forEach((data, layerId) => {
+        const { featureIds, modelIdToFillColor, modelIdToFillPattern, modelIdToOutlineColor, modelIdToOutlineWidth, } = data;
+        map.setFilter(layerId, ['in', 'id', ...featureIds]);
+        map.setFilter(`${layerId}-outline`, ['in', 'id', ...featureIds]);
+        map.setPaintProperty(layerId, 'fill-color', [
+            'get',
+            [
+                'case',
+                ['==', ['typeof', ['get', 'id']], 'number'],
+                ['to-string', ['get', 'id']],
+                ['get', 'id'],
+            ],
+            ['literal', modelIdToFillColor],
+        ]);
+        map.setPaintProperty(`${layerId}-outline`, 'line-color', [
+            'get',
+            [
+                'case',
+                ['==', ['typeof', ['get', 'id']], 'number'],
+                ['to-string', ['get', 'id']],
+                ['get', 'id'],
+            ],
+            ['literal', modelIdToOutlineColor],
+        ]);
+        map.setPaintProperty(`${layerId}-outline`, 'line-width', [
+            'get',
+            [
+                'case',
+                ['==', ['typeof', ['get', 'id']], 'number'],
+                ['to-string', ['get', 'id']],
+                ['get', 'id'],
+            ],
+            ['literal', modelIdToOutlineWidth],
+        ]);
+        map.setFilter(`${layerId}-pattern`, [
+            'to-boolean',
+            [
+                'get',
+                [
+                    'case',
+                    ['==', ['typeof', ['get', 'id']], 'number'],
+                    ['to-string', ['get', 'id']],
+                    ['get', 'id'],
+                ],
+                ['literal', modelIdToFillPattern],
+            ],
+        ]);
+        map.setPaintProperty(`${layerId}-pattern`, 'fill-pattern', [
+            'get',
+            [
+                'case',
+                ['==', ['typeof', ['get', 'id']], 'number'],
+                ['to-string', ['get', 'id']],
+                ['get', 'id'],
+            ],
+            ['literal', modelIdToFillPattern],
+        ]);
+    });
+}

package/dist/esm/models/circle.d.ts

@@ -0,0 +1,5 @@
+import { SvgCache } from '@/utils/svgHelpers';
+import type { JobObjectCircleGroup } from '@/types/jobObject';
+import type { Svgs } from '@/types';
+import type { Map } from '@mapcreator/maplibre-gl';
+export declare function addCircleGroup(map: Map, group: JobObjectCircleGroup, beforeId: string, svgs: Svgs, svgCache: SvgCache): void;