@mapcreator/sdk 0.0.8 → 0.0.9

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

@@ -1,5 +1,5 @@
-import { Map } from '@mapcreator/maplibre-gl';
-import { PopupElement } from './Registry';
+import { type Map } from '@mapcreator/maplibre-gl';
+import type { PopupElement } from '@/Registry';
 export declare class HighlightManager {
     private map;
     private popupElements;

package/dist/esm/HighlightManager.js

@@ -0,0 +1,203 @@
+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/{MCMap.d.ts → esm/MCMap.d.ts}

@@ -1,5 +1,5 @@
 import { Map as MapLibre } from '@mapcreator/maplibre-gl';
-import { Env, JobObjectAugmented, Mode } from './types';
+import type { Env, JobObjectAugmented, Mode } from '@/types';
 export declare class MCMap {
     map: MapLibre;
     constructor(map: MapLibre);

package/dist/esm/MCMap.js

@@ -0,0 +1,254 @@
+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);
+        }
+    }
+}

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

@@ -1,7 +1,7 @@
-import { Map as MapLibre, MapGeoJSONFeature, MapLayerMouseEvent, LngLatLike } from '@mapcreator/maplibre-gl';
-import { JobObject, PopupPosition } from './types/jobObject';
-import { PopupElement } from './Registry';
-import { Mode } from './types';
+import { type Map as MapLibre, type MapGeoJSONFeature, type MapLayerMouseEvent, type LngLatLike } from '@mapcreator/maplibre-gl';
+import type { JobObject, PopupPosition } from '@/types/jobObject';
+import { type PopupElement } from '@/Registry';
+import type { Mode } from '@/types';
 export declare class PopupManager {
     private map;
     private popupPosition;