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>

    <!-- prettier-ignore -->
    <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=not_var{{
                                  type: 'Polygon',
                                  coordinates: [polygonCoords]
                              }}
                              style={POLYGON_STYLE}
                          />
                      ))}
                  </MMap>
              );
          }

          ReactDOM.render(
              <React.StrictMode>
                  <App />
              </React.StrictMode>,
              document.getElementById('app')
          );
      }
    </script>

    <!-- prettier-ignore -->
    <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>

    <!-- prettier-ignore -->
    <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)'
};