@mapcreator/sdk 0.0.9 → 0.0.11

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);
-        }
-    }
-}

package/dist/esm/PopupManager.js

@@ -1,297 +0,0 @@
-import { Popup, } from '@mapcreator/maplibre-gl';
-import { buildTemplate, closeButtonHtml, cycleButtonsHtml } from '@/utils/template';
-import { Registry } from '@/Registry';
-import { HighlightManager } from '@/HighlightManager';
-export class PopupManager {
-    map;
-    popupPosition = 'bottomLeft';
-    mapContainer;
-    popupContainer;
-    feature;
-    currentFeatureId;
-    currentModelId;
-    popupElements = [];
-    language = 'en';
-    promoteIdCache = new Map();
-    publication;
-    floatingPopup;
-    registry;
-    highlightManager;
-    mode;
-    restrictMapMovement;
-    center;
-    constructor(map, mode) {
-        this.map = map;
-        this.mode = mode;
-        this.mapContainer = this.map.getContainer();
-        this.popupContainer = document.createElement('div');
-        this.popupContainer.classList.add('popup-container');
-        this.map.on('mousemove', e => this.onMouseMove(e));
-        this.map.on('click', e => this.onClick(e));
-    }
-    setJobObject(jobObject) {
-        this.registry = new Registry(jobObject);
-    }
-    setParams(popupPosition, language, restrictMapMovement, center) {
-        this.popupPosition = popupPosition;
-        this.language = language;
-        this.restrictMapMovement = restrictMapMovement;
-        this.center = center;
-    }
-    setPublication(publication) {
-        this.publication = publication;
-    }
-    setpopupElements() {
-        this.popupElements = this.registry.getPopupElements();
-    }
-    setHighlightManager() {
-        this.highlightManager = new HighlightManager(this.map, this.registry.getPopupElements());
-    }
-    onMouseMove(e) {
-        this.feature = this.getInteractiveFeature(e);
-        if (this.feature) {
-            this.map.getCanvas().style.cursor = 'pointer';
-        }
-        else {
-            this.map.getCanvas().style.cursor = '';
-        }
-    }
-    onClick(e) {
-        this.feature = this.getInteractiveFeature(e);
-        this.currentModelId = this.feature?.properties?.id;
-        if (this.feature &&
-            (!this.mapContainer.contains(this.popupContainer) ||
-                this.feature?.id !== this.currentFeatureId)) {
-            this.addPopup(e);
-            this.highlightManager?.highlight(this.getPopupElementFromFeature(this.feature));
-        }
-        else {
-            this.hidePopup();
-            this.highlightManager?.highlight(undefined);
-        }
-    }
-    getPopupElementFromFeature(feature) {
-        return this.popupElements.find(item => item.modelId === feature.properties.id);
-    }
-    getInteractiveFeature(e) {
-        const features = this.map.queryRenderedFeatures(e.point);
-        return features.find(feature => {
-            // Overlay interactive feature
-            if (Object.keys(feature.layer.metadata ?? {}).some(key => key.startsWith('mc-interactivity-template'))) {
-                return true;
-            }
-            // User-created interactive feature
-            const model = this.registry.getModel(feature);
-            return !!(model?.popup ?? model?.popupMedia);
-        });
-    }
-    addPopup(e) {
-        if (!this.feature) {
-            return;
-        }
-        this.floatingPopup?.remove();
-        const toNumber = Number(this.feature.id);
-        this.currentFeatureId = isNaN(toNumber) ? this.feature.id : toNumber;
-        const template = this.getTemplate(this.feature);
-        if (!template) {
-            return;
-        }
-        if (this.popupPosition === 'mapElement') {
-            if (this.feature.geometry.type === 'Point') {
-                this.addFloatingPopup(template, this.feature.geometry.coordinates);
-            }
-            else {
-                const { lng, lat } = this.map.unproject(e.point);
-                this.addFloatingPopup(template, [lng, lat]);
-            }
-            return;
-        }
-        this.popupContainer.innerHTML = template;
-        const currentPopup = this.popupElements.find(popup => popup.modelId === this.currentModelId);
-        if (currentPopup) {
-            this.addPopupControls();
-        }
-        this.mapContainer.appendChild(this.popupContainer);
-    }
-    addFloatingPopup(template, lngLat) {
-        const anchor = this.restrictMapMovement ? this.getAnchor(lngLat) : undefined;
-        this.floatingPopup = new Popup({
-            maxWidth: 'none',
-            closeButton: false,
-            offset: 20,
-            ...(anchor !== undefined && { anchor }),
-        })
-            .setLngLat(lngLat)
-            .setHTML(template)
-            .addTo(this.map);
-    }
-    getAnchor(lngLat) {
-        const point = this.map.projectWithScaleCorrection(lngLat);
-        const width = this.map.getContainer().clientWidth;
-        const height = this.map.getContainer().clientHeight;
-        let vertical;
-        let horizontal;
-        if (point.y < height * 0.33) {
-            vertical = 'top';
-        }
-        else if (point.y > height * 0.66) {
-            vertical = 'bottom';
-        }
-        else {
-            vertical = 'center';
-        }
-        if (point.x < width * 0.33) {
-            horizontal = 'left';
-        }
-        else if (point.x > width * 0.66) {
-            horizontal = 'right';
-        }
-        else {
-            horizontal = 'center';
-        }
-        if (vertical === 'center' && horizontal === 'center') {
-            return 'bottom';
-        }
-        else if (vertical === 'center') {
-            return horizontal;
-        }
-        else if (horizontal === 'center') {
-            return vertical;
-        }
-        return `${vertical}-${horizontal}`;
-    }
-    hidePopup() {
-        if (this.popupContainer) {
-            this.popupContainer.remove();
-            this.feature = undefined;
-            this.currentFeatureId = undefined;
-        }
-        if (this.restrictMapMovement && this.center) {
-            this.map.easeTo({ center: this.center });
-        }
-    }
-    getTemplate(feature) {
-        const { layer } = feature;
-        let template;
-        const model = this.registry.getModel(feature);
-        const modelTemplate = model?.popup || model?.popupMedia;
-        if (modelTemplate) {
-            template = buildTemplate(model.popup, model.popupMedia, model.dataBindings ?? {}, this.mode);
-        }
-        else {
-            const options = [];
-            if (this.publication) {
-                options.push(`:${this.publication}-${this.language}`);
-                options.push(`:${this.publication}-:en`);
-            }
-            options.push(`:${this.language}`);
-            options.push(`:en`);
-            options.push('');
-            for (const option of options) {
-                const layerTemplate = layer.metadata?.[`mc-interactivity-template${option}`];
-                if (layerTemplate) {
-                    template = this.fillDatalayerTemplate(feature, layerTemplate, option);
-                    break;
-                }
-            }
-            if (template) {
-                template = `
-          <div class="popup-scroll-wrapper">
-            <div class="mc-popup data-layer text-content">${template}</div>
-          </div>
-        `;
-            }
-        }
-        return template;
-    }
-    htmlToElement(html) {
-        const template = document.createElement('template');
-        template.innerHTML = html.trim();
-        return template.content.firstElementChild;
-    }
-    addPopupControls() {
-        const closeButton = this.htmlToElement(closeButtonHtml);
-        if (closeButton) {
-            closeButton.addEventListener('click', () => {
-                this.hidePopup();
-                this.highlightManager.highlight(undefined);
-            });
-            this.popupContainer.appendChild(closeButton);
-        }
-        if (this.popupElements.length < 2) {
-            return;
-        }
-        const cycleButtons = this.htmlToElement(cycleButtonsHtml);
-        if (cycleButtons) {
-            cycleButtons.querySelector('.prev')?.addEventListener('click', () => this.cyclePopups(false));
-            cycleButtons.querySelector('.next')?.addEventListener('click', () => this.cyclePopups());
-            this.popupContainer.appendChild(cycleButtons);
-        }
-    }
-    fillDatalayerTemplate(feature, html, language) {
-        const attr = 'data-mention-id';
-        const dom = new DOMParser().parseFromString(html, 'text/html').body;
-        for (const el of dom.querySelectorAll(`[${attr}]`)) {
-            const value = this.getProperty(feature, el.getAttribute(attr), language);
-            if (value !== undefined) {
-                el.innerText = value;
-            }
-        }
-        return dom.innerHTML;
-    }
-    getProperty(feature, name, language) {
-        if (!name) {
-            return undefined;
-        }
-        const options = name.endsWith(':en') ? [name.replace(':en', language), name] : [name];
-        for (const option of options) {
-            const property = feature.properties[option] ?? this.getVectorProperty(feature, option);
-            if (property !== undefined) {
-                return property;
-            }
-        }
-        return undefined;
-    }
-    getVectorProperty(feature, name) {
-        let promoteId = this.promoteIdCache.get(feature.source);
-        if (promoteId === undefined) {
-            promoteId = (this.map.getSource(feature.source)?.serialize().promoteId || 'id');
-            this.promoteIdCache.set(feature.source, promoteId);
-        }
-        try {
-            const id = feature.properties[promoteId];
-            return feature.layer.metadata.properties[name][id];
-        }
-        catch (e) {
-            return undefined;
-        }
-    }
-    cyclePopups(forward = true) {
-        const index = this.popupElements?.findIndex(model => model.modelId === this.currentModelId);
-        if (index !== -1) {
-            let nextIndex = 0;
-            if (forward) {
-                nextIndex = index === this.popupElements.length - 1 ? 0 : index + 1;
-            }
-            else {
-                nextIndex = index === 0 ? this.popupElements.length - 1 : index - 1;
-            }
-            const next = this.popupElements?.[nextIndex];
-            this.highlightManager.highlight(next);
-            const template = buildTemplate(next.popup, next.popupMedia, next.dataBindings ?? {}, this.mode);
-            const temp = this.popupContainer;
-            this.popupContainer.remove();
-            temp.innerHTML = template;
-            this.mapContainer.appendChild(temp);
-            this.currentModelId = next.modelId;
-            this.addPopupControls();
-            if (forward) {
-                this.popupContainer.querySelector('.mc-popup-button.next')?.focus();
-            }
-            else {
-                this.popupContainer.querySelector('.mc-popup-button.prev')?.focus();
-            }
-            this.currentFeatureId = undefined;
-        }
-    }
-}

package/dist/esm/Registry.js

@@ -1,74 +0,0 @@
-const allModelTypes = ['area', 'circle', 'dot', 'line', 'marker', 'polygon'];
-export class Registry {
-    data;
-    customGroupIds;
-    constructor(jobObject) {
-        this.data = {
-            area: {},
-            circle: {},
-            dot: {},
-            line: {},
-            marker: {},
-            polygon: {},
-        };
-        for (const modelType of allModelTypes) {
-            for (const group of jobObject.registry?.models?.[modelType] ?? []) {
-                this.data[modelType][group.id] = {};
-                for (const model of group.models) {
-                    // MC-2870 Convert the old format area without multiple vector-source group support to the new format
-                    if (modelType === 'area') {
-                        const area = model;
-                        if (area.featureId === undefined) {
-                            area.featureId = Number(area.id);
-                            area.id = `${area.vectorUrl}-${area.id}`;
-                        }
-                    }
-                    this.data[modelType][group.id][model.id] = model;
-                }
-            }
-        }
-        const { beforeWaters = [], beforeBoundaries = [], beforeNames = [], beforeNone = [], } = jobObject.registry?.slots ?? {};
-        this.customGroupIds = [...beforeWaters, ...beforeBoundaries, ...beforeNames, ...beforeNone].map(item => item.groupId);
-    }
-    getModel(feature) {
-        let modelId = String(feature.properties?.id);
-        const metadata = feature.layer.metadata;
-        const groupId = metadata?.['mc-group-id'];
-        const modelType = metadata?.['mc-model-type'];
-        const prefix = metadata?.['mc-model-id-prefix'];
-        if (prefix) {
-            modelId = `${prefix}-${modelId}`;
-        }
-        if (groupId === undefined || modelId === undefined || modelType === undefined) {
-            return undefined;
-        }
-        return this.data[modelType]?.[groupId]?.[modelId];
-    }
-    getPopupElements() {
-        const result = [];
-        const elementTypes = ['circle', 'dot', 'line', 'marker', 'polygon'];
-        for (const groupId of this.customGroupIds) {
-            for (const type of elementTypes) {
-                const groupModels = this.data[type]?.[groupId];
-                if (groupModels) {
-                    for (const [modelId, model] of Object.entries(groupModels)) {
-                        if (model.popup || model.popupMedia) {
-                            result.push({
-                                groupId,
-                                modelId,
-                                popup: model.popup,
-                                popupMedia: model.popupMedia,
-                                lngLat: model.lngLat,
-                                center: model.center,
-                                radius: model.radius,
-                                anchorPoints: model.anchorPoints,
-                                dataBindings: model.dataBindings,
-                            });
-                        }
-                    }
-                }
-            }
-        }
-        return result.reverse();
-    }
-}