@mapcreator/sdk 0.0.7 → 0.0.9

package/dist/esm/models/circle.js

@@ -0,0 +1,110 @@
+import { calculateCircle, calculateRadiusLine } from '@/utils/models';
+import { getColorValue, SvgCache } from '@/utils/svgHelpers';
+import { stringToId } from '@/utils/helpers';
+export function addCircleGroup(map, group, beforeId, svgs, svgCache) {
+    map.addSource(group.id, {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features: group.models
+                .filter(model => model.visible ?? true)
+                .map(model => buildFeature(group, model, svgs, svgCache)),
+        },
+    });
+    map.addLayer({
+        id: group.id,
+        type: 'fill',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'circle',
+            'mc-group-id': group.id,
+        },
+        filter: ['==', ['geometry-type'], 'Polygon'],
+        paint: {
+            'fill-color': ['get', 'fill-color'],
+        },
+    }, beforeId);
+    map.addLayer({
+        id: `${group.id}-pattern`,
+        type: 'fill',
+        source: group.id,
+        filter: ['has', 'fill-pattern'],
+        paint: {
+            'fill-pattern': ['get', 'fill-pattern'],
+        },
+        metadata: {
+            'mc-model-type': 'circle',
+            'mc-group-id': group.id,
+        },
+    }, beforeId);
+    map.addLayer({
+        id: `${group.id}-radius-line`,
+        type: 'line',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'circle',
+            'mc-group-id': group.id,
+        },
+        filter: ['all', ['==', ['geometry-type'], 'LineString'], ['get', 'radius-line-enabled']],
+        paint: {
+            'line-color': ['get', 'radius-line-color'],
+            'line-width': ['get', 'radius-line-width'],
+        },
+    }, beforeId);
+    map.addLayer({
+        id: `${group.id}-outline`,
+        type: 'line',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'circle',
+            'mc-group-id': group.id,
+        },
+        filter: ['==', ['geometry-type'], 'Polygon'],
+        layout: {
+            'line-cap': 'round',
+            'line-join': 'round',
+        },
+        paint: {
+            'line-width': ['get', 'outline-width'],
+            'line-color': ['get', 'outline-color'],
+        },
+    }, beforeId);
+}
+function buildFeature(group, circle, svgs, svgCache) {
+    const patternKey = circle.fillPattern !== undefined
+        ? svgCache.getMapLibreImageKey(svgs[circle.fillPattern], 2 * window.devicePixelRatio)
+        : undefined;
+    return {
+        type: 'Feature',
+        id: stringToId(circle.id),
+        properties: {
+            'id': circle.id,
+            'fill-color': group.fillColor || circle.fillColor
+                ? getColorValue(circle.dataBindings ?? {}, circle.fillColor, group.fillColor)
+                : '#000000',
+            'outline-color': group.outlineColor || circle.outlineColor
+                ? getColorValue(circle.dataBindings ?? {}, circle.outlineColor, group.outlineColor)
+                : '#000000',
+            'outline-width': circle.outlineWidth ?? 0,
+            'fill-pattern': patternKey,
+            'radius-line-enabled': circle.radiusLineEnabled ?? false,
+            'radius-line-color': group.radiusLineColor || circle.radiusLineColor
+                ? getColorValue(circle.dataBindings ?? {}, circle.radiusLineColor, group.radiusLineColor)
+                : '#000000',
+            'radius-line-width': circle.radiusLineWidth ?? 0,
+        },
+        geometry: {
+            type: 'GeometryCollection',
+            geometries: [
+                {
+                    type: 'Polygon',
+                    coordinates: [calculateCircle(circle.center, circle.radius)],
+                },
+                {
+                    type: 'LineString',
+                    coordinates: calculateRadiusLine(circle.center, circle.radius, circle.radiusLineBearing ?? 0),
+                },
+            ],
+        },
+    };
+}

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

@@ -0,0 +1,3 @@
+import type { JobObjectDotGroup } from '@/types/jobObject';
+import type { Map } from '@mapcreator/maplibre-gl';
+export declare function addDotGroup(map: Map, group: JobObjectDotGroup, beforeId: string): void;

package/dist/esm/models/dot.js

@@ -0,0 +1,42 @@
+import { getColorValue } from '@/utils/svgHelpers';
+export function addDotGroup(map, group, beforeId) {
+    map.addSource(group.id, {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features: group.models
+                .filter(model => model.visible ?? true)
+                .map(model => buildFeature(group, model)),
+        },
+    });
+    map.addLayer({
+        id: group.id,
+        type: 'circle',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'dot',
+            'mc-group-id': group.id,
+        },
+        paint: {
+            'circle-color': ['get', 'circle-color'],
+            'circle-radius': ['get', 'circle-radius'],
+        },
+    }, beforeId);
+}
+function buildFeature(group, dot) {
+    return {
+        type: 'Feature',
+        id: dot.id,
+        properties: {
+            'id': dot.id,
+            'circle-radius': dot.radius,
+            'circle-color': group.fillColor || dot.fillColor
+                ? getColorValue(dot.dataBindings ?? {}, dot.fillColor, group.fillColor)
+                : '#000000',
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: [dot.center.lng, dot.center.lat],
+        },
+    };
+}

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

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

package/dist/esm/models/line.js

@@ -0,0 +1,117 @@
+import { getColorValue, getSvgValue, SvgCache } from '@/utils/svgHelpers';
+import { getLineAngle } from '@/utils/models';
+import { stringToId } from '@/utils/helpers';
+const lineDashValues = {
+    solid: [1, 0],
+    dotted: [0.7, 0.3],
+    dashed: [3.5, 1.5],
+};
+export function addLineGroup(map, group, beforeId, svgCache) {
+    map.addSource(group.id, {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features: group.models
+                .filter(model => model.visible ?? true)
+                .map(model => buildFeature(map, group, model, svgCache)),
+        },
+    });
+    Object.entries(lineDashValues).forEach(([lineStyle, dashArray]) => {
+        if (group.models.some(line => (line.lineStyle ?? 'solid') === lineStyle)) {
+            map.addLayer({
+                id: `${group.id}-${lineStyle}`,
+                type: 'line',
+                source: group.id,
+                metadata: {
+                    'mc-model-type': 'line',
+                    'mc-group-id': group.id,
+                },
+                filter: [
+                    'all',
+                    ['==', ['geometry-type'], 'LineString'],
+                    ['==', ['get', 'line-style'], lineStyle],
+                ],
+                paint: {
+                    'line-width': ['get', 'line-width'],
+                    'line-color': ['get', 'line-color'],
+                    'line-dasharray': dashArray,
+                },
+            }, beforeId);
+        }
+    });
+    map.addLayer({
+        id: `${group.id}-clickable`,
+        type: 'line',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'line',
+            'mc-group-id': group.id,
+        },
+        paint: {
+            'line-width': ['max', ['get', 'line-width'], 15],
+            'line-opacity': 0,
+        },
+        filter: ['==', ['geometry-type'], 'LineString'],
+    }, beforeId);
+    if (group.models.some(line => line.svg)) {
+        map.addLayer({
+            id: `${group.id}-icon`,
+            type: 'symbol',
+            source: group.id,
+            metadata: {
+                'mc-model-type': 'line',
+                'mc-group-id': group.id,
+            },
+            layout: {
+                'icon-allow-overlap': true,
+                'icon-ignore-placement': true,
+                'icon-image': ['get', 'mc-image-key'],
+                'icon-anchor': 'center',
+                'icon-size': ['get', 'icon-size'],
+                'icon-rotate': ['get', 'icon-rotate'],
+                'icon-offset': ['get', 'icon-offset'],
+            },
+            filter: ['==', ['geometry-type'], 'Point'],
+        }, beforeId);
+    }
+}
+function buildFeature(map, group, line, svgCache) {
+    const maplibreImageKey = line.svg !== undefined
+        ? svgCache.getMapLibreImageKey(getSvgValue(line.dataBindings ?? {}, line.svg, undefined), window.devicePixelRatio * (line.iconScale ?? 1))
+        : undefined;
+    return {
+        type: 'Feature',
+        id: stringToId(line.id),
+        properties: {
+            'id': line.id,
+            'line-width': line.lineWidth ?? 3,
+            'line-color': group.lineColor || line.lineColor
+                ? getColorValue(line.dataBindings ?? {}, line.lineColor, group.lineColor)
+                : '#000000',
+            'line-style': line.lineStyle ?? 'solid',
+            'mc-image-key': maplibreImageKey,
+            'icon-rotate': getIconRotation(line, map),
+            'icon-offset': line.iconOffset,
+            'icon-size': line.iconScale,
+        },
+        geometry: {
+            type: 'GeometryCollection',
+            geometries: [
+                {
+                    type: 'LineString',
+                    coordinates: line.geometry,
+                },
+                {
+                    type: 'Point',
+                    coordinates: line.geometry[line.geometry.length - 1],
+                },
+            ],
+        },
+    };
+}
+function getIconRotation(line, map) {
+    if (!line.iconRotation) {
+        return 0;
+    }
+    return line.iconAlign ? getLineAngle(line.geometry, map) + line.iconRotation : line.iconRotation;
+}

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

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

package/dist/esm/models/marker.js

@@ -0,0 +1,179 @@
+import { getColorValue, getSvgValue, getTextValue, SvgCache } from '@/utils/svgHelpers';
+import { stringToId } from '@/utils/helpers';
+const defaultFont = 'Roboto-Regular';
+export function addMarkerGroup(map, group, beforeId, svgs, svgCache) {
+    const features = [];
+    const fontSet = new Set();
+    const lineHeights = new Set();
+    const textFontExpression = ['match', ['get', 'text-font']];
+    const cluster = Boolean(group.clustering);
+    for (const marker of group.models) {
+        if (marker.visible ?? true) {
+            features.push(buildFeature(group, marker, svgs, svgCache));
+        }
+        fontSet.add(marker.textFont);
+        lineHeights.add(marker.textLineHeight ?? 1.2);
+    }
+    const fonts = Array.from(fontSet);
+    if (fonts.length > 0) {
+        for (const font of Array.from(fontSet)) {
+            textFontExpression.push(font, ['literal', [font, defaultFont]]);
+        }
+        textFontExpression.push(['literal', [defaultFont]]);
+    }
+    map.addSource(group.id, {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features,
+        },
+        cluster,
+        clusterRadius: group.clusterRadius ?? 50,
+        clusterMaxZoom: group.clusterMaxZoom ?? 14,
+    });
+    lineHeights.forEach(lineHeight => {
+        map.addLayer({
+            id: `${group.id}-${lineHeight}`,
+            type: 'symbol',
+            source: group.id,
+            metadata: {
+                'mc-model-type': 'marker',
+                'mc-group-id': group.id,
+            },
+            layout: {
+                'icon-allow-overlap': !group.collisionDetection,
+                'icon-ignore-placement': !group.collisionDetection,
+                'text-allow-overlap': !group.collisionDetection,
+                'text-ignore-placement': !group.collisionDetection,
+                'icon-image': ['get', 'mc-image-key'],
+                'icon-anchor': ['get', 'icon-anchor'],
+                'icon-size': ['get', 'icon-size'],
+                'icon-rotate': ['get', 'icon-rotate'],
+                'icon-offset': ['get', 'icon-offset'],
+                'text-field': '{text}',
+                'text-font': textFontExpression,
+                'text-max-width': ['get', 'text-max-width'],
+                'text-offset': ['get', 'text-offset'],
+                'text-rotate': ['get', 'text-rotate'],
+                'text-size': ['get', 'text-size'],
+                'text-anchor': ['get', 'text-anchor'],
+                'text-letter-spacing': ['get', 'text-letter-spacing'],
+                'text-line-height': lineHeight,
+                'text-justify': ['get', 'text-justify'],
+            },
+            paint: {
+                'text-color': ['get', 'text-color'],
+                'text-halo-color': ['get', 'text-halo-color'],
+                'text-halo-width': ['get', 'text-halo-width'],
+            },
+            filter: [
+                'all',
+                ['==', ['get', 'text-line-height'], lineHeight],
+                ['!', ['has', 'point_count']],
+            ],
+        }, beforeId);
+    });
+    if (cluster) {
+        map.addLayer({
+            id: `${group.id}-circle-cluster`,
+            type: 'circle',
+            source: group.id,
+            filter: ['has', 'point_count'],
+            paint: {
+                'circle-color': {
+                    property: 'point_count',
+                    type: 'interval',
+                    stops: group.clusterCircleColor ?? [],
+                },
+                'circle-radius': {
+                    property: 'point_count',
+                    type: 'interval',
+                    stops: group.clusterCircleRadius ?? [],
+                },
+            },
+        });
+        map.addLayer({
+            id: `${group.id}-text-cluster`,
+            type: 'symbol',
+            source: group.id,
+            filter: ['has', 'point_count'],
+            paint: {
+                'text-color': {
+                    property: 'point_count',
+                    type: 'interval',
+                    stops: group.clusterTextColor ?? [],
+                },
+            },
+            layout: {
+                'text-font': ['literal', [defaultFont]],
+                'text-field': '{point_count_abbreviated}',
+                'text-size': {
+                    property: 'point_count',
+                    type: 'interval',
+                    stops: group.clusterTextSize ?? [],
+                },
+            },
+        });
+        addClusterClick(map, group);
+    }
+}
+function addClusterClick(map, group) {
+    map.on('click', `${group.id}-circle-cluster`, async (e) => {
+        const cluster = map.queryRenderedFeatures(e.point).find(feature => feature.properties.cluster);
+        if (!cluster) {
+            return;
+        }
+        const source = map.getSource(cluster.source);
+        if (!source) {
+            return;
+        }
+        const zoom = await source.getClusterExpansionZoom(Number(cluster.id));
+        map.easeTo({
+            center: cluster.geometry.coordinates,
+            zoom,
+        });
+    });
+}
+function buildFeature(group, marker, svgs, svgCache) {
+    const maplibreImageKey = marker.svg !== undefined
+        ? svgCache.getMapLibreImageKey(getSvgValue(marker.dataBindings ?? {}, svgs[marker.svg], group.svg ? svgs[group.svg] : undefined), window.devicePixelRatio * (marker.iconScale ?? 1))
+        : undefined;
+    return {
+        type: 'Feature',
+        id: stringToId(marker.id),
+        properties: {
+            'id': marker.id,
+            'mc-image-key': maplibreImageKey,
+            'icon-anchor': marker.iconAnchor ?? 'center',
+            'icon-rotate': marker.iconRotation ?? 0,
+            'icon-offset': marker.iconOffset ?? [0, 0],
+            'icon-size': marker.iconScale ?? 1,
+            'text': group.text || marker.text
+                ? getTextValue(marker.dataBindings ?? {}, marker.text, group.text)
+                : undefined,
+            'text-anchor': marker.textAnchor ?? 'center',
+            'text-font': marker.textFont,
+            'text-offset': [
+                (marker.textOffset?.[0] ?? 0) / (marker.textSize ?? 16),
+                (marker.textOffset?.[1] ?? 0) / (marker.textSize ?? 16),
+            ],
+            'text-rotate': marker.textRotation ?? 0,
+            'text-max-width': marker.textMaxWidth ?? 10,
+            'text-size': marker.textSize ?? 16,
+            'text-color': group.textColor || marker.textColor
+                ? getColorValue(marker.dataBindings ?? {}, marker.textColor, group.textColor)
+                : '#000000',
+            'text-halo-color': group.textHaloColor || marker.textHaloColor
+                ? getColorValue(marker.dataBindings ?? {}, marker.textHaloColor, group.textHaloColor)
+                : '#000000',
+            'text-halo-width': marker.textHaloWidth ?? 0,
+            'text-line-height': marker.textLineHeight ?? 1.2,
+            'text-letter-spacing': marker.textLetterSpacing ?? 0,
+            'text-justify': marker.textJustify ?? 'center',
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: [marker.lngLat.lng, marker.lngLat.lat],
+        },
+    };
+}

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

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

package/dist/esm/models/polygon.js

@@ -0,0 +1,80 @@
+import { getColorValue, SvgCache } from '@/utils/svgHelpers';
+import { calculatePolygonGeometry } from '@/utils/models';
+import { stringToId } from '@/utils/helpers';
+export function addPolygonGroup(map, group, beforeId, svgs, svgCache) {
+    map.addSource(group.id, {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features: group.models
+                .filter(model => model.visible ?? true)
+                .map(model => buildFeature(group, model, svgs, svgCache)),
+        },
+    });
+    map.addLayer({
+        id: group.id,
+        type: 'fill',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'polygon',
+            'mc-group-id': group.id,
+        },
+        paint: {
+            'fill-color': ['get', 'fill-color'],
+        },
+    }, beforeId);
+    map.addLayer({
+        id: `${group.id}-pattern`,
+        type: 'fill',
+        source: group.id,
+        filter: ['has', 'fill-pattern'],
+        paint: {
+            'fill-pattern': ['get', 'fill-pattern'],
+        },
+        metadata: {
+            'mc-model-type': 'polygon',
+            'mc-group-id': group.id,
+        },
+    }, beforeId);
+    map.addLayer({
+        id: `${group.id}-outline`,
+        type: 'line',
+        source: group.id,
+        metadata: {
+            'mc-model-type': 'polygon',
+            'mc-group-id': group.id,
+        },
+        layout: {
+            'line-cap': 'round',
+            'line-join': 'round',
+        },
+        paint: {
+            'line-width': ['get', 'outline-width'],
+            'line-color': ['get', 'outline-color'],
+        },
+    }, beforeId);
+}
+function buildFeature(group, polygon, svgs, svgCache) {
+    const patternKey = polygon.fillPattern !== undefined
+        ? svgCache.getMapLibreImageKey(svgs[polygon.fillPattern], 2 * window.devicePixelRatio)
+        : undefined;
+    return {
+        type: 'Feature',
+        id: stringToId(polygon.id),
+        properties: {
+            'id': polygon.id,
+            'fill-color': group.fillColor || polygon.fillColor
+                ? getColorValue(polygon.dataBindings ?? {}, polygon.fillColor, group.fillColor)
+                : '#000000',
+            'outline-color': group.outlineColor || polygon.outlineColor
+                ? getColorValue(polygon.dataBindings ?? {}, polygon.outlineColor, group.outlineColor)
+                : '#000000',
+            'outline-width': polygon.outlineWidth ?? 0,
+            'fill-pattern': patternKey,
+        },
+        geometry: {
+            type: 'Polygon',
+            coordinates: calculatePolygonGeometry(polygon),
+        },
+    };
+}

package/dist/{renderAdornments.d.ts → esm/renderAdornments.d.ts}

@@ -1,4 +1,4 @@
-import { PositionOffsets, JobObject } from './types/jobObject';
-import { Map as MapLibre } from '@mapcreator/maplibre-gl';
-import { InitialPositionInfo } from './types';
+import type { PositionOffsets, JobObject } from '@/types/jobObject';
+import type { Map as MapLibre } from '@mapcreator/maplibre-gl';
+import type { InitialPositionInfo } from '@/types';
 export declare function useRenderAdornments(jobObject: JobObject, positionOffsets: PositionOffsets | undefined, map: MapLibre, initialPosition: InitialPositionInfo, vapiUrl: string, cdnUrl: string, accessToken: string): void;