Create a polygon

vanilla.html

react.html

vue.html

variables.ts

<!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="react, typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {LOCATION, POLYGON_STYLE, POLYGONS_COORDINATES} from '../variables';
            
            window.map = null;
            
            main();
            async function main() {
                // Waiting for all api elements to be loaded
                await mappable.ready;
                const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature} = mappable;
                // Initialize the map
                map = new MMap(
                    // Pass the link to the HTMLElement of the container
                    document.getElementById('app'),
                    // Pass the map initialization parameters
                    {location: LOCATION, showScaleInCopyrights: true},
                    [
                        // Add a map scheme layer
                        new MMapDefaultSchemeLayer({}),
                        // Add a layer of geo objects to display the polygons
                        new MMapDefaultFeaturesLayer({})
                    ]
                );
            
                for (const polygonCoords of POLYGONS_COORDINATES) {
                    // Create polygon objects, set their coordinates and styles, and add them to the map
                    const polygon = new MMapFeature({
                        geometry: {
                            type: 'Polygon',
                            coordinates: [polygonCoords]
                        },
                        style: POLYGON_STYLE
                    });
                    map.addChild(polygon);
                }
            }
        </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>
    </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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
            import {LOCATION, POLYGON_STYLE, POLYGONS_COORDINATES} from '../variables';
            
            window.map = null;
            
            main();
            async function main() {
                // For each object in the JS API, there is a React counterpart
                // To use the React version of the API, include the module @mappable-world/mappable-reactify
                const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
                const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
                const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature} = reactify.module(mappable);
            
                function App() {
                    return (
                        // Initialize the map and pass initialization parameters
                        <MMap location={LOCATION} showScaleInCopyrights={true} ref={(x) => (map = x)}>
                            {/* Add a map scheme layer */}
                            <MMapDefaultSchemeLayer />
                            {/* Add a layer of geo objects to display the polygons */}
                            <MMapDefaultFeaturesLayer />
            
                            {/* Add polygon objects to the map, set their coordinates and styles */}
                            {POLYGONS_COORDINATES.map((polygonCoords) => (
                                <MMapFeature
                                    geometry={{
                                        type: 'Polygon',
                                        coordinates: [polygonCoords]
                                    }}
                                    style={POLYGON_STYLE}
                                />
                            ))}
                        </MMap>
                    );
                }
            
                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>
    </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>

        <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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {POLYGONS_COORDINATES, LOCATION, POLYGON_STYLE} from '../variables';
            
            window.map = null;
            
            async function main() {
                // For each object in the JS API, there is a Vue counterpart
                // To use the Vue version of the API, include the module @mappable-world/mappable-vuefy
                const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
                const vuefy = mappableVue.vuefy.bindTo(Vue);
                const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature} = vuefy.module(mappable);
            
                const app = Vue.createApp({
                    components: {
                        MMap,
                        MMapDefaultSchemeLayer,
                        MMapDefaultFeaturesLayer,
                        MMapFeature
                    },
                    setup() {
                        const refMap = (ref) => {
                            window.map = ref?.entity;
                        };
                        return {
                            LOCATION,
                            POLYGONS_COORDINATES,
                            POLYGON_STYLE,
                            refMap
                        };
                    },
                    template: `
                      <!--Initialize the map and pass initialization parameters-->
                      <MMap :location="LOCATION" :showScaleInCopyrights="true" :ref="refMap">
                        <!--Add a map scheme layer-->
                        <MMapDefaultSchemeLayer/>
                        <!-- Add a layer of geo objects to display the polygons -->
                        <MMapDefaultFeaturesLayer/>
            
                          <!-- Add polygon objects to the map, set their coordinates and styles -->
                          <MMapFeature
                            v-for="polygonCoords in POLYGONS_COORDINATES"
                            :key="polygonCoords"
                            :geometry="{
                                type: 'Polygon',
                                coordinates: [polygonCoords]
                            }"
                            :style="POLYGON_STYLE"
                          />
                      </MMap>`
                });
                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>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

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

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

const firstPolygon: LngLat[] = [
    [55.120935205749255, 25.127138232330083],
    [55.120865584470806, 25.126868037329942],
    [55.12101578817565, 25.126487114961336],
    [55.1212089072247, 25.12630153696216],
    [55.12143421278196, 25.126047587659322],
    [55.12152004347043, 25.125822939754222],
    [55.12159514532286, 25.125637360774554],
    [55.12147712812622, 25.125305271292113],
    [55.12126255140501, 25.125051319895604],
    [55.1208441267987, 25.12491457661491],
    [55.12040424452023, 25.124895041847893],
    [55.11992144689755, 25.12490480923181],
    [55.1197283278485, 25.12502201777708],
    [55.11934208975034, 25.12502201777708],
    [55.11904168234066, 25.12491457661491],
    [55.11881637678345, 25.124728996200783],
    [55.118698359586766, 25.124396904222092],
    [55.11871981725887, 25.124064811330808],
    [55.11887002096371, 25.123820624799148],
    [55.11910605535703, 25.123615507731255],
    [55.119503022291184, 25.123576437734606],
    [55.11997509107786, 25.12372295004831],
    [55.12231397733885, 25.123683880125885],
    [55.12366581068237, 25.123566670282848],
    [55.12515711889472, 25.123224807709807],
    [55.125189305402884, 25.122902479143463],
    [55.12377309904305, 25.12283410630677],
    [55.12175607786385, 25.12258991728847],
    [55.120382786848225, 25.12225781943182],
    [55.11782932386603, 25.12160338863172],
    [55.11682081327641, 25.12111500512869],
    [55.116584778883144, 25.120890348054612],
    [55.116541863538885, 25.120480103624537],
    [55.11672425375188, 25.1201284644334],
    [55.11713194952215, 25.119942876670063],
    [55.11758256063666, 25.119874502159117],
    [55.12016821012702, 25.120997792754814],
    [55.12443828687873, 25.121759670935905],
    [55.127013207533025, 25.121691297452674],
    [55.12708830938545, 25.121544782715553],
    [55.124651577451964, 25.120723702098857],
    [55.12150802848652, 25.119405052514775],
    [55.12013473747089, 25.118687115006693],
    [55.118804361799526, 25.117851957928856],
    [55.1159504914077, 25.11579090217624],
    [55.11541404960471, 25.115409944895685],
    [55.115102913358974, 25.114960609124445],
    [55.11511364219503, 25.11479454982983],
    [55.11524238822776, 25.11453080812842],
    [55.115499880293186, 25.11430613881784],
    [55.11610069511254, 25.1140814690898],
    [55.116454746702495, 25.114032627789346],
    [55.11686244247275, 25.114110773860638],
    [55.11721649406275, 25.114276834133967],
    [55.11699118850549, 25.11458941748467],
    [55.118235733488376, 25.115644380326895],
    [55.120638928526716, 25.117591273125594],
    [55.1231602050007, 25.118900174627598],
    [55.12598188888437, 25.119964867635026],
    [55.12867482673535, 25.12052162996883],
    [55.128803572768035, 25.12033604280919],
    [55.124758801573584, 25.11831410108039],
    [55.12199076187024, 25.116399574397683],
    [55.120295605772824, 25.11478783196743],
    [55.11778505813484, 25.112023399506583],
    [55.11639030944706, 25.110294376028104],
    [55.115821681135905, 25.1095812687487],
    [55.11575730811959, 25.109229597857237],
    [55.115961156004694, 25.108926769325674],
    [55.116304478758586, 25.10865324612924],
    [55.116798005217376, 25.10833087871068],
    [55.117549023741525, 25.10834064743297],
    [55.11792453300363, 25.10857509653094],
    [55.117999634856, 25.10882908254081],
    [55.1182034827411, 25.10914167993494],
    [55.11824639808542, 25.10968872353935],
    [55.118418059462364, 25.109913401429406],
    [55.118761382216256, 25.11026507033234],
    [55.11882575523262, 25.110616738212617],
    [55.119812808150144, 25.11230668352167],
    [55.1213363028706, 25.114084519525324],
    [55.123138747328596, 25.115745111999537],
    [55.12422235977059, 25.116497255185344],
    [55.1272049761952, 25.11844108408183],
    [55.12993010055429, 25.119505781132926],
    [55.13008030425913, 25.119378799408324],
    [55.127591214293304, 25.117571737333336],
    [55.12575658332715, 25.115999082988747],
    [55.12391122352491, 25.11379147151309],
    [55.12216242324723, 25.110978173737816],
    [55.1211324549855, 25.108829082699234],
    [55.1207569457234, 25.107373540297726],
    [55.12042435180556, 25.105546760901895],
    [55.12041362296951, 25.105048543550854],
    [55.120585284346454, 25.104648014388466],
    [55.120821318739765, 25.10431586724786],
    [55.12116464149366, 25.10435494342939],
    [55.12154015075576, 25.104599169277943],
    [55.12179764282118, 25.104902008645308],
    [55.12209805023086, 25.107031631854102],
    [55.12258084785354, 25.10865324636697],
    [55.123181662672906, 25.110186922052954],
    [55.12431891929522, 25.11227737855132],
    [55.12584241401568, 25.114231043581942],
    [55.12846025001424, 25.116897745340047],
    [55.13100298416033, 25.118607138605267],
    [55.131346306914224, 25.118480155936673],
    [55.128996691817186, 25.116047923692925],
    [55.12854723032346, 25.115367361244076],
    [55.127206125816, 25.113423482925764],
    [55.12632636125916, 25.111362351718007],
    [55.12547878321048, 25.10954540119833],
    [55.124727764686334, 25.106478014224066],
    [55.12454537447333, 25.104856370545892],
    [55.12456683214543, 25.10397715705286],
    [55.12477068003059, 25.10370362266278],
    [55.125307121833536, 25.103273781617517],
    [55.125875750144694, 25.103840389974795],
    [55.12596158083316, 25.104196961025245],
    [55.12600449617743, 25.104543762036098],
    [55.12600449617743, 25.105325281835402],
    [55.12666968401316, 25.108734602760144],
    [55.12738851602916, 25.111000917618465],
    [55.12883690889725, 25.113638385781123],
    [55.130349674781606, 25.11572878260851],
    [55.13210920389538, 25.11763355198328],
    [55.13237742479691, 25.117535872232583],
    [55.131368914207286, 25.115621333225043],
    [55.13017801340471, 25.113091360163484],
    [55.129298248847824, 25.10989707140927],
    [55.12916950281514, 25.108705296884597],
    [55.128869095405456, 25.105012674775335],
    [55.129008570274245, 25.10433861254],
    [55.12952355440508, 25.10383062112689],
    [55.12977031763445, 25.1036547774484],
    [55.13016728456866, 25.10397715733039],
    [55.13038186128987, 25.10426046015377],
    [55.13052133615861, 25.104778218771692],
    [55.13047842081445, 25.108353623485517],
    [55.130843201240445, 25.110532028611704],
    [55.13136623199835, 25.1124661850271],
    [55.131822207530895, 25.113736068879096],
    [55.13239083584205, 25.11513780983778],
    [55.13345299061194, 25.11682769191744],
    [55.133549550136465, 25.116822807899243],
    [55.13320622738257, 25.11574831913437],
    [55.132691243251735, 25.11393143456049],
    [55.13231365679878, 25.11185587184188],
    [55.132297563544654, 25.109970548625363],
    [55.132489501674975, 25.10813130271915],
    [55.13273626490434, 25.1065096812476],
    [55.13297766371568, 25.105239721509708],
    [55.133165418346756, 25.104971074471845],
    [55.13359993620715, 25.10481477046616],
    [55.13391107245288, 25.10486361548965],
    [55.13410955591996, 25.10493688298787],
    [55.13434022589525, 25.105151800726627],
    [55.13448506518206, 25.105405793925545],
    [55.13453870936238, 25.105708631313032],
    [55.134023725231536, 25.107584252188783],
    [55.133637487133385, 25.109498918496637],
    [55.133680402477644, 25.110260869105378],
    [55.1335301987728, 25.110573462838104],
    [55.1337018601498, 25.111774987555155],
    [55.13390570803491, 25.113953331047238],
    [55.134367047985485, 25.115701838500165],
    [55.13458162470669, 25.11588743277458],
    [55.134892760952425, 25.11579951973275],
    [55.13543993159142, 25.11627815663153],
    [55.135847627361684, 25.116688415322287],
    [55.136180221279574, 25.11713774467183],
    [55.13600855990258, 25.117460088611146],
    [55.13658791704984, 25.117938718935456],
    [55.13822942896698, 25.118495490641273],
    [55.14026697284055, 25.119092193384684],
    [55.140524464905965, 25.119023818353007],
    [55.141103822053225, 25.11931685380084],
    [55.141972857774014, 25.119463371238613],
    [55.14423664218258, 25.119551281616],
    [55.145717221558826, 25.119473139061466],
    [55.14626439219788, 25.119346157302605],
    [55.146822291672976, 25.119258246776003],
    [55.147208529771085, 25.119375460797244],
    [55.147541123688924, 25.11971733437666],
    [55.14774497157408, 25.120029903660253],
    [55.14784153109861, 25.12034247213555],
    [55.14772351390197, 25.12059643342659],
    [55.14747675067261, 25.120733181593057],
    [55.14689739352535, 25.120791787902732],
    [55.144225913346524, 25.120811323332987],
    [55.14153297549559, 25.120606201276406],
    [55.13804610377625, 25.119639192047977],
    [55.13504202967953, 25.118388905983238],
    [55.134913283646846, 25.118467049278195],
    [55.13709123736694, 25.119912690392113],
    [55.138228493989246, 25.120537827140673],
    [55.1417368233807, 25.122081119684594],
    [55.1426702321179, 25.12230577454532],
    [55.14477308398557, 25.122833223446772],
    [55.146103459656985, 25.122989504160703],
    [55.14704759723019, 25.123096947034302],
    [55.14757331019713, 25.123243459889853],
    [55.147927361787076, 25.123468112590004],
    [55.14814193850829, 25.123800207120944],
    [55.1481848538525, 25.124112765845886],
    [55.14799173480345, 25.124298347206334],
    [55.14761622554134, 25.124464393445155],
    [55.14712269908261, 25.124562067596738],
    [55.144182998002314, 25.124024858825727],
    [55.14142832624876, 25.123263993743777],
    [55.137952183365464, 25.121808625079026],
    [55.13667051201668, 25.121042433042767],
    [55.13397757416575, 25.11912794949237],
    [55.133720082100325, 25.119401449032868],
    [55.13477150803416, 25.120485673147467],
    [55.13590876465647, 25.121696866919777],
    [55.1387948215565, 25.12407038080711],
    [55.14102610774927, 25.125322303571366],
    [55.142495958289416, 25.12602555070809],
    [55.14377268978052, 25.12646507809028],
    [55.146197406729975, 25.12715855137554],
    [55.14708790012291, 25.12738319679762],
    [55.14737757869649, 25.12755900596704],
    [55.1475706977456, 25.12773481488068],
    [55.14765652843407, 25.128008294904543],
    [55.14766725727012, 25.128262240086755],
    [55.14736684986044, 25.12841851377978],
    [55.146969882926236, 25.128574787270644],
    [55.14621886440213, 25.128545486045994],
    [55.1448241157144, 25.128252473013706],
    [55.14300021358426, 25.127539471666996],
    [55.14081153102811, 25.12658228516166],
    [55.138526288947446, 25.12525393218265],
    [55.13574752040804, 25.123173467597983],
    [55.13403090663847, 25.12139576525848],
    [55.13261470027864, 25.1199403740976],
    [55.132464496573796, 25.120038051905315],
    [55.13257178493438, 25.120467833321495],
    [55.13274344631132, 25.120790168380783],
    [55.133859245261526, 25.122880441539607],
    [55.13570460506378, 25.125068352329137],
    [55.13697060771882, 25.12635763832962],
    [55.13825806804597, 25.127353895441935],
    [55.141262490307575, 25.129322956410938],
    [55.14325805381467, 25.130338722885153],
    [55.14435239509271, 25.130651264697565],
    [55.14533944801023, 25.130973572594844],
    [55.14566131309202, 25.131012640160318],
    [55.1459509916656, 25.131159143418376],
    [55.14613338187865, 25.13135448081939],
    [55.145972449337755, 25.13165725316683],
    [55.14551110938718, 25.13197955838028],
    [55.1450283117645, 25.132126060465794],
    [55.1444918699615, 25.13218466125023],
    [55.1439339704864, 25.13200885881162],
    [55.14185257629089, 25.13107124152428],
    [55.141412694012466, 25.13103217397774],
    [55.1408118791931, 25.13058289628459],
    [55.140296895062264, 25.13039732457595],
    [55.13999648765258, 25.130143383881208],
    [55.13719626144107, 25.128180208998835],
    [55.13459086059506, 25.125678296968207],
    [55.13293861984186, 25.123441559761847],
    [55.13145804046566, 25.12088244720456],
    [55.13124346374445, 25.1209215180326],
    [55.13181087217925, 25.12304954678742],
    [55.132647721391926, 25.125237454515474],
    [55.13350602827671, 25.12684905761155],
    [55.13505098066928, 25.12914433404544],
    [55.136145321947374, 25.130374974921903],
    [55.13756152830721, 25.131810706768064],
    [55.13884898863436, 25.132611583825213],
    [55.14010426245335, 25.133431988923494],
    [55.14040466986303, 25.133422222228912],
    [55.140565602403925, 25.133617555970694],
    [55.14073726378087, 25.133988689209932],
    [55.14080163679724, 25.13459421994182],
    [55.14070507727266, 25.134955583609738],
    [55.14054414473177, 25.135150914872035],
    [55.14026519499424, 25.135277880023118],
    [55.13983604155183, 25.135258346892225],
    [55.139224497896464, 25.134955583609738],
    [55.136477915865214, 25.132523682987877],
    [55.134780772823696, 25.130749172576525],
    [55.132195123333396, 25.127066991026172],
    [55.13105786671109, 25.124586094538405],
    [55.13024247517057, 25.121909794766076],
    [55.129920610088774, 25.121929330015632],
    [55.129945327327924, 25.123486413902548],
    [55.13037448077034, 25.126123609627136],
    [55.130814363048806, 25.127588693534538],
    [55.1315149429101, 25.12937934475249],
    [55.13267365720457, 25.13134250034802],
    [55.13472176008544, 25.133857880766353],
    [55.134839777282075, 25.134238779896577],
    [55.13472176008544, 25.13461967782572],
    [55.13404584341366, 25.13513730641966],
    [55.133541588118874, 25.135234971943362],
    [55.133251909545244, 25.135117773305442],
    [55.1317820590051, 25.13308631222041],
    [55.13047314100584, 25.130351599067538],
    [55.12919640951479, 25.126786612234604],
    [55.128885273269056, 25.125145706217186],
    [55.128692154220005, 25.123045704703447],
    [55.12837028913822, 25.12301640205907],
    [55.12776947431891, 25.125565702180506],
    [55.12767291479438, 25.127343343181852],
    [55.127694372466486, 25.128837713461216],
    [55.12784457617138, 25.129921852919505],
    [55.1284668486628, 25.131631061974264],
    [55.128509764007056, 25.13203150174225],
    [55.12824154310554, 25.132471007276795],
    [55.12770510130259, 25.132773776825974],
    [55.1273832362208, 25.1326858760673],
    [55.12713647299149, 25.132480774087746],
    [55.12685752325391, 25.131826398651736],
    [55.126771692565434, 25.131152485915834],
    [55.126546387008176, 25.129326065833766],
    [55.12642836981159, 25.12664987107551],
    [55.12673950605728, 25.12449129121274],
    [55.12641764097549, 25.12454989570008],
    [55.12590265684465, 25.12543872694101],
    [55.12549496107439, 25.126542431360658],
    [55.125022892287866, 25.12828098959675],
    [55.12488341741908, 25.129247929678414],
    [55.1249799769436, 25.129443270169496],
    [55.12499070577965, 25.129580008325362],
    [55.12484050207482, 25.12990231908044],
    [55.1246044676815, 25.130068357618708],
    [55.12431478910792, 25.130205095067105],
    [55.12401438169824, 25.13016602724051],
    [55.123713974288556, 25.130068357618708],
    [55.12348866873135, 25.12983395020424],
    [55.123370651534664, 25.129550707304997],
    [55.12340283804288, 25.129140492313162],
    [55.12355304174772, 25.1288084124582],
    [55.12373543196072, 25.128232154073245],
    [55.1236925166165, 25.127743797358296],
    [55.1235101264035, 25.127470316735803],
    [55.123241905501985, 25.12729450743732],
    [55.122898582748086, 25.12726520586269],
    [55.12245870046967, 25.12738241211852],
    [55.12205100469941, 25.12764612581793],
    [55.121407274535834, 25.12756798849721],
    [55.120935205749255, 25.127138232330083]
];
const secondPolygon: LngLat[] = [
    [-304.8312092, 25.1120259],
    [-304.8285055, 25.1095777],
    [-304.8084641, 25.1303271],
    [-304.8118114, 25.1325805],
    [-304.8312521, 25.1120259]
];
const thirdPolygon: LngLat[] = [
    [-304.804945, 25.1280736],
    [-304.7955894, 25.14004],
    [-304.7863197, 25.1341346],
    [-304.7905254, 25.1287341],
    [-304.795332, 25.125548],
    [-304.7974348, 25.1247321],
    [-304.7997093, 25.1246155],
    [-304.8049879, 25.1281124]
];
const fourthPolygon: LngLat[] = [
    [-304.8007393, 25.1056917],
    [-304.8000956, 25.0985022],
    [-304.7979498, 25.0969476],
    [-304.7966623, 25.0965979],
    [-304.7965336, 25.0951599],
    [-304.7959328, 25.093994],
    [-304.8022842, 25.08556],
    [-304.8113394, 25.0898742],
    [-304.8179913, 25.097142],
    [-304.8110819, 25.1047979],
    [-304.8007822, 25.105614]
];

export const POLYGONS_COORDINATES: LngLat[][] = [firstPolygon, secondPolygon, thirdPolygon, fourthPolygon];

export const POLYGON_STYLE = {
    stroke: [
        {
            color: 'rgba(46, 76, 229, 0.60)',
            width: 3
        }
    ],
    fill: 'rgba(18, 45, 178, 0.10)'
};