@mapcreator/sdk 0.0.9 → 0.0.10

package/dist/models/area.d.ts

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

package/dist/models/circle.d.ts

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

package/dist/models/dot.d.ts

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

package/dist/models/line.d.ts

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

package/dist/models/marker.d.ts

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

package/dist/models/polygon.d.ts

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

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

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

package/dist/{esm/types → types}/index.d.ts

@@ -1,4 +1,4 @@
-import type { JobObject, JobObjectDataBindings } from '@/types/jobObject';
+import { JobObject, JobObjectDataBindings } from './jobObject';
 export type Svgs = Record<string, string>;
 export type ModelBindings = {
     dataBindings?: JobObjectDataBindings | undefined;

package/dist/{esm/types → types}/mapstyle.d.ts

@@ -1,9 +1,5 @@
-/**
- * These types are mostly copy-pasted from V5 and needs to stay in sync with it.
- * TODO: consider extracting into a separate package
- */
-import type { JobObjectModelType } from '@/types/jobObject';
-import type { LayerSpecification } from '@mapcreator/maplibre-gl';
+import { JobObjectModelType } from './jobObject';
+import { LayerSpecification } from '@mapcreator/maplibre-gl';
 export type Anchor = 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type Justify = 'left' | 'center' | 'right';
 export interface LabelStylePreset {

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

@@ -1,6 +1,6 @@
-import { type ScaleLinear, type ScaleOrdinal, type ScaleQuantile, type ScaleQuantize } from 'd3-scale';
-import type { CategoricalGroup, JobObjectAreaGroup } from '@/types/jobObject';
-import type { ModelBindings } from '@/types';
+import { ScaleLinear, ScaleOrdinal, ScaleQuantile, ScaleQuantize } from 'd3-scale';
+import { CategoricalGroup, JobObjectAreaGroup } from '../types/jobObject';
+import { ModelBindings } from '../types';
 export type ColorGenerator = ScaleLinear<string, string> | ScaleQuantile<string> | ScaleQuantize<string> | ScaleOrdinal<string, string>;
 export declare const legendTickCount = 4;
 export declare function getColorGenerator(group: JobObjectAreaGroup): ColorGenerator | undefined;

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

@@ -1,4 +1,4 @@
-import type { Map } from '@mapcreator/maplibre-gl';
+import { Map } from '@mapcreator/maplibre-gl';
 export declare const loadLocationDot: (map: Map) => void;
 export declare const initLayersAndSources: (map: Map) => void;
 export declare const addLocationDot: (map: any, lng: number, lat: number) => void;

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

@@ -1,4 +1,4 @@
-import type { LngLat } from '@/types/geometry';
+import { LngLat } from '../types/geometry';
 export declare class GraphHopperGeocoderService {
     getLocationInBounds(location: string, center: LngLat, limit?: number): Promise<any>;
     _callGraphHopper(params: any): Promise<any>;

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

@@ -1,5 +1,5 @@
-import type { JobObjectDataBindings, JobObjectStoredValue } from '@/types/jobObject';
-import type { LngLat } from '@/types/geometry';
+import { JobObjectDataBindings, JobObjectStoredValue } from '../types/jobObject';
+import { LngLat } from '../types/geometry';
 export declare const numberRe: RegExp;
 export declare function degToRad(angle: number): number;
 export declare function radToDeg(angle: number): number;

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

@@ -1,4 +1,4 @@
-import type { Map } from '@mapcreator/maplibre-gl';
+import { Map } from '@mapcreator/maplibre-gl';
 export declare function setLanguage(language: string, map: Map): void;
 export declare const LanguageNotation: Readonly<{
     THREE: "ISO 639-2/B";

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

@@ -1,7 +1,7 @@
-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';
+import { LngLat, Position } from '../types/geometry';
+import { JobObjectPolygon } from '../types/jobObject';
+import { ModelBindings } from '../types';
+import { 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 → utils}/overlays.d.ts

@@ -1,4 +1,4 @@
-import type { Map, LayerSpecification } from '@mapcreator/maplibre-gl';
+import { 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 → utils}/svgHelpers.d.ts

@@ -1,7 +1,6 @@
-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';
+import { JobObjectDataBindings } from '../types/jobObject';
+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 interface SvgColor {

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

@@ -1,5 +1,5 @@
-import type { Mode } from '@/types';
-import type { JobObjectDataBindings, PopupMedia } from '@/types/jobObject';
+import { Mode } from '../types';
+import { JobObjectDataBindings, PopupMedia } from '../types/jobObject';
 export declare function buildTemplate(template: string | undefined, popupMedia: PopupMedia | undefined, bindings: JobObjectDataBindings, mode: Mode): string;
 export declare const closeButtonHtml: string;
 export declare const cycleButtonsHtml: string;

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

@@ -1,4 +1,4 @@
-import type { PopupMedia, JobObjectDataBindings } from '@/types/jobObject';
+import { PopupMedia, JobObjectDataBindings } from '../types/jobObject';
 export declare function getEmbedUrlFromYoutubeUrl(popupmedia: Extract<PopupMedia, {
     type: 'video';
 }>, bindings: JobObjectDataBindings): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcreator/sdk",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "engines": {
     "node": "^24.0.0",
     "npm": "^11.0.0"
@@ -9,12 +9,12 @@
   "type": "module",
   "main": "./dist/mapcreator-sdk.umd.cjs",
   "module": "./dist/mapcreator-sdk.js",
-  "types": "./dist/esm/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
+      "import": "./dist/mapcreator-sdk.js",
       "require": "./dist/mapcreator-sdk.umd.cjs",
-      "types": "./dist/esm/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./dist/": {
       "import": "./dist/",
@@ -23,7 +23,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && tsc --noEmit false --declaration true --outDir dist/esm",
+    "build": "tsc && vite build",
     "prettier": "prettier --check src/",
     "prettier:fix": "prettier --write src/",
     "types": "tsc",
@@ -52,7 +52,8 @@
     "prettier": "^3.8.1",
     "rollup-plugin-visualizer": "^7.0.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.1"
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
   },
   "dependencies": {
     "@mapcreator/maplibre-gl": "5.7.0-mc.5",

package/dist/esm/HighlightManager.js

@@ -1,203 +0,0 @@
-import { LngLatBounds } from '@mapcreator/maplibre-gl';
-import { calculateCircle } from '@/utils/models';
-import { stringToId } from '@/utils/helpers';
-export class HighlightManager {
-    map;
-    popupElements;
-    markerLayerIds;
-    resizeObserver;
-    constructor(map, popupElements) {
-        this.map = map;
-        this.popupElements = popupElements;
-        this.markerLayerIds = this.map
-            .getStyle()
-            .layers.filter(layer => layer.id.startsWith('custom-marker'))
-            .filter(layer => !layer.id.endsWith('-cluster'))
-            .map(layer => layer.id);
-    }
-    highlight(popupElement) {
-        this.deselect();
-        if (!popupElement) {
-            return;
-        }
-        const { groupId, modelId } = popupElement;
-        const groupedPopups = this.popupElements.filter(item => item.groupId === groupId);
-        if (groupedPopups.length > 1 && groupId.startsWith('custom-marker')) {
-            this.highlightGroupedMarker(groupId, modelId, groupedPopups);
-        }
-        if (groupId.startsWith('custom-marker')) {
-            this.fadeOtherMarkers(groupId);
-        }
-        this.repositionMap(popupElement);
-    }
-    deselect() {
-        this.markerLayerIds.forEach(id => {
-            this.map.setPaintProperty(id, 'icon-opacity', 1);
-            this.map.setPaintProperty(id, 'text-opacity', 1);
-        });
-        this.resizeObserver?.disconnect();
-    }
-    highlightGroupedMarker(groupId, modelId, groupedPopups) {
-        const groupLayer = this.markerLayerIds.find(id => id.startsWith(groupId));
-        if (groupLayer) {
-            this.map.setPaintProperty(groupLayer, 'icon-opacity', [
-                'case',
-                ['boolean', ['feature-state', 'highlighted'], false],
-                1,
-                0.3,
-            ]);
-            this.map.setPaintProperty(groupLayer, 'text-opacity', [
-                'case',
-                ['boolean', ['feature-state', 'highlighted'], false],
-                1,
-                0.3,
-            ]);
-            groupedPopups.forEach(item => {
-                this.map.setFeatureState({ source: groupId, id: stringToId(item.modelId) }, { highlighted: item.modelId === modelId });
-            });
-        }
-    }
-    fadeOtherMarkers(layerId) {
-        const otherMarkerIds = this.markerLayerIds.filter(id => !id.startsWith(layerId));
-        otherMarkerIds.forEach(id => {
-            this.map.setPaintProperty(id, 'icon-opacity', 0.3);
-            this.map.setPaintProperty(id, 'text-opacity', 0.3);
-        });
-    }
-    repositionMap(popupElement) {
-        let elementBounds;
-        let padding = 20;
-        if (popupElement.lngLat !== undefined) {
-            elementBounds = new LngLatBounds(popupElement.lngLat, popupElement.lngLat);
-            padding = 40;
-        }
-        else if (popupElement.anchorPoints !== undefined) {
-            elementBounds = this.getElementBounds(this.flattenCoordinates(popupElement.anchorPoints));
-        }
-        else if (popupElement.center !== undefined && popupElement.radius !== undefined) {
-            elementBounds = this.getElementBounds(calculateCircle(popupElement.center, popupElement.radius));
-        }
-        const popupEl = document.querySelector('.popup-container');
-        if (!popupEl || !elementBounds) {
-            return;
-        }
-        this.resizeObserver?.disconnect();
-        let lastHeight = 0;
-        this.resizeObserver = new ResizeObserver(entries => {
-            const height = entries[0].contentRect.height;
-            if (height > lastHeight) {
-                lastHeight = height;
-                this.panToElement(elementBounds, padding);
-            }
-        });
-        this.resizeObserver.observe(popupEl);
-    }
-    getElementBounds(coords) {
-        const bounds = new LngLatBounds(coords[0], coords[0]);
-        for (const coord of coords) {
-            bounds.extend(coord);
-        }
-        return bounds;
-    }
-    flattenCoordinates(coords) {
-        if (Array.isArray(coords[0][0])) {
-            return coords.flat();
-        }
-        return coords;
-    }
-    panToElement(elementBounds, padding) {
-        const map = this.map;
-        const projection = map.getProjection();
-        if (projection?.type === 'globe') {
-            const testCoords = [
-                elementBounds.getSouthWest(),
-                elementBounds.getNorthEast(),
-                elementBounds.getNorthWest(),
-                elementBounds.getSouthEast(),
-            ];
-            const behindGlobe = testCoords.some(c => !this.visibleOnGlobe(c.lng, c.lat));
-            if (behindGlobe) {
-                map.easeTo({ center: elementBounds.getCenter(), duration: 500 });
-                return;
-            }
-        }
-        const sw = map.projectWithScaleCorrection(elementBounds.getSouthWest());
-        const ne = map.projectWithScaleCorrection(elementBounds.getNorthEast());
-        const mapWidth = map.getContainer().clientWidth;
-        const mapHeight = map.getContainer().clientHeight;
-        const isDesktop = mapWidth > 600;
-        const popupRect = document.querySelector('.popup-container')?.getBoundingClientRect();
-        const popupWidth = popupRect?.width ?? 0;
-        let popupHeight = popupRect?.height ?? 0;
-        if (!isDesktop) {
-            popupHeight = Math.min(popupHeight, mapHeight / 2);
-        }
-        const abovePopup = mapHeight - sw.y > popupHeight + padding;
-        const leftVisible = sw.x > padding + (isDesktop && !abovePopup ? popupWidth : 0);
-        const rightVisible = ne.x < mapWidth - padding;
-        const topVisible = ne.y > padding;
-        const bottomVisible = isDesktop ? sw.y < mapHeight - padding : abovePopup;
-        if (!(leftVisible && rightVisible && topVisible && bottomVisible)) {
-            if (ne.x - sw.x + 2 * padding < mapWidth && sw.y - ne.y + 2 * padding < mapHeight) {
-                const center = elementBounds.getCenter();
-                map.easeTo({ center, duration: 500, offset: isDesktop ? [0, 0] : [0, -30] });
-            }
-            else {
-                map.fitBounds(elementBounds, {
-                    padding,
-                    maxZoom: map.getZoom(),
-                    duration: 500,
-                    linear: true,
-                });
-            }
-        }
-    }
-    visibleOnGlobe(lng, lat) {
-        const { lng: centerLng, lat: centerLat } = this.map.getCenter();
-        const pitch = (this.map.getPitch() * Math.PI) / 180;
-        const bearing = (this.map.getBearing() * Math.PI) / 180;
-        const centerVector = this.lngLatToUnitVector(centerLng, centerLat);
-        const featureVector = this.lngLatToUnitVector(lng, lat);
-        const up = [0, 0, 1];
-        const east = this.normalize(this.cross(up, centerVector));
-        const rotationAxis = this.rotateAroundZ(east, bearing);
-        const visibleVector = this.rotateVectorAroundAxis(centerVector, rotationAxis, pitch);
-        const dot = visibleVector[0] * featureVector[0] +
-            visibleVector[1] * featureVector[1] +
-            visibleVector[2] * featureVector[2];
-        return dot > 0.3;
-    }
-    lngLatToUnitVector(lng, lat) {
-        const a = (lat * Math.PI) / 180;
-        const b = (lng * Math.PI) / 180;
-        return [Math.cos(a) * Math.cos(b), Math.cos(a) * Math.sin(b), Math.sin(a)];
-    }
-    rotateVectorAroundAxis(vector, axis, pitch) {
-        const [v0, v1, v2] = vector;
-        const [a0, a1, a2] = axis;
-        const cos = Math.cos(pitch);
-        const sin = Math.sin(pitch);
-        const dot = v0 * a0 + v1 * a1 + v2 * a2;
-        return [
-            v0 * cos + (a1 * v2 - a2 * v1) * sin + a0 * dot * (1 - cos),
-            v1 * cos + (a2 * v0 - a0 * v2) * sin + a1 * dot * (1 - cos),
-            v2 * cos + (a0 * v1 - a1 * v0) * sin + a2 * dot * (1 - cos),
-        ];
-    }
-    rotateAroundZ(vector, bearing) {
-        const [v0, v1, v2] = vector;
-        const cos = Math.cos(bearing);
-        const sin = Math.sin(bearing);
-        return [v0 * cos - v1 * sin, v0 * sin + v1 * cos, v2];
-    }
-    cross(vectorA, vectorB) {
-        const [a0, a1, a2] = vectorA;
-        const [b0, b1, b2] = vectorB;
-        return [a1 * b2 - a2 * b1, a2 * b0 - a0 * b2, a0 * b1 - a1 * b0];
-    }
-    normalize(vector) {
-        const [v0, v1, v2] = vector;
-        const len = Math.hypot(v0, v1, v2);
-        return [v0 / len, v1 / len, v2 / len];
-    }
-}

package/dist/esm/MCMap.js

@@ -1,254 +0,0 @@
-import { LanguageNotation, setLanguage, transformLanguageCode } from '@/utils/language';
-import { AttributionControl, Map as MapLibre } from '@mapcreator/maplibre-gl';
-import { useRenderAdornments } from '@/renderAdornments';
-import { addPolygonGroup } from '@/models/polygon';
-import { addCircleGroup } from '@/models/circle';
-import { addMarkerGroup } from '@/models/marker';
-import { loadOverlays } from '@/utils/overlays';
-import { PopupManager } from '@/PopupManager';
-import { unitConvert } from '@/utils/helpers';
-import { SvgCache } from '@/utils/svgHelpers';
-import { addLineGroup } from '@/models/line';
-import { addAreaGroup } from '@/models/area';
-import { addDotGroup } from '@/models/dot';
-import { defaultSky } from '@/constants';
-import { t } from '@/i18n';
-export class MCMap {
-    map;
-    constructor(map) {
-        this.map = map;
-    }
-}
-export async function initMap(options) {
-    const { accessToken, mode = 'sdk', env = 'production' } = options;
-    const vapiUrl = env === 'bleeding'
-        ? 'https://vapi.bleeding.mc-cdn.io'
-        : env === 'beta'
-            ? 'https://vapi.beta.mc-cdn.io'
-            : 'https://vapi.mc-cdn.io';
-    const cdnUrl = env === 'bleeding'
-        ? 'https://cdn.bleeding.mapcreator.io'
-        : env === 'beta'
-            ? 'https://cdn.beta.mapcreator.io'
-            : 'https://cdn.mapcreator.io';
-    const jobObject = typeof options.job === 'string'
-        ? await loadJobObject(options.job, cdnUrl, accessToken)
-        : options.job;
-    await nonZeroWindowSize();
-    const map = new MapLibre({
-        container: options.container,
-        attributionControl: false,
-        style: null,
-        maxBounds: [-Infinity, -90, Infinity, 90],
-        maxPitch: 85,
-        maxZoom: 22,
-        locale: {
-            'CooperativeGesturesHandler.WindowsHelpText': t('windowsHelpText'),
-            'CooperativeGesturesHandler.MacHelpText': t('macHelpText'),
-            'CooperativeGesturesHandler.MobileHelpText': t('mobileHelpText'),
-        },
-    });
-    const container = map.getContainer();
-    container.classList.add('mc-map');
-    const svgCache = new SvgCache(map);
-    const popupManager = new PopupManager(map, mode);
-    const { map: { language, zoom, pitch = 0, rotation = 0, center, hideBasemap, layerInfo = [], detailLevel = 0, projection = 'mercator', terrain = false, terrainExaggeration = 1, }, export: exportData, registry = {}, web, positionOffsets, title, } = jobObject;
-    const { models = {}, slots = {}, svgs = {} } = registry;
-    loadFontFaces(env, vapiUrl, accessToken);
-    map.resize();
-    if (mode === 'app') {
-        document.title = title ? `${title} - Mapcreator` : 'Mapcreator';
-    }
-    map.setPitch(pitch);
-    map.setBearing(rotation);
-    const unit = exportData?.unit ?? 'pixel';
-    const aspectBoxWidth = unitConvert(unit, 'pixel', exportData?.size?.[0] ?? 600);
-    const aspectBoxHeight = unitConvert(unit, 'pixel', exportData?.size?.[1] ?? 400);
-    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 / aspectBoxWidth, container.clientHeight / aspectBoxHeight);
-        zoomCorrection = Math.log(scale) / Math.LN2;
-    }
-    map.setZoom(zoom - detailLevel + zoomCorrection);
-    map.setCenter(center);
-    map.setDetailLevel(detailLevel);
-    map.setMinZoom(detailLevel);
-    map.addControl(new AttributionControl({ compact: false }));
-    if (mode === 'app') {
-        map.cooperativeGestures.enable();
-    }
-    useRenderAdornments(jobObject, positionOffsets, map, {
-        center,
-        zoom,
-        pitch,
-        rotation,
-        detailLevel,
-        width: aspectBoxWidth,
-        height: aspectBoxHeight,
-    }, vapiUrl, cdnUrl, accessToken);
-    popupManager.setJobObject(jobObject);
-    if (web) {
-        const { restrictMapMovement, popupPosition } = web;
-        if (restrictMapMovement) {
-            map.boxZoom.disable();
-            map.doubleClickZoom.disable();
-            map.dragPan.disable();
-            map.dragRotate.disable();
-            map.keyboard.disable();
-            map.scrollZoom.disable();
-            map.touchPitch.disable();
-            map.touchZoomRotate.disable();
-        }
-        popupManager.setParams(popupPosition, transformLanguageCode(language, LanguageNotation.TWO), restrictMapMovement, center);
-    }
-    const mapstyle = await fetch(`${vapiUrl}/styles/${jobObject.meta.mapstyleSet}.json?access_token=${accessToken}`).then(response => response.json());
-    map.setStyle(null);
-    map.setStyle(mapstyle);
-    await map.once('style.load');
-    if (mode === 'app') {
-        setCustomStyle(map.getStyle().metadata?.customCssFilePath, accessToken);
-    }
-    // Don't wait for overlays and models to set the language as maps on slow internet will otherwise not be translated immediately
-    setLanguage(language, map);
-    await loadOverlays(jobObject.meta.layers ?? [], map, vapiUrl, accessToken, mapstyle.metadata?.styleOverride);
-    addModels(map, svgCache, models, slots, svgs, vapiUrl, accessToken);
-    // Set the language again to translate the overlays and models
-    setLanguage(language, map);
-    popupManager.setPublication(mapstyle.metadata?.publication);
-    popupManager.setpopupElements();
-    popupManager.setHighlightManager();
-    map.setProjection({ type: projection === 'globe' ? 'globe' : 'mercator' });
-    setSky(map, projection);
-    if (terrain) {
-        initTerrain(map, vapiUrl, accessToken, terrainExaggeration);
-    }
-    setLayerVisibility(map, map.getStyle(), layerInfo, !hideBasemap);
-    return new MCMap(map);
-}
-function loadJobObject(id, cdnUrl, accessToken) {
-    return fetch(`${cdnUrl}/jobs/${id}.json?access_token=${accessToken}`).then(response => response.json());
-}
-function nonZeroWindowSize() {
-    return new Promise(resolve => {
-        const checkSize = () => {
-            if (window.innerWidth > 0 && window.innerHeight > 0) {
-                window.removeEventListener('resize', checkSize);
-                resolve();
-            }
-        };
-        window.addEventListener('resize', checkSize);
-        checkSize();
-    });
-}
-function setSky(map, projection) {
-    const meta = map.getStyle().metadata ?? {};
-    const backgroundColorFlat = meta['mc:background-color'] ?? '#f8f8f8';
-    const backgroundColorGlobe = meta['mc:background-color-globe'] ?? '#000000';
-    map.getContainer().style.backgroundColor =
-        projection === 'globe' ? backgroundColorGlobe : backgroundColorFlat;
-    map.setSky(map.getStyle().sky ?? defaultSky);
-    map.setLight({ position: [1.15, 210, 45] });
-}
-function initTerrain(map, vapiUrl, accessToken, exaggeration) {
-    map.addSource('mc-dem', {
-        type: 'raster-dem',
-        tiles: [`${vapiUrl}/dataset/jaxa_terrainrgb/{z}/{x}/{y}?access_token=${accessToken}`],
-        attribution: '<a href="https://earth.jaxa.jp/en/data/policy" target="_blank">© AW3D30 (JAXA)</a>',
-        minzoom: 0,
-        maxzoom: 12,
-    });
-    map.setTerrain({ source: 'mc-dem', exaggeration });
-}
-function loadFontFaces(env, vapiUrl, accessToken) {
-    const betaPrefix = env === 'beta' ? 'b-' : '';
-    const href = `${vapiUrl}/stylesheets/ff-${betaPrefix}${accessToken}.css?access_token=${accessToken}`;
-    const element = document.createElement('link');
-    element.setAttribute('rel', 'stylesheet');
-    element.setAttribute('href', href);
-    element.setAttribute('type', 'text/css');
-    // Inserting at the beginning of <head> to avoid redefining existing Roboto fonts
-    // See https://mapcreator.atlassian.net/browse/MC-2702
-    document.head.insertBefore(element, document.head.firstChild);
-}
-function setCustomStyle(styleOrURL, accessToken) {
-    document.getElementById('custom-style')?.remove();
-    if (!styleOrURL) {
-        return;
-    }
-    let element;
-    if (styleOrURL.startsWith('http')) {
-        styleOrURL = `${styleOrURL}?access_token=${accessToken}`;
-        element = document.createElement('link');
-        element.setAttribute('rel', 'stylesheet');
-        element.setAttribute('href', styleOrURL.replace(/https?:/, ''));
-    }
-    else {
-        element = document.createElement('style');
-        element.appendChild(document.createTextNode(styleOrURL));
-    }
-    element.setAttribute('id', 'custom-style');
-    element.setAttribute('type', 'text/css');
-    document.head.appendChild(element);
-}
-function setLayerVisibility(map, mapstyle, layers, showBasemap) {
-    for (const layer of layers) {
-        const existingLayer = mapstyle.layers.find(item => layer.id === item.id || layer.id.endsWith(` | ${item.id}`));
-        if (existingLayer) {
-            map.setLayoutProperty(existingLayer.id, 'visibility', layer.visibility && showBasemap ? 'visible' : 'none');
-        }
-    }
-}
-function addModels(map, svgCache, models, slots, svgs, vapiUrl, accessToken) {
-    const { beforeNone = [], beforeNames = [], beforeBoundaries = [], beforeWaters = [] } = slots;
-    beforeNone.forEach(item => {
-        addModelsByType(map, svgCache, models, item, svgs, 'mc-before-none', vapiUrl, accessToken);
-    });
-    beforeNames.forEach(item => {
-        addModelsByType(map, svgCache, models, item, svgs, 'mc-before-names', vapiUrl, accessToken);
-    });
-    beforeBoundaries.forEach(item => {
-        addModelsByType(map, svgCache, models, item, svgs, 'mc-before-boundaries', vapiUrl, accessToken);
-    });
-    beforeWaters.forEach(item => {
-        addModelsByType(map, svgCache, models, item, svgs, 'mc-before-waters', vapiUrl, accessToken);
-    });
-}
-function addModelsByType(map, svgCache, models, item, svgs, beforeId, vapiUrl, accessToken) {
-    if (item.type === 'marker') {
-        const group = models.marker?.find(entry => entry.id === item.groupId);
-        if (group) {
-            addMarkerGroup(map, group, beforeId, svgs, svgCache);
-        }
-    }
-    else if (item.type === 'polygon') {
-        const group = models.polygon?.find(entry => entry.id === item.groupId);
-        if (group) {
-            addPolygonGroup(map, group, beforeId, svgs, svgCache);
-        }
-    }
-    else if (item.type === 'circle') {
-        const group = models.circle?.find(entry => entry.id === item.groupId);
-        if (group) {
-            addCircleGroup(map, group, beforeId, svgs, svgCache);
-        }
-    }
-    else if (item.type === 'line') {
-        const group = models.line?.find(entry => entry.id === item.groupId);
-        if (group) {
-            addLineGroup(map, group, beforeId, svgCache);
-        }
-    }
-    else if (item.type === 'dot') {
-        const group = models.dot?.find(entry => entry.id === item.groupId);
-        if (group) {
-            addDotGroup(map, group, beforeId);
-        }
-    }
-    else if (item.type === 'area') {
-        const group = models.area?.find(entry => entry.id === item.groupId);
-        if (group) {
-            addAreaGroup(map, group, beforeId, svgs, svgCache, vapiUrl, accessToken);
-        }
-    }
-}