solid-map-gl 1.12.0 → 2.0.0

package/dist/source/components/Draw/modes/rectangle.js

@@ -1,118 +0,0 @@
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import { getArea, getLength } from "./measurements";
-const RectangleMode = {
-    ...MapboxDraw.modes.draw_line_string,
-    // When the mode starts this function will be called.
-    onSetup: function (opts) {
-        const props = MapboxDraw.modes.draw_line_string.onSetup.call(this, opts);
-        const rectangle = this.newFeature({
-            type: "Feature",
-            properties: {},
-            geometry: {
-                type: "Polygon",
-                coordinates: [[]],
-            },
-        });
-        this.addFeature(rectangle);
-        return { ...props, ...opts, rectangle };
-    },
-    // support mobile taps
-    onTap: function (state, e) {
-        // emulate 'move mouse' to update feature coords
-        if (state.startPoint)
-            this.onMouseMove(state, e);
-        // emulate onClick
-        this.onClick(state, e);
-    },
-    // Whenever a user clicks on the map, Draw will call `onClick`
-    onClick: function (state, e) {
-        if (state.startPoint &&
-            state.startPoint[0] !== e.lngLat.lng &&
-            state.startPoint[1] !== e.lngLat.lat) {
-            // if state.startPoint exist, means its second click
-            // change to  simple_select mode
-            this.updateUIClasses({ mouse: "pointer" });
-            state.endPoint = [e.lngLat.lng, e.lngLat.lat];
-            this.changeMode("simple_select", { featuresId: state.rectangle.id });
-        }
-        else {
-            // if its first click, save clicked point coords as starting for  rectangle
-            state.startPoint = [e.lngLat.lng, e.lngLat.lat];
-        }
-    },
-    onMouseMove: function (state, e) {
-        // if startPoint, update the feature coordinates, using the bounding box concept
-        // we are simply using the startingPoint coordinates and the current Mouse Position
-        // coordinates to calculate the bounding box on the fly, which will be our rectangle
-        if (state.startPoint) {
-            state.rectangle.updateCoordinate("0.0", state.startPoint[0], state.startPoint[1]); //minX, minY - the starting point
-            state.rectangle.updateCoordinate("0.1", e.lngLat.lng, state.startPoint[1]); // maxX, minY
-            state.rectangle.updateCoordinate("0.2", e.lngLat.lng, e.lngLat.lat); // maxX, maxY
-            state.rectangle.updateCoordinate("0.3", state.startPoint[0], e.lngLat.lat); // minX,maxY
-            state.rectangle.updateCoordinate("0.4", state.startPoint[0], state.startPoint[1]); //minX,minY - ending point (equals to starting point)
-        }
-    },
-    // Whenever a user clicks on a key while focused on the map, it will be sent here
-    onKeyUp: function (state, e) {
-        if (e.keyCode === 27)
-            return this.changeMode("simple_select");
-    },
-    onStop: function (state) {
-        MapboxDraw.modes.draw_line_string.onStop.call(this, state);
-        // check to see if we've deleted this feature
-        if (this.getFeature(state.rectangle.id) === undefined)
-            return;
-        //remove last added coordinate
-        state.rectangle.removeCoordinate("0.4");
-        if (state.rectangle.isValid()) {
-            this.map.fire("draw.create", {
-                features: [state.rectangle.toGeoJSON()],
-            });
-        }
-        else {
-            this.deleteFeature([state.rectangle.id], { silent: true });
-            this.changeMode("simple_select", {}, { silent: true });
-        }
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        console.log(state);
-        const isActivePolygon = geojson.properties.id === state.rectangle.id;
-        geojson.properties.active = isActivePolygon ? "true" : "false";
-        if (!isActivePolygon)
-            return display(geojson);
-        // Only render the rectangular polygon if it has the starting point
-        if (!state.startPoint)
-            return;
-        display(geojson);
-        // create custom feature for the current pointer position
-        if (state.showLength) {
-            display(getLength({
-                type: "Feature",
-                geometry: {
-                    type: "LineString",
-                    coordinates: [
-                        geojson.geometry.coordinates[0][0],
-                        geojson.geometry.coordinates[0][1],
-                    ],
-                },
-            }, { parent: state.rectangle.id, anchor: "bottom" }));
-            display(getLength({
-                type: "Feature",
-                geometry: {
-                    type: "LineString",
-                    coordinates: [
-                        geojson.geometry.coordinates[0][1],
-                        geojson.geometry.coordinates[0][2],
-                    ],
-                },
-            }, { parent: state.rectangle.id, anchor: "left" }));
-        }
-        state.showArea && display(getArea(geojson, { parent: state.rectangle.id }));
-        return null;
-    },
-    onTrash: function (state) {
-        this.deleteFeature([state.rectangle.id], { silent: true });
-        this.changeMode("simple_select");
-    },
-};
-export default RectangleMode;

package/dist/source/components/Draw/modes/rectangle_assisted.js

@@ -1,233 +0,0 @@
-const doubleClickZoom = {
-    enable: (ctx) => {
-        setTimeout(() => {
-            // First check we've got a map and some context.
-            if (!ctx.map ||
-                !ctx.map.doubleClickZoom ||
-                !ctx._ctx ||
-                !ctx._ctx.store ||
-                !ctx._ctx.store.getInitialConfigValue)
-                return;
-            if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom"))
-                return;
-            ctx.map.doubleClickZoom.enable();
-        }, 0);
-    },
-    disable(ctx) {
-        setTimeout(() => {
-            if (!ctx.map || !ctx.map.doubleClickZoom)
-                return;
-            ctx.map.doubleClickZoom.disable();
-        }, 0);
-    },
-};
-const RectangleAssistedMode = {
-    onSetup: function (opts) {
-        const rectangle = this.newFeature({
-            type: "Feature",
-            properties: {},
-            geometry: {
-                type: "Polygon",
-                coordinates: [[]],
-            },
-        });
-        this.addFeature(rectangle);
-        this.clearSelectedFeatures();
-        doubleClickZoom.disable(this);
-        this.updateUIClasses({
-            mouse: "add",
-        });
-        this.setActionableState({
-            trash: true,
-        });
-        return {
-            rectangle,
-            currentVertexPosition: 0,
-        };
-    },
-    onTap: function (state, e) {
-        this.onClick(state, e);
-    },
-    onClick: function (state, e) {
-        if (state.currentVertexPosition === 2) {
-            const getpXY3 = this.calculatepXY3(state, e, false);
-            if (getpXY3) {
-                state.rectangle.updateCoordinate(`0.${state.currentVertexPosition + 1}`, getpXY3[0], getpXY3[1]);
-            }
-            this.updateUIClasses({
-                mouse: "pointer",
-            });
-            return this.changeMode("simple_select", {
-                featuresId: state.rectangle.id,
-            });
-        }
-        else {
-            state.rectangle.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
-            state.currentVertexPosition++;
-            state.rectangle.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
-        }
-    },
-    onMouseMove: function (state, e) {
-        state.rectangle.updateCoordinate("0." + state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
-        if (state.currentVertexPosition && state.currentVertexPosition > 0) {
-            this.calculateOrientedAnglePolygon(state);
-        }
-        if (state.currentVertexPosition === 2) {
-            const getpXY3 = this.calculatepXY3(state, e, true);
-            if (getpXY3) {
-                state.rectangle.updateCoordinate("0." + (state.currentVertexPosition + 1), getpXY3[0], getpXY3[1]);
-            }
-        }
-    },
-    deegrees2meters(px) {
-        //gist from https://gist.github.com/springmeyer/871897
-        const x = (px[0] * 20037508.34) / 180;
-        let y = Math.log(Math.tan(((90 + px[1]) * Math.PI) / 360)) / (Math.PI / 180);
-        y = (y * 20037508.34) / 180;
-        return [x, y];
-    },
-    meters2degress(px) {
-        //gist from https://gist.github.com/springmeyer/871897
-        const lon = (px[0] * 180) / 20037508.34;
-        const lat = (Math.atan(Math.exp((px[1] * Math.PI) / 20037508.34)) * 360) / Math.PI -
-            90;
-        return [lon, lat];
-    },
-    calculateOrientedAnglePolygon: function (state) {
-        const pXY0 = state.rectangle.getCoordinate("0.0");
-        const pXY0_3857 = this.deegrees2meters(pXY0);
-        const pXY1 = state.rectangle.getCoordinate("0.1");
-        const pXY1_3857 = this.deegrees2meters(pXY1);
-        const angleStdGraus = (Math.atan2(pXY1_3857[1] - pXY0_3857[1], pXY1_3857[0] - pXY0_3857[0]) *
-            180) /
-            Math.PI;
-        let angleSudGraus = -1.0 * (angleStdGraus + 90);
-        const angle = angleSudGraus < 0 ? angleSudGraus + 360 : angleSudGraus;
-        state.angle = parseFloat(angle.toFixed(2));
-    },
-    calculatepXY3: function (state, e, tmp) {
-        const pXY0 = state.rectangle.getCoordinate("0.0");
-        const pXY0_3857 = this.deegrees2meters(pXY0);
-        const pXY1 = state.rectangle.getCoordinate("0.1");
-        const pXY1_3857 = this.deegrees2meters(pXY1);
-        let pXY2_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
-        const mouse_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
-        if (pXY0_3857[0] === pXY1_3857[0]) {
-            pXY2_3857 = [mouse_3857[0], pXY1_3857[1]];
-        }
-        else if (pXY0_3857[1] === pXY1_3857[1]) {
-            pXY2_3857 = [pXY1_3857[0], mouse_3857[1]];
-        }
-        else {
-            const vector1_3857 = (pXY1_3857[1] - pXY0_3857[1]) / (pXY1_3857[0] - pXY0_3857[0]);
-            const vector2_3857 = -1.0 / vector1_3857;
-            if (Math.abs(vector2_3857) < 1) {
-                pXY2_3857[1] =
-                    vector2_3857 * (mouse_3857[0] - pXY1_3857[0]) + pXY1_3857[1];
-            }
-            else {
-                pXY2_3857[0] =
-                    pXY1_3857[0] + (pXY2_3857[1] - pXY1_3857[1]) / vector2_3857;
-            }
-        }
-        const vector_3857 = [
-            pXY1_3857[0] - pXY0_3857[0],
-            pXY1_3857[1] - pXY0_3857[1],
-        ];
-        const pXY3_3857 = [
-            pXY2_3857[0] - vector_3857[0],
-            pXY2_3857[1] - vector_3857[1],
-        ];
-        const pXY2G = this.meters2degress(pXY2_3857);
-        const pXY3G = this.meters2degress(pXY3_3857);
-        state.rectangle.updateCoordinate("0.2", pXY2G[0], pXY2G[1]);
-        state.rectangle.updateCoordinate("0.3", pXY3G[0], pXY3G[1]);
-        return pXY3G;
-    },
-    onKeyUp: function (state, e) {
-        if (e.keyCode === 27)
-            return this.changeMode("simple_select");
-    },
-    onStop: function (state) {
-        doubleClickZoom.enable(this);
-        this.updateUIClasses({
-            mouse: "none",
-        });
-        this.activateUIButton();
-        // check to see if we've deleted this feature
-        if (this.getFeature(state.rectangle.id) === undefined)
-            return;
-        //remove last added coordinate
-        state.rectangle.removeCoordinate("0.4");
-        if (state.rectangle.isValid()) {
-            this.map.fire("draw.create", {
-                features: [state.rectangle.toGeoJSON()],
-            });
-        }
-        else {
-            this.deleteFeature([state.rectangle.id], {
-                silent: true,
-            });
-            this.changeMode("simple_select", {}, {
-                silent: true,
-            });
-        }
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        const isActivePolygon = geojson.properties.id === state.rectangle.id;
-        geojson.properties.active = isActivePolygon ? "true" : "false";
-        geojson.properties.angle = state.angle;
-        geojson.angle = state.angle;
-        if (!isActivePolygon)
-            return display(geojson);
-        const coordinateCount = geojson.geometry.coordinates[0].length;
-        if (coordinateCount < 3) {
-            const coordinates = geojson.geometry.coordinates[0][0];
-            const vertexPoint = {
-                type: "Feature",
-                properties: geojson.properties,
-                angle: state.angle,
-                geometry: {
-                    coordinates: geojson.geometry.coordinates[0][0],
-                    type: "Point",
-                },
-            };
-            if (coordinates) {
-                display(vertexPoint);
-            }
-            return;
-        }
-        if (coordinateCount >= 3 && coordinateCount <= 4) {
-            const lineCoordinates = [
-                [
-                    geojson.geometry.coordinates[0][0][0],
-                    geojson.geometry.coordinates[0][0][1],
-                ],
-                [
-                    geojson.geometry.coordinates[0][1][0],
-                    geojson.geometry.coordinates[0][1][1],
-                ],
-            ];
-            display({
-                type: "Feature",
-                properties: geojson.properties,
-                angle: state.angle,
-                geometry: {
-                    coordinates: lineCoordinates,
-                    type: "LineString",
-                },
-            });
-            if (coordinateCount === 3) {
-                return;
-            }
-        }
-        return display(geojson);
-    },
-    onTrash: function (state) {
-        this.deleteFeature([state.rectangle.id], {
-            silent: true,
-        });
-        this.changeMode("simple_select");
-    },
-};
-export default RectangleAssistedMode;

package/dist/source/components/Image/index.jsx

@@ -1,135 +0,0 @@
-import { onCleanup, createSignal, createEffect, untrack, } from 'solid-js';
-import { useMapContext } from '../MapProvider';
-const PATTERN = {
-    diagonal_l: { size: 20, path: 'M20 0 0 20M-10 10 10-10M10 30 30 10' },
-    diagonal_r: { size: 20, path: 'M0 0 20 20M30 10 10-10M10 30-10 10' },
-    horizontal: { size: 14, path: 'M7 0V20' },
-    vertical: { size: 14, path: 'M0 7H20' },
-    cross: { size: 18, path: 'M9 0V18M0 9H18' },
-    hash: { size: 30, path: 'M15 0 30 15 15 30 0 15Z' },
-    chevron_h: { size: 20, path: 'M-5 5 0 10 10 0 20 10 25 5M0 30 10 20 20 30' },
-    chevron_v: { size: 20, path: 'M5-5 10 0 0 10 10 20 5 25M25 15 20 10 25 5' },
-    square: { size: 20, path: 'M8 8H12V12H8Z', fill: true },
-    hex: { size: 50, path: 'M0 0V50L50 25ZM50 0V50L0 25ZM25 0V50' },
-    circle: {
-        size: 25,
-        path: 'M8 10A2.5 2.5 0 118.01 10M18 15A2.5 2.5 0 1018.01 15',
-        fill: true,
-    },
-};
-export const patternList = Object.keys(PATTERN);
-export const MGL_Image = props => {
-    const [ctx] = useMapContext();
-    const [size, setSize] = createSignal({ width: 0, height: 0 });
-    const debug = (text, value) => {
-        ctx.map.debug &&
-            console.debug('%c[MapGL]', 'color: #10b981', text, value || '');
-    };
-    // Remove Image
-    onCleanup(() => {
-        ctx.map?.hasImage(props.id) && ctx.map?.removeImage(props.id);
-        debug('Remove Image:', props.id);
-    });
-    // Add or Update Image
-    createEffect(() => {
-        if (!props.id)
-            throw new Error('Image - ID is required');
-        if (!props.source && !props.pattern)
-            throw new Error('Image - Image or Pattern is required');
-        const ops = props.pattern
-            ? { pixelRatio: 2, ...props.options }
-            : props.options;
-        _loadImage(props.source || _createPattern(props.pattern), data => {
-            const { width, height } = data;
-            if (ctx.map && !ctx.map.hasImage(props.id))
-                ctx.map.addImage(props.id, data, ops);
-            if (!props.pattern &&
-                untrack(() => width === size().width && height === size().height)) {
-                ctx.map.updateImage(props.id, data);
-                ctx.map.triggerRepaint();
-            }
-            else {
-                ctx.map.removeImage(props.id);
-                ctx.map.addImage(props.id, data, ops);
-            }
-            setSize({ width, height });
-            debug('Add Image:', props.id);
-            ctx.map.on('style.load', () => {
-                if (ctx.map.hasImage(props.id))
-                    return;
-                ctx.map.addImage(props.id, data, ops);
-                debug('Re-Add Image:', props.id);
-            });
-        });
-    });
-    // Load Image / SVG
-    const _loadImage = (image, callback) => {
-        if (typeof image == 'string' && image?.trimStart().startsWith('<svg')) {
-            image = new DOMParser().parseFromString(image, 'image/svg+xml')
-                .childNodes[0];
-        }
-        if (image instanceof SVGElement) {
-            props.options?.fill && image.setAttribute('fill', props.options.fill);
-            props.options?.stroke &&
-                image.setAttribute('stroke', props.options.stroke);
-            image = new XMLSerializer().serializeToString(image);
-        }
-        if (typeof image !== 'string')
-            return callback(image);
-        ctx.map.loadImage(image, async (error, imageData) => {
-            if (error) {
-                if (typeof image == 'string' && image?.trimEnd().endsWith('.svg')) {
-                    image = await (await fetch(image)).text();
-                    image = new DOMParser().parseFromString(image, 'image/svg+xml')
-                        .childNodes[0];
-                    image.setAttribute('fill', props.options.fill);
-                    image.setAttribute('stroke', props.options.stroke);
-                    image.setAttribute('transform', props.options.transform);
-                    image = new XMLSerializer().serializeToString(image);
-                }
-                const img = new Image();
-                img.crossOrigin = 'Anonymous';
-                img.onload = () => {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = Math.max(img.width, 50);
-                    canvas.height = Math.max(img.height, 50);
-                    const ctx = canvas.getContext('2d');
-                    ctx.imageSmoothingEnabled = true;
-                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-                    return callback(ctx.getImageData(0, 0, canvas.width, canvas.height));
-                };
-                img.src = image.trimStart().startsWith('<svg')
-                    ? 'data:image/svg+xml;charset=utf-8,' + image
-                    : image;
-            }
-            else {
-                return callback(imageData);
-            }
-        });
-    };
-    const _createPattern = pattern => {
-        const p = PATTERN[pattern.type];
-        return {
-            width: p.size,
-            height: p.size,
-            data: new Uint8Array(p.size * p.size * 4),
-            onAdd: function () {
-                let canvas = document.createElement('canvas');
-                canvas.width = canvas.height = p.size;
-                this.ctx = canvas.getContext('2d', { willReadFrequently: true });
-            },
-            render: function () {
-                this.ctx.fillStyle = pattern.background || 'transparent';
-                this.ctx.fillRect(0, 0, this.width, this.height);
-                this.ctx.strokeStyle = this.ctx.fillStyle = pattern.color || 'black';
-                this.ctx.lineWidth = pattern.lineWith || 1;
-                this.ctx.stroke(new Path2D(p.path));
-                if (p.fill)
-                    this.ctx.fill(new Path2D(p.path));
-                this.data = this.ctx.getImageData(0, 0, this.width, this.height).data;
-                return true;
-            },
-        };
-    };
-    return null;
-};

package/dist/source/components/Layer/index.jsx

@@ -1,125 +0,0 @@
-import { onCleanup, createEffect, createUniqueId } from "solid-js";
-import { useMapContext } from "../MapProvider";
-import { useSourceId } from "../Source";
-import { layerEvents } from "../../events";
-import { baseStyle, layoutStyles } from "../../styles";
-const diff = (newProps = {}, prevProps = {}) => {
-    const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
-    return [...keys].reduce((acc, key) => {
-        const value = newProps[key];
-        if (value !== prevProps[key]) {
-            acc.push([key, value]);
-        }
-        return acc;
-    }, []);
-};
-const newKey = (key, type) => (key.startsWith(type) || key.startsWith("icon") || key.startsWith("text")
-    ? ""
-    : type + "-") + key.replace(/[A-Z]/g, (s) => "-" + s.toLowerCase());
-const updateStyle = (oldStyle) => {
-    if (!oldStyle)
-        return;
-    let layout = {};
-    let paint = {};
-    let style = {};
-    Object.entries(oldStyle).forEach(([key, value]) => {
-        if (baseStyle.includes(key))
-            style[key] = value;
-        else {
-            const nk = newKey(key, oldStyle.type);
-            layoutStyles.includes(nk) ? (layout[nk] = value) : (paint[nk] = value);
-        }
-    });
-    if (oldStyle.paint)
-        Object.entries(oldStyle.paint).forEach(([key, value]) => (paint[newKey(key, oldStyle.type)] = value));
-    if (oldStyle.layout)
-        Object.entries(oldStyle.layout).forEach(([key, value]) => (layout[newKey(key, oldStyle.type)] = value));
-    return { ...style, paint, layout };
-};
-export const Layer = (props) => {
-    const [ctx] = useMapContext();
-    const sourceId = props.sourceId || props.style?.source || useSourceId();
-    const layerId = props.id || props.customLayer?.id || createUniqueId();
-    const debug = (text, value) => {
-        (ctx.map.debug || ctx.map.debugEvents) &&
-            console.debug("%c[MapGL]", "color: #10b981", text, value || "");
-    };
-    // Add Layer
-    ctx.map.addLayer(props.customLayer || {
-        ...updateStyle(props.style),
-        id: layerId,
-        source: sourceId,
-        slot: props.slot || "",
-        metadata: {
-            smg: { beforeType: props.beforeType, beforeId: props.beforeId },
-        },
-    }, props.beforeType
-        ? ctx.map.getStyle().layers.find((l) => l.type === props.beforeType)?.id
-        : props.beforeId);
-    ctx.map.layerIdList.push(layerId);
-    if (props.customLayer)
-        ctx.map.fire("load");
-    debug("Add Layer:", layerId);
-    // Hook up events
-    layerEvents.forEach((item) => {
-        if (props[item]) {
-            const event = item.slice(2).toLowerCase();
-            ctx.map.on(event, layerId, (evt) => {
-                evt.clickOnLayer = true;
-                props[item](evt);
-                ctx.map.debugEvent &&
-                    debug(`Layer '${event}' event on '${layerId}':`, evt);
-            });
-        }
-    });
-    // Update Style
-    createEffect((prev) => {
-        const style = updateStyle(props.style);
-        if (style === prev)
-            return;
-        if (style.layout !== prev?.layout)
-            diff(style.layout, prev?.layout).forEach(([key, value]) => ctx.map.setLayoutProperty(layerId, key, value, { validate: false }));
-        if (style.paint !== prev?.paint)
-            diff(style.paint, prev?.paint).forEach(([key, value]) => ctx.map.setPaintProperty(layerId, key, value, { validate: false }));
-        if (style.minzoom !== prev?.minzoom || style.maxzoom !== prev?.maxzoom)
-            ctx.map.setLayerZoomRange(layerId, style.minzoom, style.maxzoom);
-        if (style.filter !== prev?.filter)
-            ctx.map.setFilter(layerId, style.filter, { validate: false });
-        debug("Update Layer Style:", layerId);
-        return style;
-    }, updateStyle(props.style));
-    // Update Visibility
-    createEffect((prev) => {
-        if (props.visible === prev)
-            return;
-        ctx.map.setLayoutProperty(layerId, "visibility", props.visible ? "visible" : "none", { validate: false });
-        debug(`Update Visibility (${layerId}):`, props.visible.toString());
-        return props.visible;
-    }, props.visible);
-    // Update Filter
-    createEffect(async () => {
-        if (!props.filter)
-            return;
-        !ctx.map.isStyleLoaded() && (await ctx.map.once("styledata"));
-        ctx.map.setFilter(layerId, props.filter);
-        debug(`Update Filter (${layerId}):`, props.filter);
-    });
-    // Update Feature State
-    createEffect(async () => {
-        if (!props.featureState || props.featureState.id === null)
-            return;
-        !ctx.map.isStyleLoaded() && (await ctx.map.once("styledata"));
-        ctx.map.removeFeatureState({
-            source: sourceId,
-            sourceLayer: props.style["source-layer"],
-        });
-        ctx.map.setFeatureState({
-            source: sourceId,
-            sourceLayer: props.style["source-layer"],
-            id: props.featureState.id,
-        }, props.featureState.state);
-    });
-    //Remove Layer
-    onCleanup(() => ctx.map?.getLayer(layerId) && ctx.map?.removeLayer(layerId));
-    return props.children;
-};