@mapcreator/sdk 0.0.9 → 0.0.11

package/dist/esm/adornments/insetMap.js

@@ -1,351 +0,0 @@
-import { area } from '@turf/area';
-import { coordEach } from '@turf/meta';
-import { feature } from 'topojson-client';
-import { intersect } from '@turf/intersect';
-import { lerp } from '@/utils/helpers';
-import { featureCollection, lineString, polygon } from '@turf/helpers';
-import { geoPath, geoMercator, geoGraticule, geoOrthographic, } from 'd3-geo';
-// Inset map size at scale=1
-const baseSize = 100;
-export function useInsetMap(insetMap, map, cdnUrl) {
-    const container = document.createElement('div');
-    container.className = 'adornment';
-    const scale = insetMap.scale ?? 1;
-    const size = scale * baseSize;
-    container.style.width = `${size}px`;
-    container.style.height = `${size}px`;
-    container.style.flexGrow = '0';
-    container.style.flexShrink = '0';
-    // Creating context
-    const context = {
-        id: insetMap.id,
-        map,
-        container,
-        moveEndPosition: map.getCenter(),
-        geoJson: undefined,
-        isGlobe: insetMap.isGlobe,
-        boundingBox: insetMap.boundingBox,
-        scale,
-        backgroundColor: insetMap.backgroundColor ?? '#000000',
-        globeBackgroundColor: insetMap.globeBackgroundColor ?? '#000000',
-        borderColor: insetMap.borderColor ?? '#000000',
-        primaryFillColor: insetMap.primaryFillColor ?? '#000000',
-        primaryStrokeColor: insetMap.primaryStrokeColor ?? '#000000',
-        secondaryFillColor: insetMap.secondaryFillColor ?? '#000000',
-        secondaryStrokeColor: insetMap.secondaryStrokeColor ?? '#000000',
-        graticuleColor: insetMap.graticuleColor ?? '#000000',
-        frameColor: insetMap.frameColor ?? '#000000',
-        frameOutlineColor: insetMap.frameOutlineColor ?? '#000000',
-        dotColor: insetMap.dotColor ?? '#000000',
-        dotOutlineColor: insetMap.dotOutlineColor ?? '#000000',
-        globeFallbackActive: false,
-        globeGeoJsonRequested: false,
-        globeGeoJson: undefined,
-    };
-    // Initializing data download
-    fetch(`${cdnUrl}/data/insetmaps/${insetMap.fileName}`)
-        .then(response => response.json())
-        .then(topology => {
-        // Once downloaded, add data to context and rerender
-        context.geoJson = feature(topology, Object.keys(topology.objects)[0]);
-        render(context);
-    });
-    map.on('moveend', () => {
-        context.moveEndPosition = map.getCenter();
-        // Only do a full rerender at moveend if we're rendering a globe
-        if (context.isGlobe || context.globeFallbackActive) {
-            render(context);
-        }
-    });
-    map.on('move', () => {
-        // Non-globe inset map: fallback to globe logic
-        if (!context.isGlobe) {
-            const [minLng, minLat, maxLng, maxLat] = context.boundingBox;
-            const frameGeometry = calcAspectBoxGeometry(map);
-            const insetMapGeometry = polygon([
-                [
-                    [minLng, minLat],
-                    [minLng, maxLat],
-                    [maxLng, maxLat],
-                    [maxLng, minLat],
-                    [minLng, minLat],
-                ],
-            ]);
-            const intersection = intersect(featureCollection([frameGeometry, insetMapGeometry]));
-            const frameArea = area(frameGeometry);
-            const intersectionArea = intersection ? area(intersection) : 0;
-            // We consider to be out of inset map bounds if more than 25% of the frame is outside of the map
-            const outOfBounds = intersectionArea < frameArea * 0.75;
-            // Fallback turned on or off: full rerender
-            if (context.globeFallbackActive !== outOfBounds) {
-                context.globeFallbackActive = outOfBounds;
-                context.moveEndPosition = map.getCenter();
-                render(context);
-            }
-            // Request fallback globe data if needed
-            if (context.globeFallbackActive && !context.globeGeoJsonRequested) {
-                context.globeGeoJsonRequested = true;
-                fetch(`${cdnUrl}/data/insetmaps/world-110m.json`)
-                    .then(response => response.json())
-                    .then(topology => {
-                    // Once downloaded, do a  full rerender
-                    context.globeGeoJson = feature(topology, Object.keys(topology.objects)[0]);
-                    context.moveEndPosition = map.getCenter();
-                    render(context);
-                });
-            }
-        }
-        // Always update frame highlight on move
-        positionHighlight(context);
-    });
-    return container;
-}
-/**
- * Full rerender of the inset map
- */
-function render(context) {
-    const { id, container, scale, backgroundColor, globeBackgroundColor, secondaryFillColor, secondaryStrokeColor, primaryFillColor, primaryStrokeColor, graticuleColor, borderColor, frameColor, frameOutlineColor, dotColor, dotOutlineColor, } = context;
-    // Decide if we’re rendering globe as fallback
-    const globeFallback = context.globeFallbackActive && context.globeGeoJson !== undefined;
-    const geoJson = globeFallback ? context.globeGeoJson : context.geoJson;
-    const isGlobe = globeFallback || context.isGlobe;
-    // Data not downloaded yet
-    if (geoJson === undefined) {
-        return;
-    }
-    const size = baseSize * scale;
-    const halfSize = size / 2;
-    const lineWidth = 0.1 * scale;
-    // Background nodes
-    const nodes = [
-        isGlobe
-            ? `<circle cx="${halfSize}" cy="${halfSize}" r="${halfSize}" fill="${globeBackgroundColor}"></circle>`
-            : `<rect x="0" y="0" width="${size}" height="${size}" fill="${backgroundColor}"></rect>`,
-    ];
-    const { path } = getPathAndProjection(context);
-    // Secondary polygons
-    const dSecondary = path({
-        ...geoJson,
-        features: geoJson.features.filter(f => f.properties?.class !== 'P1'),
-    });
-    if (dSecondary) {
-        nodes.push(`
-      <path
-        d="${dSecondary}"
-        fill="${secondaryFillColor}"
-        stroke="${secondaryStrokeColor}"
-        stroke-width="${lineWidth}"
-      ></path>
-    `);
-    }
-    // Primary polygons
-    const dPrimary = path({
-        ...geoJson,
-        features: geoJson.features.filter(f => f.properties?.class === 'P1'),
-    });
-    if (dPrimary) {
-        nodes.push(`
-      <path
-        d="${dPrimary}"
-        fill="${primaryFillColor}"
-        stroke="${primaryStrokeColor}"
-        stroke-width="${lineWidth}"
-      ></path>
-    `);
-    }
-    // Graticules (for globe)
-    if (isGlobe) {
-        const dGraticule = path(featureCollection(geoGraticule()
-            .step([10, 10])
-            .lines()
-            .map(geometry => lineString(geometry.coordinates))));
-        nodes.push(`
-      <path
-        d="${dGraticule}"
-        fill="none"
-        stroke="${graticuleColor}"
-        stroke-width="${lineWidth}"
-      ></path>
-    `);
-    }
-    // Frame highlight nodes. Geometries and visibility will be set in positionHighlight
-    nodes.push(`
-    <path
-      id="frame-outline-${id}"
-      fill="none"
-      stroke="${frameOutlineColor}"
-      stroke-width="${4 * scale}"
-    ></path>
-  `);
-    nodes.push(`
-    <path
-      id="frame-${id}"
-      fill="none"
-      stroke="${frameColor}"
-      stroke-width="${2 * scale}"
-    ></path>
-  `);
-    nodes.push(`
-    <circle
-      id="dot-${id}"
-      r="${5 * scale}"
-      fill="${dotColor}"
-      stroke="${dotOutlineColor}"
-      stroke-width="${2 * scale}"
-    ></circle>
-  `);
-    // Inset map border (non-globe only)
-    if (!isGlobe) {
-        nodes.push(`
-      <rect
-        x="${scale / 2}"
-        y="${scale / 2}"
-        width="${size - scale}"
-        height="${size - scale}"
-        fill="none"
-        stroke="${borderColor}"
-        stroke-width="${scale}"
-      ></rect>
-    `);
-    }
-    const svg = `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 ${size} ${size}"
-      width="${size}"
-      height="${size}"
-    >
-      ${nodes.join('')}
-    </svg>
-  `;
-    container.innerHTML = svg;
-    positionHighlight(context);
-}
-/**
- * Calculates D3 Projection and Path generator
- */
-function getPathAndProjection(context) {
-    const { scale, boundingBox, moveEndPosition } = context;
-    // Decide if we’re rendering a globe
-    const globeFallback = context.globeFallbackActive && context.globeGeoJson !== undefined;
-    const isGlobe = globeFallback || context.isGlobe;
-    const size = baseSize * scale;
-    const path = geoPath();
-    let projection;
-    if (isGlobe) {
-        const { lng, lat } = moveEndPosition;
-        projection = geoOrthographic()
-            .scale(size / 2)
-            .translate([size / 2, size / 2])
-            .rotate([-lng, -lat])
-            .clipAngle(90);
-    }
-    else {
-        projection = geoMercator().scale(1).translate([0, 0]);
-        const topLeft = projection([boundingBox[0], boundingBox[3]]);
-        const bottomRight = projection([boundingBox[2], boundingBox[1]]);
-        const dx = Math.abs(bottomRight[0] - topLeft[0]);
-        const dy = Math.abs(bottomRight[1] - topLeft[1]);
-        const x = (topLeft[0] + bottomRight[0]) / 2;
-        const y = (topLeft[1] + bottomRight[1]) / 2;
-        const scaleFactor = 1 / Math.max(dx / size, dy / size);
-        projection
-            .scale(scaleFactor)
-            .translate([size / 2 - scaleFactor * x, size / 2 - scaleFactor * y]);
-    }
-    path.projection(projection);
-    return { path, projection };
-}
-/**
- * Updates frame highlight nodes, called on every frame
- */
-function positionHighlight(context) {
-    const { id, map, container, scale } = context;
-    const frameNode = container.querySelector(`#frame-${id}`);
-    const frameOutlineNode = container.querySelector(`#frame-outline-${id}`);
-    const dotNode = container.querySelector(`#dot-${id}`);
-    // Map not rendered yet (waiting for data)
-    if (!frameNode || !frameOutlineNode || !dotNode) {
-        return;
-    }
-    const frameGeometry = calcAspectBoxGeometry(map);
-    const { path, projection } = getPathAndProjection(context);
-    let minLng = Infinity;
-    let maxLng = -Infinity;
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let minY = Infinity;
-    let maxY = -Infinity;
-    coordEach(frameGeometry, coord => {
-        const point = projection(coord);
-        minLng = Math.min(minLng, coord[0]);
-        maxLng = Math.max(maxLng, coord[0]);
-        minX = Math.min(minX, point[0]);
-        maxX = Math.max(maxX, point[0]);
-        minY = Math.min(minY, point[1]);
-        maxY = Math.max(maxY, point[1]);
-    });
-    const dotThreshold = 10 * scale;
-    if (maxX - minX < dotThreshold || maxY - minY < dotThreshold) {
-        // Frame to small: rendering as circle
-        frameNode.style.display = 'none';
-        frameOutlineNode.style.display = 'none';
-        dotNode.style.display = 'block';
-        const center = map.getCenter();
-        const [x, y] = projection([center.lng, center.lat]);
-        dotNode.setAttribute('cx', String(x));
-        dotNode.setAttribute('cy', String(y));
-    }
-    else if (maxLng - minLng < 180) {
-        // Frame not to big: rendering as polygon
-        frameNode.style.display = 'block';
-        frameOutlineNode.style.display = 'block';
-        dotNode.style.display = 'none';
-        const d = path(frameGeometry);
-        frameNode.setAttribute('d', d);
-        frameOutlineNode.setAttribute('d', d);
-    }
-    else {
-        // Frame too large: not rendering at all
-        frameNode.style.display = 'none';
-        frameOutlineNode.style.display = 'none';
-        dotNode.style.display = 'none';
-    }
-}
-/**
- * Calculates GeoJSON Polygon geometry of the map viewport
- */
-function calcAspectBoxGeometry(map) {
-    const leftX = 0;
-    const topY = 0;
-    const rightX = map.getCanvas().width;
-    const bottomY = map.getCanvas().height;
-    const precision = 64;
-    const coordinates = [];
-    for (let i = 0; i < precision; i++) {
-        const { lng, lat } = map.unproject([lerp(leftX, rightX, i / precision), topY]);
-        coordinates.push([lng, lat]);
-    }
-    for (let i = 0; i < precision; i++) {
-        const { lng, lat } = map.unproject([rightX, lerp(topY, bottomY, i / precision)]);
-        coordinates.push([lng, lat]);
-    }
-    for (let i = 0; i < precision; i++) {
-        const { lng, lat } = map.unproject([lerp(rightX, leftX, i / precision), bottomY]);
-        coordinates.push([lng, lat]);
-    }
-    for (let i = 0; i < precision; i++) {
-        const { lng, lat } = map.unproject([leftX, lerp(bottomY, topY, i / precision)]);
-        coordinates.push([lng, lat]);
-    }
-    const { lng, lat } = map.unproject([leftX, topY]);
-    coordinates.push([lng, lat]);
-    return {
-        type: 'Feature',
-        properties: {},
-        geometry: {
-            coordinates: [coordinates],
-            type: 'Polygon',
-        },
-    };
-}

package/dist/esm/adornments/manualLegend.js

@@ -1,15 +0,0 @@
-import { loadFonts } from '@/utils/svgHelpers';
-import { getCategoricalLegendSvg } from '@/adornments/categoricalLegend';
-export function useManualLegend(legend, vapiUrl, accessToken) {
-    const container = document.createElement('div');
-    container.className = 'adornment';
-    if (legend.showBackground) {
-        container.style.boxShadow = '0 0 7px 0 rgba(33, 37, 41, 0.25)';
-        container.style.borderRadius = '10px';
-    }
-    const defaultFont = 'ArialMT';
-    const fonts = [legend.titleFont ?? defaultFont, legend.entryFont ?? defaultFont];
-    const fontsToLoad = Array.from(new Set(fonts));
-    loadFonts(fontsToLoad, vapiUrl, accessToken).then(() => (container.innerHTML = getCategoricalLegendSvg(legend, defaultFont)));
-    return container;
-}

package/dist/esm/adornments/northArrow.d.ts

@@ -1,3 +0,0 @@
-import type { Map } from '@mapcreator/maplibre-gl';
-import type { JobObjectNorthArrow } from '@/types/jobObject';
-export declare function useNorthArrow(northArrow: JobObjectNorthArrow, map: Map): HTMLElement;

package/dist/esm/adornments/northArrow.js

@@ -1,24 +0,0 @@
-export function useNorthArrow(northArrow, map) {
-    const container = document.createElement('div');
-    container.className = 'adornment';
-    const size = (northArrow.scale ?? 1) * 30;
-    container.style.cssText = `width: ${size}px; height: ${size}px`;
-    map.on('move', () => {
-        container.innerHTML = getSvg(map, size);
-    });
-    container.innerHTML = getSvg(map, size);
-    return container;
-}
-function getSvg(map, size) {
-    const rotation = map.getBearing();
-    const pitch = map.getPitch();
-    return `
-    <svg width="${size}" height="${size}" viewBox="-5 -5 30 30" xmlns="http://www.w3.org/2000/svg">
-      <g class="tilt" style="transform-origin: 33% 33%; transform: rotateX(${pitch}deg);">
-        <g class="rotate" style="transform-origin: 33% 33%; transform: rotate(${-rotation}deg);">
-          <path d="M0 20L10 0L20 20L10 12.7711L0 20Z" fill="#343A40" />
-        </g>
-      </g>
-    </svg>
-  `;
-}

package/dist/esm/adornments/scalebar.d.ts

@@ -1,3 +0,0 @@
-import type { Map } from '@mapcreator/maplibre-gl';
-import type { JobObjectScalebar } from '@/types/jobObject';
-export declare function useScalebar(scalebar: JobObjectScalebar, map: Map): HTMLElement;

package/dist/esm/adornments/scalebar.js

@@ -1,176 +0,0 @@
-import { calcDistance, unitConvert } from '@/utils/helpers';
-import { floatToFraction, getRoundNum } from '@/utils/scalebar';
-const units = {
-    kilometer: 'km',
-    meter: 'm',
-    mile: 'mi',
-    foot: 'ft',
-    nauticalMile: 'nm',
-};
-export function useScalebar(scalebar, map) {
-    const container = document.createElement('div');
-    container.className = 'adornment';
-    container.innerHTML = getSvg(map, scalebar);
-    map.on('move', () => {
-        container.innerHTML = getSvg(map, scalebar);
-    });
-    return container;
-}
-function getSvg(map, scalebar) {
-    const { maxWidth = 100, fontSize = 8, font = 'Arial, sans-serif', color = '#000000', unit = 'metric_and_imperial', } = scalebar;
-    const center = map.getCenter();
-    const point = map.project(center);
-    const maxMeters = calcDistance(center, map.unproject([point.x + maxWidth, point.y]));
-    const scaleData = Object.fromEntries(Object.entries(units).map(([u, abbr]) => {
-        const value = unitConvert('meter', u, maxMeters);
-        const dist = getRoundNum(value) || 0;
-        const ratio = value ? dist / value : 0;
-        const humanized = dist < 1 ? `${floatToFraction(dist).join('/')} ${abbr}` : `${dist} ${abbr}`;
-        return [u, { value, ratio, humanized }];
-    }));
-    const scaleMetric = scaleData.meter.value > 1000 ? scaleData.kilometer : scaleData.meter;
-    const scaleImperial = scaleData.foot.value > 5280 ? scaleData.mile : scaleData.foot;
-    const scaleMap = {
-        imperial: scaleImperial,
-        metric: scaleMetric,
-        nautical: scaleData.nauticalMile,
-    };
-    const scaleSingle = unit !== 'metric_and_imperial' ? scaleMap[unit] : undefined;
-    const scaleLengths = {
-        metric: Math.round(maxWidth * scaleMetric.ratio),
-        imperial: Math.round(maxWidth * scaleImperial.ratio),
-    };
-    const mainBarLength = unit === 'metric_and_imperial'
-        ? Math.max(scaleLengths.metric, scaleLengths.imperial)
-        : Math.round(maxWidth * (scaleSingle?.ratio ?? 0));
-    const baseY = fontSize + 7;
-    if (unit === 'metric_and_imperial') {
-        return `
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="${mainBarLength}"
-        height="${baseY + fontSize * 2}"
-      >
-        <line
-          x1="0"
-          y1="${baseY - 0.5}"
-          x2="${mainBarLength}"
-          y2="${baseY - 0.5}"
-          stroke="${color}"
-          stroke-width="1"
-        />
-        <line
-          x1="0.5"
-          y1="${baseY - 5}"
-          x2="0.5"
-          y2="${baseY + 5}"
-          stroke="${color}"
-          stroke-width="1"
-        />
-        <line
-          x1="${scaleLengths.imperial - 0.5}"
-          y1="${baseY - 5}"
-          x2="${scaleLengths.imperial - 0.5}"
-          y2="${baseY}"
-          stroke="${color}"
-          stroke-width="1"
-        />
-        <line
-          x1="${scaleLengths.metric - 0.5}"
-          y1="${baseY}"
-          x2="${scaleLengths.metric - 0.5}"
-          y2="${baseY + 5}"
-          stroke="${color}"
-          stroke-width="1"
-        />
-        <text
-          x="0"
-          y="${baseY + 7 + fontSize}"
-          font-size="${fontSize}px"
-          font-family="${font}"
-          font-weight="bold"
-          fill="${color}"
-          text-anchor="start"
-        >
-          0
-        </text>
-        <text
-          x="${scaleLengths.imperial}"
-          y="${baseY - 7}"
-          font-size="${fontSize}px"
-          font-family="${font}"
-          font-weight="bold"
-          fill="${color}"
-          text-anchor="end"
-        >
-          ${scaleImperial.humanized}
-        </text>
-        <text
-          x="${scaleLengths.metric}"
-          y="${baseY + 7 + fontSize}"
-          font-size="${fontSize}px"
-          font-family="${font}"
-          font-weight="bold"
-          fill="${color}"
-          text-anchor="end"
-        >
-          ${scaleMetric.humanized}
-        </text>
-      </svg>
-    `;
-    }
-    return `
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="${mainBarLength}"
-      height="${baseY + fontSize + 5}"
-    >
-      <line
-        x1="0"
-        y1="4.5"
-        x2="${mainBarLength}"
-        y2="4.5"
-        stroke="${color}"
-        stroke-width="1"
-      />
-      <line
-        x1="0.5"
-        y1="0"
-        x2="0.5"
-        y2="10"
-        stroke="${color}"
-        stroke-width="1"
-      />
-      <line
-        x1="${mainBarLength - 0.5}"
-        y1="0"
-        x2="${mainBarLength - 0.5}"
-        y2="10"
-        stroke="${color}"
-        stroke-width="1"
-      />
-      <text
-        x="0"
-        y="${fontSize + 12}"
-        font-size="${fontSize}px"
-        font-family="${font}"
-        font-weight="bold"
-        fill="${color}"
-        text-anchor="start"
-      >
-        0
-      </text>
-      <text
-        x="${mainBarLength}"
-        y="${fontSize + 12}"
-        font-size="${fontSize}px"
-        font-family="${font}"
-        font-weight="bold"
-        fill="${color}"
-        text-anchor="end"
-      >
-        ${scaleSingle?.humanized ?? ''}
-      </text>
-    </svg>
-  `;
-}

package/dist/esm/constants/index.js

@@ -1,53 +0,0 @@
-export const defaultSky = {
-    'sky-color': '#6babff',
-    'sky-horizon-blend': 1,
-    'horizon-color': [
-        'interpolate-hcl',
-        ['linear'],
-        ['zoom'],
-        0,
-        '#edf7fc',
-        9,
-        '#edf7fc',
-        10,
-        '#dcf0fa',
-    ],
-    'horizon-fog-blend': 0.5,
-    'fog-color': '#edf7fc',
-    'fog-ground-blend': 0.5,
-    'atmosphere-blend': 1,
-};
-export const positionConfig = {
-    top_left: {
-        x: 'left',
-        y: 'top',
-    },
-    top_center: {
-        x: 'center',
-        y: 'top',
-    },
-    top_right: {
-        x: 'right',
-        y: 'top',
-    },
-    right_center: {
-        x: 'right',
-        y: 'center',
-    },
-    bottom_right: {
-        x: 'right',
-        y: 'bottom',
-    },
-    bottom_center: {
-        x: 'center',
-        y: 'bottom',
-    },
-    bottom_left: {
-        x: 'left',
-        y: 'bottom',
-    },
-    left_center: {
-        x: 'left',
-        y: 'center',
-    },
-};

package/dist/esm/controls/controls.js

@@ -1,7 +0,0 @@
-export function useButtonControl(props) {
-    const btn = document.createElement('button');
-    btn.className = props.className;
-    btn.innerHTML = `${props.content}`;
-    btn.addEventListener('click', props.onClick);
-    return btn;
-}

package/dist/esm/controls/fullscreenControls.js

@@ -1,29 +0,0 @@
-import fullScreenIcon from '@/images/full-screen.svg?raw';
-import { useButtonControl } from '@/controls/controls';
-import { isFullscreenSupported, enterFullscreen, exitFullscreen, isFullscreen, } from '@/utils/fullscreen';
-export function useFullScreenButton(map) {
-    const onClick = () => {
-        const mapContainer = map.getContainer();
-        if (isFullscreenSupported()) {
-            if (isFullscreen(mapContainer)) {
-                exitFullscreen();
-            }
-            else {
-                enterFullscreen(mapContainer);
-            }
-        }
-        else {
-            let url = document.location.href;
-            url += url.includes('?') ? '&' : '?';
-            url += 'close-tab';
-            window.open(url, '_blank');
-        }
-    };
-    const control = {
-        type: 'button',
-        className: 'control-button fullscreen-control-button',
-        content: fullScreenIcon,
-        onClick,
-    };
-    return useButtonControl(control);
-}