Lasso

Open in CodeSandbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {LOCATION} from '../variables';
            import {
                InfoMessage,
                DrawButton,
                drawLineOverMap,
                transformCoordinates,
                getBoundingBox,
                POLYGON_OPTIONS,
                BOUNDING_BOX_OPTIONS,
                DRAW_BUTTON_TEXT,
                INFO_MESSAGE_TEXT
            } from './common';
            import {DomEventHandlerObject} from '@mappable-world/mappable-types';
            import {MapEvent} from '@mappable-world/mappable-types/imperative/MMapFeature/types';
            
            window.map = null;
            
            async function main() {
                // Waiting for all API elements to be loaded
                await mappable.ready;
                const {
                    MMap,
                    MMapDefaultSchemeLayer,
                    MMapDefaultFeaturesLayer,
                    MMapControls,
                    MMapControl,
                    MMapListener,
                    MMapFeature,
                    MMapMarker
                } = mappable;
            
                let polygonCoordinates = null;
                let boundingBoxCoordinates = null;
                let currentBoundingBox = null;
                let currentPolygon = null;
                let deleteMarker = null;
            
                const handleMapClick = (object: DomEventHandlerObject) => {
                    if (object?.type === 'feature') {
                        updateBoundingBox();
                        createDeleteMarker();
                    } else {
                        if (currentBoundingBox) {
                            map.removeChild(currentBoundingBox);
                            currentBoundingBox = null;
                        }
                        if (deleteMarker) {
                            map.removeChild(deleteMarker);
                            deleteMarker = null;
                        }
                    }
                };
            
                const updateBoundingBox = () => {
                    if (currentBoundingBox) {
                        map.removeChild(currentBoundingBox);
                    }
            
                    currentBoundingBox = new MMapFeature({
                        geometry: {
                            type: 'Polygon',
                            coordinates: [boundingBoxCoordinates]
                        },
                        style: BOUNDING_BOX_OPTIONS
                    });
            
                    map.addChild(currentBoundingBox);
                };
            
                const createDeleteMarker = () => {
                    if (deleteMarker) {
                        map.removeChild(deleteMarker);
                    }
            
                    const button = document.createElement('button');
                    button.className = 'delete-button';
            
                    // Recalculate the coordinates of the marker so that it ends up on the top right of the polygon
                    deleteMarker = new MMapMarker(
                        {
                            coordinates: [boundingBoxCoordinates[2][0] + 0.001, boundingBoxCoordinates[2][1]],
                            onClick: handleDeleteClick
                        },
                        button
                    );
            
                    map.addChild(deleteMarker);
                };
            
                const removeShapes = () => {
                    if (currentBoundingBox) {
                        map.removeChild(currentBoundingBox);
                        currentBoundingBox = null;
                    }
                    if (deleteMarker) {
                        map.removeChild(deleteMarker);
                        deleteMarker = null;
                    }
                    if (currentPolygon) {
                        map.removeChild(currentPolygon);
                        currentPolygon = null;
                    }
                };
            
                const handleDeleteClick = (event: MouseEvent, mapEvent: MapEvent) => {
                    mapEvent.stopPropagation();
                    polygonCoordinates = null;
                    boundingBoxCoordinates = null;
                    removeShapes();
                };
            
                const handleDrawClick = async () => {
                    const drawButton = document.querySelector('#draw-button');
                    drawButton.classList.add('active');
            
                    const coordinates = await drawLineOverMap(map);
                    const transformedCoordinates = transformCoordinates(map.bounds, coordinates);
            
                    removeShapes();
            
                    boundingBoxCoordinates = getBoundingBox(transformedCoordinates);
                    polygonCoordinates = transformedCoordinates;
            
                    drawButton.classList.remove('active');
            
                    if (currentPolygon) {
                        currentPolygon.update({
                            coordinates: [polygonCoordinates]
                        });
                    } else {
                        currentPolygon = new MMapFeature({
                            id: 'polygon',
                            geometry: {
                                type: 'Polygon',
                                coordinates: [polygonCoordinates]
                            },
                            style: POLYGON_OPTIONS
                        });
                    }
            
                    map.addChild(currentPolygon);
                };
            
                const app = document.getElementById('app');
            
                // Initialize the map
                map = new MMap(app, {location: LOCATION, showScaleInCopyrights: true}, [
                    new MMapDefaultSchemeLayer({}),
                    new MMapDefaultFeaturesLayer({})
                ]);
            
                map.addChild(new MMapListener({onClick: handleMapClick}));
            
                map.addChild(
                    new MMapControls({position: 'top left'}).addChild(
                        new MMapControl({}).addChild(new InfoMessage({text: INFO_MESSAGE_TEXT}))
                    )
                );
            
                map.addChild(
                    new MMapControls({position: 'top right'}).addChild(
                        new MMapControl({}).addChild(
                            new DrawButton({
                                text: DRAW_BUTTON_TEXT,
                                onClick: handleDrawClick
                            })
                        )
                    )
                );
            
                const canvas = document.createElement('canvas');
                canvas.id = 'draw-canvas';
                canvas.className = 'canvas';
                app.appendChild(canvas);
            }
            
            main();
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
            import {
                BOUNDING_BOX_OPTIONS,
                DRAW_BUTTON_TEXT,
                drawLineOverMap,
                getBoundingBox,
                INFO_MESSAGE_TEXT,
                POLYGON_OPTIONS,
                transformCoordinates
            } from './common';
            import {LOCATION} from '../variables';
            import {DomEventHandlerObject, LngLat} from '@mappable-world/mappable-types';
            
            window.map = null;
            
            main();
            // Importing React API for Mappable Maps
            async function main() {
                const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
            
                const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
                const {
                    MMap,
                    MMapDefaultSchemeLayer,
                    MMapDefaultFeaturesLayer,
                    MMapControls,
                    MMapControl,
                    MMapFeature,
                    MMapListener,
                    MMapMarker
                } = reactify.module(mappable);
            
                const {useState, useMemo} = React;
            
                function App() {
                    const [drawMode, setDrawMode] = useState(false);
                    const [polygonCoordinates, setPolygonCoordinates] = useState(null);
                    const [boundingBoxCoordinates, setBoundingBoxCoordinates] = useState(null);
                    const [showBoundingBox, setShowBoundingBox] = useState(false);
            
                    const handleClick = async () => {
                        setDrawMode(true);
                        const coordinates = await drawLineOverMap(map);
                        const transformedCoordinates = transformCoordinates(map.bounds, coordinates);
                        const boxCoordinates = getBoundingBox(transformedCoordinates);
            
                        setBoundingBoxCoordinates(boxCoordinates);
                        setPolygonCoordinates(transformedCoordinates);
            
                        setShowBoundingBox(false);
                        setDrawMode(false);
                    };
            
                    const handlePolygonClick = () => {
                        setShowBoundingBox(true);
                    };
            
                    const handleMapClick = (object: DomEventHandlerObject) => {
                        object?.type !== 'feature' && setShowBoundingBox(false);
                    };
            
                    const handleDelete = () => {
                        setPolygonCoordinates(null);
                        setBoundingBoxCoordinates(null);
                    };
            
                    // Computed classes for draw button
                    const drawButtonClassNames = useMemo(() => {
                        const classList = ['draw-button'];
                        if (drawMode) classList.push('active');
                        return classList.join(' ');
                    }, [drawMode]);
            
                    // Recalculate the coordinates of the marker so that it ends up on the top right of the polygon
                    const deleteButtonCoordinates: LngLat = useMemo(() => {
                        return boundingBoxCoordinates && [boundingBoxCoordinates[2][0] + 0.001, boundingBoxCoordinates[2][1]];
                    }, [boundingBoxCoordinates]);
            
                    return (
                        <>
                            <MMap location={LOCATION} showScaleInCopyrights ref={(x) => (map = x)}>
                                <MMapDefaultSchemeLayer />
                                <MMapDefaultFeaturesLayer />
            
                                {polygonCoordinates && (
                                    <MMapFeature
                                        geometry={{
                                            type: 'Polygon',
                                            coordinates: [polygonCoordinates]
                                        }}
                                        style={POLYGON_OPTIONS}
                                        onClick={handlePolygonClick}
                                    />
                                )}
                                {boundingBoxCoordinates && showBoundingBox && (
                                    <MMapFeature
                                        geometry={{
                                            type: 'Polygon',
                                            coordinates: [boundingBoxCoordinates]
                                        }}
                                        style={BOUNDING_BOX_OPTIONS}
                                    />
                                )}
            
                                {boundingBoxCoordinates && showBoundingBox && (
                                    <MMapMarker disableRoundCoordinates coordinates={deleteButtonCoordinates}>
                                        <button onClick={handleDelete} className="delete-button"></button>
                                    </MMapMarker>
                                )}
            
                                {/* Create Info Message */}
                                <MMapControls position="top left">
                                    <MMapControl>
                                        <div className="info-window">{INFO_MESSAGE_TEXT}</div>
                                    </MMapControl>
                                </MMapControls>
                                <MMapControls position="top right">
                                    <MMapControl>
                                        <button className={drawButtonClassNames} onClick={handleClick} disabled={drawMode}>
                                            {DRAW_BUTTON_TEXT}
                                        </button>
                                    </MMapControl>
                                </MMapControls>
            
                                <MMapListener onClick={handleMapClick} />
                            </MMap>
                            <canvas id="draw-canvas" className="canvas" />
                        </>
                    );
                }
            
                ReactDOM.render(
                    <React.StrictMode>
                        <App />
                    </React.StrictMode>,
                    document.getElementById('app')
                );
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {DomEventHandlerObject} from '@mappable-world/mappable-types';
            import {
                BOUNDING_BOX_OPTIONS,
                drawLineOverMap,
                getBoundingBox,
                POLYGON_OPTIONS,
                transformCoordinates,
                DRAW_BUTTON_TEXT,
                INFO_MESSAGE_TEXT
            } from './common';
            import {LOCATION} from '../variables';
            
            window.map = null;
            
            async function main() {
                // Importing Vue API for Mappable Maps
                const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
                const vuefy = mappableVue.vuefy.bindTo(Vue);
                const {
                    MMap,
                    MMapDefaultSchemeLayer,
                    MMapDefaultFeaturesLayer,
                    MMapListener,
                    MMapControls,
                    MMapControl,
                    MMapFeature,
                    MMapMarker
                } = vuefy.module(mappable);
            
                const app = Vue.createApp({
                    components: {
                        MMap,
                        MMapDefaultSchemeLayer,
                        MMapDefaultFeaturesLayer,
                        MMapListener,
                        MMapControls,
                        MMapControl,
                        MMapFeature,
                        MMapMarker
                    },
                    setup() {
                        const refMap = (ref) => {
                            window.map = ref?.entity;
                        };
                        const drawMode = Vue.ref(false);
                        const polygonCoordinates = Vue.ref(null);
                        const boundingBoxCoordinates = Vue.ref(null);
                        const showBoundingBox = Vue.ref(false);
            
                        // Recalculate the coordinates of the marker so that it ends up on the top right of the polygon
                        const deleteButtonCoordinates = Vue.computed(() => {
                            if (boundingBoxCoordinates.value) {
                                const [lng, lat] = boundingBoxCoordinates.value[2];
                                return [lng + 0.001, lat];
                            }
                            return null;
                        });
            
                        const handleClick = async () => {
                            drawMode.value = true;
                            const coordinates = await drawLineOverMap(map);
                            const transformedCoordinates = transformCoordinates(map.bounds, coordinates);
            
                            // Reset polygon and bounding box
                            polygonCoordinates.value = null;
                            boundingBoxCoordinates.value = null;
            
                            boundingBoxCoordinates.value = getBoundingBox(transformedCoordinates);
                            polygonCoordinates.value = transformedCoordinates;
                            drawMode.value = false;
                        };
            
                        const handlePolygonClick = () => {
                            showBoundingBox.value = true;
                        };
            
                        const handleMapClick = (object: DomEventHandlerObject) => {
                            if (object?.type !== 'feature') {
                                showBoundingBox.value = false;
                            }
                        };
            
                        const handleDelete = () => {
                            polygonCoordinates.value = null;
                            boundingBoxCoordinates.value = null;
                        };
            
                        return {
                            LOCATION,
                            INFO_MESSAGE_TEXT,
                            DRAW_BUTTON_TEXT,
                            refMap,
                            drawMode,
                            polygonCoordinates,
                            boundingBoxCoordinates,
                            showBoundingBox,
                            deleteButtonCoordinates,
                            handleClick,
                            handlePolygonClick,
                            handleMapClick,
                            handleDelete,
                            POLYGON_OPTIONS,
                            BOUNDING_BOX_OPTIONS
                        };
                    },
                    template: `
                  <MMap :location="LOCATION" showScaleInCopyrights :ref="refMap">
                    <MMapDefaultSchemeLayer/>
                    <MMapDefaultFeaturesLayer/>
            
                    <!-- Polygon Feature -->
                    <MMapFeature
                      v-if="polygonCoordinates"
                      :geometry="{
                        type: 'Polygon',
                        coordinates: [polygonCoordinates]
                      }"
                      :style="POLYGON_OPTIONS"
                      @click="handlePolygonClick"
                    />
            
                    <!-- Bounding Box Feature -->
                    <MMapFeature
                      v-if="boundingBoxCoordinates && showBoundingBox"
                      :geometry="{
                        type: 'Polygon',
                        coordinates: [boundingBoxCoordinates]
                      }"
                      :style="BOUNDING_BOX_OPTIONS"
                    />
            
                    <!-- Delete Marker -->
                    <MMapMarker
                      v-if="boundingBoxCoordinates && showBoundingBox"
                      :coordinates="deleteButtonCoordinates"
                    >
                      <button @click="handleDelete" class="delete-button"></button>
                    </MMapMarker>
            
                    <!-- Controls -->
                    <MMapControls position="top left">
                      <MMapControl>
                        <div class="info-window">{{INFO_MESSAGE_TEXT}}</div>
                      </MMapControl>
                    </MMapControls>
            
                    <MMapControls position="top right">
                      <MMapControl>
                        <button
                          :class="{'draw-button': true, active: drawMode}"
                          :disabled="drawMode"
                          @click="handleClick"
                        >
                          {{DRAW_BUTTON_TEXT}}
                        </button>
                      </MMapControl>
                    </MMapControls>
                    <MMapListener @click="handleMapClick" />
                  </MMap>
                  <canvas id="draw-canvas" class="canvas"></canvas>
                `
                });
                app.mount('#app');
            }
            
            main();
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

import type {MMapLocationRequest} from '@mappable-world/mappable-types';

export const LOCATION: MMapLocationRequest = {
    center: [55.169014, 25.114102], // starting position [lng, lat]
    zoom: 13 // starting zoom
};

import {LngLat, LngLatBounds, MMap} from '@mappable-world/mappable-types';

export const INFO_MESSAGE_TEXT = 'Select the instrument and draw on a map';
export const DRAW_BUTTON_TEXT = 'Pencil selection';

export const POLYGON_OPTIONS = {
    cursor: 'pointer',
    stroke: [{width: 3, color: '#2E4CE599'}],
    fill: '#122DB21A'
};
export const BOUNDING_BOX_OPTIONS = {
    stroke: [{width: 1, color: '#122DB2'}],
    fillOpacity: 0
};

export const CANVAS_OPTIONS = {
    strokeStyle: '#2E4CE599',
    lineWidth: 4,
    opacity: '0.7'
};

export function drawLineOverMap(map: MMap): Promise<LngLatBounds> {
    const canvas: HTMLCanvasElement = document.querySelector('#draw-canvas');
    const ctx2d = canvas.getContext('2d');
    let drawing = false;
    let coordinates = [];

    // Set the canvas dimensions to match the map.
    const rect = map.container;
    canvas.style.width = rect.offsetWidth + 'px';
    canvas.style.height = rect.offsetHeight + 'px';
    canvas.width = rect.offsetWidth;
    canvas.height = rect.offsetHeight;

    // Apply styles.
    ctx2d.strokeStyle = CANVAS_OPTIONS.strokeStyle;
    ctx2d.lineWidth = CANVAS_OPTIONS.lineWidth;
    canvas.style.opacity = CANVAS_OPTIONS.opacity;

    ctx2d.clearRect(0, 0, canvas.width, canvas.height);

    // Show the canvas. It will be on top of the map due to position: absolute.
    canvas.style.display = 'block';

    canvas.onmousedown = function (e) {
        // When the mouse is pressed, remember that we started drawing and the coordinates.
        drawing = true;
        coordinates.push([e.offsetX, e.offsetY]);
    };

    canvas.onmousemove = function (e) {
        // When the mouse moves, remember the coordinates and draw the line.
        if (drawing) {
            var last = coordinates[coordinates.length - 1];
            ctx2d.beginPath();
            ctx2d.moveTo(last[0], last[1]);
            ctx2d.lineTo(e.offsetX, e.offsetY);
            ctx2d.stroke();

            coordinates.push([e.offsetX, e.offsetY]);
        }
    };

    return new Promise(function (resolve) {
        // When the mouse is released, remember the coordinates and hide the canvas.
        canvas.onmouseup = function (e) {
            coordinates.push([e.offsetX, e.offsetY]);
            canvas.style.display = 'none';
            drawing = false;

            coordinates = coordinates.map(function (x) {
                return [x[0] / canvas.width, x[1] / canvas.height];
            });

            resolve(coordinates as LngLatBounds);
        };
    });
}

type BoundingBox = [LngLat, LngLat, LngLat, LngLat];

export const getBoundingBox = (points: LngLatBounds): BoundingBox => {
    let minLongitude = points[0][0];
    let maxLongitude = points[0][0];
    let minLatitude = points[0][1];
    let maxLatitude = points[0][1];

    points.forEach(([longitude, latitude]) => {
        if (longitude < minLongitude) {
            minLongitude = longitude;
        }
        if (longitude > maxLongitude) {
            maxLongitude = longitude;
        }
        if (latitude < minLatitude) {
            minLatitude = latitude;
        }
        if (latitude > maxLatitude) {
            maxLatitude = latitude;
        }
    });

    // The four corners of the bounding box
    const bottomLeft: LngLat = [minLongitude, minLatitude];
    const bottomRight: LngLat = [maxLongitude, minLatitude];
    const topLeft: LngLat = [minLongitude, maxLatitude];
    const topRight: LngLat = [maxLongitude, maxLatitude];

    return [bottomLeft, bottomRight, topRight, topLeft];
};

export const transformCoordinates = (bounds: LngLatBounds, coordinates: LngLatBounds): LngLatBounds => {
    return coordinates
        .map((x) => [
            bounds[0][0] + x[0] * (bounds[1][0] - bounds[0][0]),
            bounds[0][1] + x[1] * (bounds[1][1] - bounds[0][1])
        ])
        .filter((_, index) => index % 5 === 0) as LngLatBounds; // Simplify by keeping every 5th point
};

// Create a custom information message control
export let InfoMessage = null;
export let DrawButton = null;

interface InfoMessageProps {
    text: string;
}

// Wait for the api to load to access the entity system (MMapComplexEntity)
mappable.ready.then(() => {
    class InfoMessageClass extends mappable.MMapComplexEntity<InfoMessageProps> {
        private _element!: HTMLDivElement;
        private _detachDom!: () => void;

        // Method for create a DOM control element
        _createElement(props: InfoMessageProps) {
            // Create a root element
            const infoWindow = document.createElement('div');
            infoWindow.classList.add('info-window');
            infoWindow.innerText = props.text;

            return infoWindow;
        }

        // Method for attaching the control to the map
        _onAttach() {
            this._element = this._createElement(this._props);
            this._detachDom = mappable.useDomContext(this, this._element, this._element);
        }

        // Method for detaching control from the map
        _onDetach() {
            this._detachDom();
            this._detachDom = undefined;
            this._element = undefined;
        }
    }

    class DrawButtonClass extends mappable.MMapComplexEntity<{}> {
        private _element;
        private _detachDom;

        // Method to create a DOM control element for the button
        _createElement(props) {
            const drawButton = document.createElement('button');
            drawButton.className = 'draw-button';
            drawButton.id = 'draw-button';
            drawButton.innerText = props.text;
            drawButton.onclick = props.onClick;

            return drawButton;
        }

        // Method for attaching the control to the map
        _onAttach() {
            this._element = this._createElement(this._props);
            this._detachDom = mappable.useDomContext(this, this._element, this._element);
        }

        // Method for detaching control from the map
        _onDetach() {
            this._detachDom();
            this._detachDom = undefined;
            this._element = undefined;
        }
    }

    InfoMessage = InfoMessageClass;
    DrawButton = DrawButtonClass;
});

.info-window {
    padding: 8px 12px 8px 32px;
    border-radius: 8px;
    background-color: #313133;
    background-image: url('./info-icon.svg');
    background-position: 8px 50%;
    background-repeat: no-repeat;
    gap: 8px;
    color: #f2f5fa;
    font-size: 14px;
    line-height: 20px;
}

.draw-button {
    padding: 8px 12px 8px 32px;
    border-radius: 8px;
    background-color: #fff;
    background-image: url('./lasso-icon.svg');
    background-position: 8px 50%;
    background-repeat: no-repeat;
    gap: 8px;
    color: #34374a;
    border-color: unset;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    box-shadow: 0px 2px 4px 0px #5f698333;
    box-shadow: 0px 0px 2px 0px #5f698314;
    border: unset;
    transition: background-color 0.1s;
}

.draw-button.active,
.draw-button:hover {
    color: #122db2;
    background-image: url('./lasso-icon-blue.svg');
}

.delete-button {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    background-color: #fff;
    background-image: url('./trash-icon.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-color: unset;
    cursor: pointer;
    box-shadow: 0px 2px 4px 0px #5f698333;
    border: unset;
}

.canvas {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}