@mapcreator/sdk 1.0.0 → 1.1.0

package/dist/types/geometry.d.ts

@@ -2,5 +2,9 @@ export type LngLat = {
     lng: number;
     lat: number;
 };
+export interface Point2D {
+    x: number;
+    y: number;
+}
 export type Position = [number, number];
 export type BBox = [number, number, number, number];

package/dist/types/index.d.ts

@@ -11,11 +11,8 @@ export type InitialPositionInfo = {
     zoom: number;
     pitch: number;
     rotation: number;
-    detailLevel: number;
-    width: number;
-    height: number;
 };
-export type Mode = 'sdk' | 'app' | 'preview';
+export type Mode = 'sdk' | 'app' | 'preview' | 'video';
 export type Env = 'production' | 'beta' | 'bleeding';
 export type JobObjectAugmented = JobObject & {
     meta: {
@@ -23,3 +20,8 @@ export type JobObjectAugmented = JobObject & {
         layers?: string[] | undefined;
     };
 };
+export type LayerInfo = {
+    [layerId: string]: {
+        visibility: boolean;
+    };
+};

package/dist/types/video.d.ts

@@ -0,0 +1,13 @@
+export interface Keyframe {
+    time: number;
+    center: [number, number];
+    x: number;
+    y: number;
+    zoom: number;
+    fov: number;
+    bearing: number;
+    pitch: number;
+    elevation: number;
+    transition: 'ease' | 'linear' | 'instant';
+    hideLabels: boolean;
+}

package/dist/utils/helpers.d.ts

@@ -1,4 +1,4 @@
-import { JobObjectDataBindings, JobObjectStoredValue } from '../types/jobObject';
+import { JobObject, JobObjectDataBindings, JobObjectStoredValue } from '../types/jobObject';
 import { LngLat } from '../types/geometry';
 export declare const numberRe: RegExp;
 export declare function degToRad(angle: number): number;
@@ -25,4 +25,6 @@ export declare function clamp(value: number, min: number, max: number): number;
  * Fast hash function for non-cryptographic use
  */
 export declare function fnv32b(str: string): string;
+export declare function calculateScaleCorrection(jobObject: JobObject, container: HTMLElement): number;
+export declare function almostEqual(a: number, b: number, delta?: number): boolean;
 export {};

package/dist/utils/lineSlicer.d.ts

@@ -0,0 +1,9 @@
+import { MercatorCoordinate } from '@mapcreator/maplibre-gl';
+import { Position } from '../types/geometry';
+export declare class LineSlicer {
+    #private;
+    constructor(line: Position[]);
+    sample(position: number): MercatorCoordinate;
+    slice(start: number, end: number): Position[];
+    get length(): number;
+}

package/dist/utils/overlays.d.ts

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

package/dist/utils/svgHelpers.d.ts

@@ -3,6 +3,7 @@ import { Map as MapLibre } from '@mapcreator/maplibre-gl';
 import { ColorGenerator } from './choropleth';
 export declare function escapeXML(str: string): string;
 export declare function loadFonts(fontNames: string[], vapiUrl: string, accessToken: string): Promise<void>;
+export declare function createImage(svgString: string, width: number, height: number): Promise<HTMLImageElement>;
 export interface SvgColor {
     name: string;
     color: Color | string | undefined;

package/dist/utils/video/animations.d.ts

@@ -0,0 +1,4 @@
+import { JobObjectAnimation, JobObjectAnimationType } from '../../types/jobObject';
+export declare function changesOpacity(animation: JobObjectAnimation): boolean;
+export declare function changesScale(animation: JobObjectAnimation): boolean;
+export declare function getAnimatedValue(animation: JobObjectAnimation, type: JobObjectAnimationType, time: number): number;

package/dist/utils/video/cameraCurve.d.ts

@@ -0,0 +1,39 @@
+import { LngLat } from '../../types/geometry';
+import { Keyframe } from '../../types/video';
+interface CameraParams {
+    center: LngLat;
+    zoom: number;
+    bearing: number;
+    pitch: number;
+    fov: number;
+    elevation: number;
+}
+/**
+ * The CameraCurve class represents a camera path of a single video. It takes a video script (array
+ * of keyframes) in its constructor. It then provides a single public method sample(time) that
+ * returns the camera position for the given time.
+ */
+export declare class CameraCurve {
+    private script;
+    private xCurve;
+    private yCurve;
+    private fovCurve;
+    private zoomCurve;
+    private pitchCurve;
+    private bearingCurve;
+    private altitudeCurve;
+    private elevationCurve;
+    constructor(script: Keyframe[]);
+    /**
+     * Returns the camera position for the given time.
+     */
+    sample(time: number): CameraParams;
+    /**
+     * Creates an instance of MonotonicCurve for the given script and field.
+     */
+    private createMonotonicCurve;
+    sampleAutoHideOpacity(time: number): number;
+    private getKeyframeIndexByTime;
+    private getKeyframeValue;
+}
+export {};

package/dist/utils/video/easings.d.ts

@@ -0,0 +1,31 @@
+export declare function linear(t: number, b: number, c: number, d: number): number;
+export declare function easeInQuad(t: number, b: number, c: number, d: number): number;
+export declare function easeOutQuad(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutQuad(t: number, b: number, c: number, d: number): number;
+export declare function easeInCubic(t: number, b: number, c: number, d: number): number;
+export declare function easeOutCubic(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;
+export declare function easeInQuart(t: number, b: number, c: number, d: number): number;
+export declare function easeOutQuart(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutQuart(t: number, b: number, c: number, d: number): number;
+export declare function easeInQuint(t: number, b: number, c: number, d: number): number;
+export declare function easeOutQuint(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutQuint(t: number, b: number, c: number, d: number): number;
+export declare function easeInSine(t: number, b: number, c: number, d: number): number;
+export declare function easeOutSine(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutSine(t: number, b: number, c: number, d: number): number;
+export declare function easeInExpo(t: number, b: number, c: number, d: number): number;
+export declare function easeOutExpo(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutExpo(t: number, b: number, c: number, d: number): number;
+export declare function easeInCirc(t: number, b: number, c: number, d: number): number;
+export declare function easeOutCirc(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutCirc(t: number, b: number, c: number, d: number): number;
+export declare function easeInElastic(t: number, b: number, c: number, d: number): number;
+export declare function easeOutElastic(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutElastic(t: number, b: number, c: number, d: number): number;
+export declare function easeInBack(t: number, b: number, c: number, d: number, s?: number): number;
+export declare function easeOutBack(t: number, b: number, c: number, d: number, s?: number): number;
+export declare function easeInOutBack(t: number, b: number, c: number, d: number, s?: number): number;
+export declare function easeInBounce(t: number, b: number, c: number, d: number): number;
+export declare function easeOutBounce(t: number, b: number, c: number, d: number): number;
+export declare function easeInOutBounce(t: number, b: number, c: number, d: number): number;

package/dist/utils/video/index.d.ts

@@ -0,0 +1,11 @@
+import { Keyframe } from '../../types/video';
+/**
+ * This function fixes the given script so that globe and bearing rotations between keyframes always
+ * happen along the shortest path. This fixes the camera unexpectedly turning the opposite direction
+ * when lng or bearing crosses the wrap boundary of –180°/180°. The function does not mutate the
+ * given script, instead generating a brand new one with corrected lng and bearing values.
+ */
+export declare function unwrapGlobeAndCameraRotation(script: Keyframe[]): Keyframe[];
+export declare function zoomToAltitude(zoom: number): number;
+export declare function getTotalDuration(script: Keyframe[]): number;
+export declare function getPreciseFramerate(frameRate: number): number;

package/dist/utils/video/monotonicCurve.d.ts

@@ -0,0 +1,23 @@
+import { Point2D } from '../../types/geometry';
+/**
+ * This class is a wrapper around D3's curveMonotoneX. It takes an array of XY-points in the
+ * constructor and provides two main public methods: sample(X) calculates Y for the given X and
+ * solve(Y) calculates X for the given Y.
+ *
+ * We build curves like this for every camera parameter (x, y, zoom, bearing, pitch, etc.) where X
+ * represents elapsed time in milliseconds and Y represents the value of the parameter.
+ *
+ * @see https://d3js.org/d3-shape/curve#curveMonotoneX
+ */
+export declare class MonotonicCurve {
+    private segments;
+    constructor(points: Point2D[]);
+    /**
+     * Returns the value of Y for the given X.
+     */
+    sample(x: number): number;
+    /**
+     * Returns the value of X for the given Y.
+     */
+    solve(y: number, initialGuess: number): number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcreator/sdk",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "engines": {
     "node": "^24.0.0",
     "npm": "^11.0.0"
@@ -38,13 +38,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@types/d3-array": "^3.2.2",
-    "@types/d3-format": "^3.0.4",
-    "@types/d3-geo": "^3.1.0",
-    "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-scale": "^4.0.9",
     "@types/node": "^25.5.0",
-    "@types/topojson-client": "^3.1.5",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "eslint": "^8.57.1",
@@ -62,11 +56,22 @@
     "@turf/bbox-clip": "^7.3.4",
     "@turf/intersect": "^7.3.4",
     "@turf/polygon-smooth": "^7.3.4",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-geo": "^3.1.0",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
+    "@types/topojson-client": "^3.1.5",
+    "bezier-easing": "^3.0.0",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.2",
     "d3-geo": "^3.1.1",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "just-debounce-it": "^3.2.0",
+    "newton-raphson-method": "^1.0.2",
     "path-data-polyfill": "^1.0.10",
     "topojson-client": "^3.1.0"
   }