@mapcreator/sdk 0.0.7 → 0.0.9

package/dist/esm/utils/language.js

@@ -0,0 +1,170 @@
+export function setLanguage(language, map) {
+    for (const layer of map.getStyle().layers) {
+        if (layer.type !== 'symbol' || layer.id.startsWith('custom-') || layer.id.startsWith('gl-')) {
+            continue;
+        }
+        const textField = layer.layout && layer.layout['text-field'];
+        if (layer['source-layer'] &&
+            Array.isArray(textField) &&
+            textField[0] === 'coalesce' &&
+            !textField.find(item => Array.isArray(item) && item[1] === 'name:abbr')) {
+            map.setLayoutProperty(layer.id, 'text-field', textFieldExpression(layer.source, language), {
+                validate: false,
+            });
+        }
+    }
+}
+function textFieldExpression(source, language) {
+    if (language !== 'en' && language !== 'native') {
+        language = transformLanguageCode(language, LanguageNotation.TWO);
+    }
+    if (language === 'native') {
+        return ['get', 'name'];
+    }
+    if (source.startsWith('mc-base')) {
+        return [
+            'coalesce',
+            ['get', `name:${language}`],
+            ['case', ['has', 'name_is_latin'], ['get', 'name'], ['get', 'name:en']],
+        ];
+    }
+    return ['coalesce', ['get', `name:${language}`], ['get', 'name:en'], ['get', 'name']];
+}
+export const LanguageNotation = Object.freeze({
+    THREE: 'ISO 639-2/B',
+    API: 'ISO 639-2/B',
+    TWO: 'ISO 639-1',
+    MAPLIBRE_COMPAT: 'ISO 639-1',
+    ENDONYM: 'name', // Endonym is the native name of a language
+    NAME: 'name', // We should add the ISO language names using this field
+    LOCALE: 'locale',
+    i18n: 'locale',
+});
+// The first language *must* be english because we use this as a fallback
+export const LanguageCodes = Object.freeze([
+    {
+        [LanguageNotation.TWO]: 'en',
+        [LanguageNotation.THREE]: 'eng',
+        [LanguageNotation.ENDONYM]: 'English',
+        [LanguageNotation.LOCALE]: 'en_GB',
+    },
+    {
+        [LanguageNotation.TWO]: 'da',
+        [LanguageNotation.THREE]: 'dan',
+        [LanguageNotation.ENDONYM]: 'Dansk',
+        [LanguageNotation.LOCALE]: 'da_DK',
+    },
+    {
+        [LanguageNotation.TWO]: 'nl',
+        [LanguageNotation.THREE]: 'dut',
+        [LanguageNotation.ENDONYM]: 'Nederlands',
+        [LanguageNotation.LOCALE]: 'nl_NL',
+    },
+    {
+        [LanguageNotation.TWO]: 'fi',
+        [LanguageNotation.THREE]: 'fin',
+        [LanguageNotation.ENDONYM]: 'Suomi',
+        [LanguageNotation.LOCALE]: 'fi_FI',
+    },
+    {
+        [LanguageNotation.TWO]: 'fr',
+        [LanguageNotation.THREE]: 'fre',
+        [LanguageNotation.ENDONYM]: 'Francais',
+        [LanguageNotation.LOCALE]: 'fr_FR',
+    },
+    {
+        [LanguageNotation.TWO]: 'de',
+        [LanguageNotation.THREE]: 'ger',
+        [LanguageNotation.ENDONYM]: 'Deutsch',
+        [LanguageNotation.LOCALE]: 'de_DE',
+    },
+    {
+        [LanguageNotation.TWO]: 'it',
+        [LanguageNotation.THREE]: 'ita',
+        [LanguageNotation.ENDONYM]: 'Italiano',
+        [LanguageNotation.LOCALE]: 'it_IT',
+    },
+    {
+        [LanguageNotation.TWO]: 'no',
+        [LanguageNotation.THREE]: 'nor',
+        [LanguageNotation.ENDONYM]: 'Norsk',
+        [LanguageNotation.LOCALE]: 'nn_NO',
+    },
+    {
+        [LanguageNotation.TWO]: 'pl',
+        [LanguageNotation.THREE]: 'pol',
+        [LanguageNotation.ENDONYM]: 'Polski',
+        [LanguageNotation.LOCALE]: 'pl_PL',
+    },
+    {
+        [LanguageNotation.TWO]: 'pt',
+        [LanguageNotation.THREE]: 'por',
+        [LanguageNotation.ENDONYM]: 'Portugues',
+        [LanguageNotation.LOCALE]: 'pt_PT',
+    },
+    {
+        [LanguageNotation.TWO]: 'es',
+        [LanguageNotation.THREE]: 'spa',
+        [LanguageNotation.ENDONYM]: 'Espanol',
+        [LanguageNotation.LOCALE]: 'es_ES',
+    },
+    {
+        [LanguageNotation.TWO]: 'sv',
+        [LanguageNotation.THREE]: 'swe',
+        [LanguageNotation.ENDONYM]: 'Svenska',
+        [LanguageNotation.LOCALE]: 'sv_SE',
+    },
+    {
+        [LanguageNotation.TWO]: 'ja',
+        [LanguageNotation.THREE]: 'jpn',
+        [LanguageNotation.ENDONYM]: '日本語',
+        [LanguageNotation.LOCALE]: 'ja_JP',
+    },
+    {
+        [LanguageNotation.TWO]: 'zh',
+        [LanguageNotation.THREE]: 'chi',
+        [LanguageNotation.ENDONYM]: '汉语',
+        [LanguageNotation.LOCALE]: 'zh_CN',
+    },
+    {
+        [LanguageNotation.TWO]: 'ru',
+        [LanguageNotation.THREE]: 'rus',
+        [LanguageNotation.ENDONYM]: 'Русский',
+        [LanguageNotation.LOCALE]: 'ru_RU',
+    },
+    {
+        [LanguageNotation.TWO]: 'uk',
+        [LanguageNotation.THREE]: 'ukr',
+        [LanguageNotation.ENDONYM]: 'Украї́нська',
+        [LanguageNotation.LOCALE]: 'uk_UK',
+    },
+    {
+        [LanguageNotation.TWO]: 'lv',
+        [LanguageNotation.THREE]: 'lav',
+        [LanguageNotation.ENDONYM]: 'Latviešu valoda',
+        [LanguageNotation.LOCALE]: 'lv-LV',
+    },
+    {
+        [LanguageNotation.TWO]: 'kk',
+        [LanguageNotation.THREE]: 'kaz',
+        [LanguageNotation.ENDONYM]: 'қазақша',
+        [LanguageNotation.LOCALE]: 'kk-KZ',
+    },
+    {
+        [LanguageNotation.TWO]: 'ar',
+        [LanguageNotation.THREE]: 'ara',
+        [LanguageNotation.ENDONYM]: 'العربية',
+        [LanguageNotation.LOCALE]: 'ar_SA',
+    },
+    {
+        [LanguageNotation.TWO]: 'native',
+        [LanguageNotation.THREE]: 'native',
+        [LanguageNotation.ENDONYM]: 'Native',
+        [LanguageNotation.LOCALE]: 'native',
+    },
+]);
+export function transformLanguageCode(input, type = LanguageNotation.MAPLIBRE_COMPAT) {
+    const language = LanguageCodes.find(lang => Object.values(lang).some(value => value === input)) ??
+        LanguageCodes[0];
+    return language[type];
+}

package/dist/{utils → esm/utils}/models.d.ts

@@ -1,7 +1,7 @@
-import { LngLat, Position } from '../types/geometry';
-import { JobObjectPolygon } from '../types/jobObject';
-import { ModelBindings } from '../types';
-import { Map } from '@mapcreator/maplibre-gl';
+import type { LngLat, Position } from '@/types/geometry';
+import type { JobObjectPolygon } from '@/types/jobObject';
+import type { ModelBindings } from '@/types';
+import type { Map } from '@mapcreator/maplibre-gl';
 export declare function calculateCircle(center: LngLat, radius: number): Array<[number, number]>;
 export declare function calculateRadiusLine(center: LngLat, radius: number, bearing: number): Position[];
 export declare function calculatePolygonGeometry(polygon: JobObjectPolygon): Position[][];

package/dist/esm/utils/models.js

@@ -0,0 +1,103 @@
+import { degToRad, radToDeg, calcDistance, numberRe, fnv32b } from '@/utils/helpers';
+import { lineString, polygon as makePolygon } from '@turf/helpers';
+import { polygonSmooth } from '@turf/polygon-smooth';
+import bboxClip from '@turf/bbox-clip';
+export function calculateCircle(center, radius) {
+    const circle = [];
+    const steps = 100;
+    const interval = (Math.PI * 2) / steps;
+    for (let i = 0; i < steps; i++) {
+        circle.push(calculateCirclePoint(center, radius, i * interval));
+    }
+    if (containsNorthPole(center, radius)) {
+        const first = circle[0];
+        const last = circle[circle.length - 1];
+        const lng = (last[0] + first[0] - 360) / 2;
+        const lat = (first[1] + last[1]) / 2;
+        circle.push([lng, lat]);
+        circle.push([lng, 90]);
+        circle.push([lng + 360, 90]);
+        circle.push([lng + 360, lat]);
+    }
+    if (containsSouthPole(center, radius)) {
+        const first = circle[49];
+        const last = circle[50];
+        const lng = (last[0] + first[0] - 360) / 2;
+        const lat = (first[1] + last[1]) / 2;
+        circle.splice(50, 0, [lng + 360, lat], [lng + 360, -90], [lng, -90], [lng, lat]);
+    }
+    circle.push(circle[0]);
+    return circle;
+}
+export function calculateRadiusLine(center, radius, bearing) {
+    const points = [];
+    const steps = 100;
+    const interval = radius / steps;
+    for (let i = 0; i <= steps; i++) {
+        points.push(calculateCirclePoint(center, i * interval, degToRad(bearing)));
+    }
+    const bbox = [-Infinity, -85.051129, Infinity, 85.051129];
+    return bboxClip(lineString(points), bbox).geometry.coordinates;
+}
+function calculateCirclePoint(center, radius, bearing) {
+    const earthRadius = 6378.1;
+    const radiusRatio = radius / earthRadius;
+    const lngCenter = degToRad(center.lng);
+    const latCenter = degToRad(center.lat);
+    const lat = Math.asin(Math.sin(latCenter) * Math.cos(radiusRatio) +
+        Math.cos(latCenter) * Math.sin(radiusRatio) * Math.cos(bearing));
+    const lng = lngCenter +
+        Math.atan2(Math.sin(bearing) * Math.sin(radiusRatio) * Math.cos(latCenter), Math.cos(radiusRatio) - Math.sin(latCenter) * Math.sin(lat));
+    return [radToDeg(lng), radToDeg(lat)];
+}
+function containsNorthPole(center, radius) {
+    return calcDistance(center, { lng: 0, lat: 90 }) / 1000 < radius;
+}
+function containsSouthPole(center, radius) {
+    return calcDistance(center, { lng: 0, lat: -90 }) / 1000 < radius;
+}
+export function calculatePolygonGeometry(polygon) {
+    const { polygonType } = polygon;
+    const anchorPoints = typeof polygon.anchorPoints?.[0]?.[0] === 'number'
+        ? [polygon.anchorPoints]
+        : polygon.anchorPoints;
+    if (polygonType === 'smooth') {
+        return (polygonSmooth(makePolygon(anchorPoints), { iterations: 4 }).features?.[0]?.geometry
+            ?.coordinates ?? anchorPoints.slice());
+    }
+    return anchorPoints.slice();
+}
+export function getAreaLayerId(groupId, area) {
+    const key = fnv32b(`${area.vectorUrl}/${area.sourceLayerId}`);
+    return `${groupId}-${key}`;
+}
+export function getAreaSourceId(area) {
+    return `custom-area-${fnv32b(area.vectorUrl)}`;
+}
+export function getBoundValues(modelBindings, dataColumn) {
+    return modelBindings.reduce((result, bindings) => {
+        const value = bindings.dataBindings?.[dataColumn];
+        if (typeof value === 'object' && value !== null && value.t === 'n') {
+            result.push(value.v);
+        }
+        else if (typeof value === 'number') {
+            result.push(value);
+        }
+        else if (typeof value === 'string' && value) {
+            result.push(numberRe.test(value) ? Number(value) : value);
+        }
+        return result;
+    }, []);
+}
+export function getLineAngle(line, map) {
+    const n = line.length;
+    if (n < 2) {
+        return 0;
+    }
+    const endPoint = map.projectWithScaleCorrection(line[n - 1]);
+    const penultimatePoint = map.projectWithScaleCorrection(line[n - 2]);
+    const dx = endPoint.x - penultimatePoint.x;
+    const dy = penultimatePoint.y - endPoint.y;
+    const thetaDeg = Math.atan2(dy, dx) * (180 / Math.PI);
+    return (90 - thetaDeg + 360) % 360;
+}

package/dist/{utils → esm/utils}/overlays.d.ts

@@ -1,4 +1,4 @@
-import { Map, LayerSpecification } from '@mapcreator/maplibre-gl';
+import type { Map, LayerSpecification } from '@mapcreator/maplibre-gl';
 export declare function loadOverlays(overlays: string[], map: Map, vapiUrl: string, accessToken: string, styleOverrides?: {
     [layerId: string]: Partial<LayerSpecification>;
 }): Promise<void>;

package/dist/esm/utils/overlays.js

@@ -0,0 +1,87 @@
+export async function loadOverlays(overlays, map, vapiUrl, accessToken, styleOverrides) {
+    const urls = overlays.map(overlay => `${vapiUrl}/styles/${overlay}.json?access_token=${accessToken}`);
+    const promises = urls.map(url => fetch(url).then(result => result.json()));
+    const data = await Promise.all(promises);
+    await Promise.all(data.map(item => addOverlay(item, map, accessToken, styleOverrides)));
+}
+async function addOverlay(data, map, accessToken, styleOverrides) {
+    for (const sourceId in data.sources) {
+        if (map.getSource(sourceId) === undefined) {
+            map.addSource(sourceId, data.sources[sourceId]);
+        }
+    }
+    if (data.sprite !== undefined) {
+        await loadSprite(map, data.sprite, accessToken);
+    }
+    for (const layer of data.layers) {
+        if (map.getLayer(layer.id) !== undefined) {
+            map.removeLayer(layer.id);
+        }
+        const addBefore = layer.metadata?.['mc-add-before'] ?? 'mc-before-none';
+        map.addLayer(applyOverrides(layer, styleOverrides), addBefore);
+    }
+}
+function applyOverrides(layer, styleOverrides) {
+    const overrides = styleOverrides ?? {};
+    const override = overrides[layer.id] ?? {};
+    const result = {
+        ...layer,
+        layout: { ...layer.layout, ...override.layout },
+        paint: { ...layer.paint, ...override.paint },
+        metadata: {
+            ...layer.metadata,
+            ...override.metadata,
+        },
+    };
+    if (override.minzoom !== undefined) {
+        result.minzoom = override.minzoom;
+    }
+    if (override.maxzoom !== undefined) {
+        result.maxzoom = override.maxzoom;
+    }
+    if ('filter' in override && result.type !== 'background') {
+        result.filter = override.filter;
+    }
+    return result;
+}
+async function loadSprite(map, spriteUrl, accessToken) {
+    try {
+        const spriteJsonUrl = `${spriteUrl}.json?access_token=${accessToken}`;
+        const spriteImageUrl = `${spriteUrl}.png?access_token=${accessToken}`;
+        const [spriteJsonResponse, spriteImageResponse] = await Promise.all([
+            fetch(spriteJsonUrl),
+            fetch(spriteImageUrl),
+        ]);
+        if (!spriteJsonResponse.ok || !spriteImageResponse.ok) {
+            throw new Error(`Failed to load sprite from ${spriteUrl}`);
+        }
+        const spriteJson = await spriteJsonResponse.json();
+        const spriteImageBlob = await spriteImageResponse.blob();
+        const spriteImage = await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = err => reject(err);
+            img.src = URL.createObjectURL(spriteImageBlob);
+        });
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        if (!context) {
+            throw new Error('Failed to get canvas context');
+        }
+        for (const [name, sprite] of Object.entries(spriteJson)) {
+            if (map.hasImage(name)) {
+                continue;
+            }
+            const { x, y, width, height, pixelRatio } = sprite;
+            canvas.width = width * pixelRatio;
+            canvas.height = height * pixelRatio;
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            context.drawImage(spriteImage, x, y, width, height, 0, 0, canvas.width, canvas.height);
+            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+            map.addImage(name, imageData, { pixelRatio });
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+}

package/dist/esm/utils/scalebar.js

@@ -0,0 +1,52 @@
+const significantNumbers = [10, 5, 3, 2, 1];
+export function floatToFraction(x, error = 0.000001) {
+    const n = Math.floor(x);
+    x -= n;
+    if (x < error) {
+        return [n, 1];
+    }
+    else if (1 - error < x) {
+        return [n + 1, 1];
+    }
+    // The lower fraction is 0/1
+    let lowerN = 0;
+    let lowerD = 1;
+    // The upper fraction is 1/1
+    let upperN = 1;
+    let upperD = 1;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        // The middle fraction is (lowerN upperN) / (lower_d + upperD)
+        const middleN = lowerN + upperN;
+        const middleD = lowerD + upperD;
+        // If x + error < middle
+        if (middleD * (x + error) < middleN) {
+            // Middle is the new upper
+            upperN = middleN;
+            upperD = middleD;
+        }
+        else if (middleN < (x - error) * middleD) {
+            // Middle is the new lower
+            lowerN = middleN;
+            lowerD = middleD;
+        }
+        else {
+            // Middle is best fraction
+            return [n * middleD + middleN, middleD];
+        }
+    }
+}
+export function getRoundNum(num) {
+    const pow10 = 10 ** Math.floor(Math.log10(num));
+    const d = num / pow10;
+    for (const n of significantNumbers) {
+        if (d >= n) {
+            return n * pow10;
+        }
+    }
+    return getDecimalRoundNum(d) * pow10;
+}
+function getDecimalRoundNum(d) {
+    const multiplier = 10 ** Math.ceil(-Math.log(d) / Math.LN10);
+    return Math.round(d * multiplier) / multiplier;
+}

package/dist/{utils → esm/utils}/svgHelpers.d.ts

@@ -1,6 +1,7 @@
-import { JobObjectDataBindings } from '../types/jobObject';
-import { Map as MapLibre } from '@mapcreator/maplibre-gl';
-import { ColorGenerator } from './choropleth';
+import 'path-data-polyfill';
+import type { JobObjectDataBindings } from '@/types/jobObject';
+import type { Map as MapLibre } from '@mapcreator/maplibre-gl';
+import type { ColorGenerator } from '@/utils/choropleth';
 export declare function escapeXML(str: string): string;
 export declare function loadFonts(fontNames: string[], vapiUrl: string, accessToken: string): Promise<void>;
 export interface SvgColor {