@mapcreator/sdk 0.0.8 → 0.0.9

package/dist/esm/adornments/insetMap.js

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

@@ -1,2 +1,2 @@
-import { JobObjectManualLegend } from '../types/jobObject';
+import type { JobObjectManualLegend } from '@/types/jobObject';
 export declare function useManualLegend(legend: JobObjectManualLegend, vapiUrl: string, accessToken: string): HTMLElement;

package/dist/esm/adornments/manualLegend.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,3 @@
+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

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

@@ -1,5 +1,5 @@
-import { AdornmentPosition } from '../types/jobObject';
-import { SkySpecification } from '@mapcreator/maplibre-gl';
+import type { AdornmentPosition } from '@/types/jobObject';
+import type { SkySpecification } from '@mapcreator/maplibre-gl';
 export declare const defaultSky: SkySpecification;
 type PositionConfig = {
     x: 'left' | 'right' | 'center';

package/dist/esm/constants/index.js

@@ -0,0 +1,53 @@
+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

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

@@ -1,2 +1,2 @@
-import { Map } from '@mapcreator/maplibre-gl';
+import type { Map } from '@mapcreator/maplibre-gl';
 export declare function useFullScreenButton(map: Map): HTMLElement;

package/dist/esm/controls/fullscreenControls.js

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