diff --git a/leaflet-js-intg/README.md b/leaflet-js-intg/README.md
index 46208d4..8b48ce1 100644
--- a/leaflet-js-intg/README.md
+++ b/leaflet-js-intg/README.md
@@ -8,6 +8,8 @@
# Links
+* [Leaflet.js Integration](https://betterprogramming.pub/a-quick-guide-to-integrating-leaflet-js-and-react-ed89ff92790e)
+* [Making Sense of React Hocks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889)
* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
* [Production](https://webpack.js.org/guides/production/)
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
diff --git a/leaflet-js-intg/app/components/map-geo-json.jsx b/leaflet-js-intg/app/components/map-geo-json.jsx
new file mode 100644
index 0000000..7e03938
--- /dev/null
+++ b/leaflet-js-intg/app/components/map-geo-json.jsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useRef, useState } from 'react'
+import L, { geoJson } from 'leaflet'
+
+const sofiaRegions = {"type": "FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.333931,42.632948],[23.334789,42.641599],[23.333588,42.644819],[23.335218,42.647092],[23.33642,42.657129],[23.33642,42.657444],[23.338823,42.657255],[23.347492,42.659338],[23.362427,42.665145],[23.367748,42.668805],[23.369379,42.667732],[23.368521,42.666028],[23.369808,42.661673],[23.367748,42.659527],[23.368263,42.656813],[23.365345,42.650122],[23.364058,42.644566],[23.363199,42.640778],[23.364658,42.6392],[23.364744,42.637179],[23.361826,42.634843],[23.362083,42.630549],[23.358393,42.627518],[23.358822,42.626255],[23.357792,42.624234],[23.355045,42.624486],[23.333931,42.632948]]]]},"properties":{"cartodb_id":1,"stroke_opacity":1,"stroke_width":2,"name":"Студентски","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.347664,42.683382],[23.367577,42.669058],[23.362255,42.665113],[23.347664,42.659464],[23.338737,42.65735],[23.336377,42.657507],[23.338051,42.670572],[23.335948,42.672623],[23.345304,42.680511],[23.347664,42.683382]]]]},"properties":{"cartodb_id":4,"stroke_opacity":1,"stroke_width":2,"name":"Изгрев","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.312473,42.641978],[23.283119,42.653846],[23.284578,42.656434],[23.286724,42.664009],[23.294878,42.672276],[23.298397,42.678334],[23.302345,42.679533],[23.301058,42.684454],[23.310413,42.686978],[23.314018,42.689502],[23.315134,42.694549],[23.315392,42.697703],[23.320885,42.696757],[23.321314,42.696094],[23.318868,42.68906],[23.321786,42.688745],[23.320541,42.683066],[23.3217,42.678713],[23.312259,42.674359],[23.309855,42.672529],[23.313503,42.669594],[23.312945,42.657539],[23.316207,42.659243],[23.31522,42.654478],[23.315778,42.650753],[23.312473,42.641978]]]]},"properties":{"cartodb_id":3,"stroke_opacity":1,"stroke_width":2,"name":"Триадица","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.273206,42.709845],[23.275952,42.712872],[23.27621,42.713975],[23.281488,42.717601],[23.285136,42.717822],[23.294878,42.722615],[23.294749,42.721795],[23.295436,42.720597],[23.295994,42.720313],[23.296294,42.719399],[23.30286,42.717759],[23.301616,42.71634],[23.301487,42.715962],[23.297668,42.714921],[23.303075,42.707795],[23.304276,42.708205],[23.304534,42.707795],[23.304191,42.706123],[23.301229,42.706376],[23.299341,42.707543],[23.297324,42.702118],[23.295822,42.70256],[23.285522,42.704263],[23.284879,42.705934],[23.275909,42.708236],[23.273206,42.709845]]]]},"properties":{"cartodb_id":24,"stroke_opacity":1,"stroke_width":2,"name":"Илинден","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.357878,42.624234],[23.361998,42.623981],[23.4062,42.622592],[23.406372,42.621455],[23.409204,42.621202],[23.409634,42.622276],[23.414268,42.622023],[23.419676,42.626255],[23.419247,42.632633],[23.417616,42.634274],[23.418646,42.63699],[23.415642,42.637242],[23.401394,42.643493],[23.39942,42.644882],[23.398647,42.647849],[23.395386,42.651574],[23.392811,42.656056],[23.391008,42.658833],[23.389635,42.660916],[23.390236,42.662999],[23.381824,42.671582],[23.38131,42.673854],[23.37616,42.67499],[23.368006,42.669058],[23.369465,42.667922],[23.368607,42.666154],[23.369894,42.661673],[23.36792,42.659717],[23.368349,42.656813],[23.365431,42.650185],[23.363285,42.640967],[23.36483,42.639326],[23.36483,42.637242],[23.361912,42.63478],[23.362255,42.630612],[23.358479,42.627454],[23.358908,42.626191],[23.357878,42.624234]]]]},"properties":{"cartodb_id":5,"stroke_opacity":1,"stroke_width":2,"name":"Младост","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.347836,42.683571],[23.351784,42.686915],[23.355303,42.692656],[23.355217,42.696757],[23.354788,42.697577],[23.360796,42.696883],[23.365517,42.69499],[23.377705,42.686473],[23.379679,42.688429],[23.374443,42.695621],[23.379765,42.696378],[23.379421,42.697198],[23.385086,42.698334],[23.38706,42.699658],[23.389893,42.699091],[23.392639,42.703317],[23.399677,42.70502],[23.41444,42.701172],[23.415556,42.699595],[23.418989,42.699343],[23.418989,42.698081],[23.426628,42.697514],[23.42577,42.691394],[23.415384,42.684013],[23.414526,42.682877],[23.401051,42.686284],[23.398991,42.681237],[23.398218,42.67663],[23.394871,42.672213],[23.381653,42.673917],[23.37616,42.675053],[23.36792,42.669121],[23.347836,42.683571]]]]},"properties":{"cartodb_id":6,"stroke_opacity":1,"stroke_width":2,"name":"Слатина","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.333673,42.633138],[23.334532,42.641599],[23.333416,42.644692],[23.335133,42.647281],[23.336163,42.657571],[23.338051,42.670572],[23.335819,42.672592],[23.341742,42.677388],[23.331013,42.68641],[23.320627,42.683003],[23.321829,42.67865],[23.312387,42.674232],[23.309898,42.672465],[23.313589,42.669562],[23.313074,42.657571],[23.316336,42.659338],[23.315392,42.654414],[23.315907,42.650753],[23.312559,42.641788],[23.333673,42.633138]]]]},"properties":{"cartodb_id":2,"stroke_opacity":1,"stroke_width":2,"name":"Лозенец","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.381481,42.673854],[23.38191,42.671582],[23.390322,42.663251],[23.389807,42.661042],[23.3953,42.651889],[23.398819,42.647975],[23.399334,42.645134],[23.415556,42.637368],[23.41856,42.637053],[23.447914,42.633075],[23.455124,42.655488],[23.440104,42.659022],[23.442936,42.662936],[23.44594,42.668426],[23.451862,42.665208],[23.453665,42.664892],[23.454094,42.666786],[23.456755,42.66748],[23.453236,42.687167],[23.445425,42.688492],[23.44388,42.686221],[23.441305,42.6866],[23.441648,42.689754],[23.436327,42.690133],[23.43564,42.688682],[23.436842,42.688366],[23.435812,42.686537],[23.422079,42.688429],[23.415213,42.683887],[23.414698,42.68294],[23.401051,42.686221],[23.399076,42.681489],[23.39839,42.676504],[23.394871,42.672213],[23.381481,42.673854]]]]},"properties":{"cartodb_id":7,"stroke_opacity":1,"stroke_width":2,"name":"Искър","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.287926,42.665397],[23.276939,42.669247],[23.27239,42.671897],[23.269215,42.674043],[23.270395,42.675005],[23.272154,42.679722],[23.277433,42.68354],[23.274214,42.685369],[23.277712,42.690401],[23.281446,42.693019],[23.285952,42.689376],[23.287282,42.690101],[23.288226,42.689533],[23.297024,42.689912],[23.30153,42.691079],[23.308911,42.694454],[23.313632,42.697955],[23.315349,42.697734],[23.313932,42.689533],[23.31037,42.687041],[23.301058,42.684486],[23.302174,42.679628],[23.298311,42.678397],[23.294621,42.672087],[23.287926,42.665397]]]]},"properties":{"cartodb_id":8,"stroke_opacity":1,"stroke_width":2,"name":"Красно село","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.287582,42.690259],[23.294792,42.694359],[23.299255,42.707416],[23.301058,42.706313],[23.305349,42.705903],[23.307753,42.706281],[23.323889,42.705083],[23.321571,42.697198],[23.320971,42.696883],[23.313675,42.698081],[23.308954,42.694675],[23.301487,42.691205],[23.29711,42.690133],[23.288355,42.689691],[23.287582,42.690259]]]]},"properties":{"cartodb_id":9,"stroke_opacity":1,"stroke_width":2,"name":"Възраждане","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.35144,42.686915],[23.343887,42.690953],[23.34363,42.691962],[23.344488,42.69253],[23.334875,42.694549],[23.330927,42.695243],[23.331013,42.696126],[23.331227,42.696804],[23.329253,42.696599],[23.326378,42.697167],[23.325863,42.696567],[23.323846,42.69734],[23.321764,42.697734],[23.321636,42.697245],[23.320949,42.696851],[23.3214,42.696157],[23.318954,42.689123],[23.32185,42.688792],[23.320627,42.683066],[23.330991,42.686442],[23.341656,42.677529],[23.345346,42.680621],[23.347685,42.683508],[23.351033,42.686395],[23.351591,42.686836],[23.35144,42.686915]]]]},"properties":{"cartodb_id":10,"stroke_opacity":1,"stroke_width":2,"name":"Средец","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.354745,42.697671],[23.352814,42.69846],[23.344789,42.699753],[23.33303,42.705209],[23.328824,42.704515],[23.323932,42.705083],[23.321786,42.697797],[23.323867,42.697403],[23.325841,42.696646],[23.326335,42.697198],[23.329167,42.696678],[23.331249,42.69682],[23.331056,42.69611],[23.33097,42.69529],[23.334811,42.694628],[23.344574,42.692561],[23.343694,42.691994],[23.34393,42.691],[23.351676,42.686884],[23.355281,42.692688],[23.355196,42.696741],[23.354745,42.697671]]]]},"properties":{"cartodb_id":11,"stroke_opacity":1,"stroke_width":2,"name":"Оборище","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.399634,42.705146],[23.399291,42.70543],[23.403883,42.706407],[23.399591,42.708552],[23.398433,42.708993],[23.389077,42.710255],[23.390493,42.714417],[23.379421,42.716435],[23.373241,42.716561],[23.372297,42.718579],[23.366976,42.722236],[23.354144,42.726209],[23.351955,42.722741],[23.353028,42.717065],[23.352942,42.715804],[23.346419,42.711169],[23.338652,42.709687],[23.333201,42.705335],[23.344789,42.699879],[23.352814,42.698617],[23.354831,42.697766],[23.360753,42.697009],[23.36556,42.695148],[23.377705,42.6866],[23.379593,42.688492],[23.374314,42.695621],[23.379636,42.69641],[23.37925,42.697261],[23.385086,42.698428],[23.386974,42.699753],[23.389807,42.699154],[23.392553,42.703348],[23.399634,42.705146]]]]},"properties":{"cartodb_id":12,"stroke_opacity":1,"stroke_width":2,"name":"Подуяне","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.354702,42.726713],[23.352985,42.738944],[23.356075,42.747895],[23.378048,42.75508],[23.379078,42.757852],[23.376503,42.758987],[23.339424,42.76302],[23.328781,42.75697],[23.316936,42.72583],[23.311014,42.718579],[23.311186,42.717065],[23.309898,42.716687],[23.306465,42.717192],[23.297732,42.714858],[23.300736,42.710948],[23.303107,42.707842],[23.304255,42.708331],[23.304577,42.707937],[23.304234,42.706092],[23.305285,42.705918],[23.307667,42.706313],[23.323932,42.705146],[23.328781,42.704578],[23.333116,42.705304],[23.338652,42.709734],[23.346334,42.711185],[23.352921,42.715836],[23.352985,42.71705],[23.351891,42.722725],[23.354123,42.726287],[23.354702,42.726713]]]]},"properties":{"cartodb_id":13,"stroke_opacity":1,"stroke_width":2,"name":"Сердика","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.274214,42.685417],[23.273635,42.685748],[23.273785,42.686458],[23.268871,42.690006],[23.265266,42.69029],[23.261619,42.691363],[23.260288,42.691899],[23.258915,42.691647],[23.258228,42.69029],[23.256683,42.690543],[23.254066,42.690353],[23.253422,42.692151],[23.251233,42.691773],[23.244667,42.692467],[23.24235,42.692625],[23.239346,42.691584],[23.237114,42.689596],[23.235784,42.686947],[23.235612,42.685874],[23.23205,42.68742],[23.230891,42.688839],[23.230076,42.691174],[23.230205,42.695842],[23.230376,42.708646],[23.232136,42.707511],[23.233809,42.708331],[23.237543,42.708993],[23.240247,42.708772],[23.242693,42.707543],[23.244581,42.70647],[23.246512,42.70688],[23.247199,42.706155],[23.2481,42.706123],[23.248272,42.706691],[23.250074,42.706912],[23.250718,42.705934],[23.251534,42.705871],[23.252091,42.706817],[23.254666,42.707606],[23.259473,42.706565],[23.263035,42.706502],[23.265009,42.707164],[23.265524,42.7077],[23.266597,42.707416],[23.268056,42.709435],[23.269343,42.709372],[23.270116,42.708362],[23.272948,42.70975],[23.275738,42.708268],[23.284879,42.70584],[23.285351,42.704231],[23.295822,42.702465],[23.297367,42.702055],[23.294749,42.694407],[23.285952,42.689439],[23.281446,42.693082],[23.27754,42.690417],[23.274214,42.685417]]]]},"properties":{"cartodb_id":14,"stroke_opacity":1,"stroke_width":2,"name":"Красна поляна","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.230205,42.708709],[23.228359,42.708646],[23.224111,42.707448],[23.219304,42.709498],[23.217716,42.710002],[23.214154,42.707732],[23.212309,42.706407],[23.210421,42.704515],[23.207459,42.703159],[23.202481,42.701487],[23.197589,42.69827],[23.195615,42.69723],[23.194585,42.698617],[23.196988,42.703127],[23.199606,42.705114],[23.202095,42.70606],[23.205528,42.71016],[23.201923,42.713629],[23.203168,42.714259],[23.202481,42.714921],[23.196816,42.713881],[23.196602,42.715079],[23.193598,42.715457],[23.19407,42.717948],[23.194284,42.718201],[23.199434,42.717728],[23.200464,42.719619],[23.199134,42.721385],[23.200078,42.722552],[23.198447,42.722646],[23.195486,42.727911],[23.198919,42.729424],[23.208704,42.74052],[23.211279,42.743924],[23.224754,42.74178],[23.226643,42.742537],[23.236427,42.735918],[23.240633,42.738502],[23.247843,42.734846],[23.256254,42.745815],[23.268785,42.733207],[23.262177,42.727028],[23.279171,42.71757],[23.280287,42.716876],[23.276167,42.713975],[23.275909,42.712903],[23.272991,42.709876],[23.270137,42.70841],[23.269408,42.709387],[23.268056,42.709498],[23.266554,42.707479],[23.265524,42.707748],[23.264923,42.707196],[23.263035,42.706581],[23.25958,42.706565],[23.254752,42.707653],[23.252048,42.706833],[23.251512,42.70595],[23.25074,42.705966],[23.250096,42.706928],[23.24825,42.706723],[23.248079,42.706187],[23.247221,42.706202],[23.246577,42.706896],[23.244603,42.706502],[23.24029,42.70882],[23.23765,42.709009],[23.233874,42.708362],[23.232136,42.707574],[23.230355,42.708741],[23.230205,42.708709]]]]},"properties":{"cartodb_id":15,"stroke_opacity":1,"stroke_width":2,"name":"Люлин","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.211536,42.744365],[23.21291,42.75426],[23.214111,42.753882],[23.216686,42.756844],[23.212051,42.76031],[23.209906,42.761886],[23.212652,42.763902],[23.205528,42.766801],[23.208961,42.770392],[23.200893,42.772282],[23.21497,42.784],[23.217115,42.780598],[23.250418,42.796912],[23.251791,42.795905],[23.26458,42.800439],[23.266039,42.798424],[23.275309,42.800124],[23.283806,42.78759],[23.287668,42.785575],[23.282776,42.777133],[23.280802,42.773857],[23.277712,42.773794],[23.278913,42.765792],[23.280072,42.757915],[23.283334,42.757758],[23.283377,42.756214],[23.292089,42.756277],[23.292518,42.754607],[23.303504,42.752905],[23.300242,42.750416],[23.297625,42.747107],[23.295178,42.746193],[23.294921,42.74468],[23.292217,42.743199],[23.293805,42.742127],[23.293548,42.740866],[23.294621,42.739101],[23.29608,42.736958],[23.286595,42.731568],[23.289213,42.727091],[23.288054,42.725641],[23.294878,42.722709],[23.285136,42.717885],[23.28136,42.717665],[23.280458,42.716939],[23.262305,42.727028],[23.268828,42.733207],[23.256211,42.745941],[23.247843,42.734972],[23.240676,42.738566],[23.236427,42.736075],[23.226728,42.742631],[23.224754,42.741906],[23.211365,42.744018],[23.211536,42.744365]]]]},"properties":{"cartodb_id":16,"stroke_opacity":1,"stroke_width":2,"name":"Връбница","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.286552,42.783244],[23.293505,42.781417],[23.302174,42.780283],[23.312473,42.780283],[23.313761,42.779653],[23.317537,42.780346],[23.317537,42.786772],[23.317366,42.788661],[23.322687,42.790173],[23.32509,42.786457],[23.322773,42.784882],[23.338137,42.784945],[23.328738,42.757096],[23.316851,42.72583],[23.311014,42.718768],[23.310928,42.717381],[23.309984,42.716939],[23.306637,42.717381],[23.305092,42.717034],[23.304513,42.716892],[23.303869,42.71675],[23.303311,42.71664],[23.302882,42.716545],[23.302195,42.716246],[23.301659,42.716198],[23.30198,42.71664],[23.302517,42.716971],[23.302774,42.717255],[23.303032,42.717586],[23.302839,42.717917],[23.302302,42.71798],[23.301723,42.718059],[23.301015,42.718216],[23.300436,42.718406],[23.300135,42.718484],[23.299813,42.718547],[23.299019,42.718768],[23.298719,42.718815],[23.298161,42.718878],[23.297431,42.719146],[23.296723,42.719336],[23.296359,42.719336],[23.296101,42.720045],[23.295972,42.720408],[23.295543,42.720786],[23.295307,42.721101],[23.295221,42.721322],[23.295093,42.721527],[23.295007,42.721826],[23.294921,42.722],[23.294921,42.722347],[23.294964,42.722741],[23.288183,42.725704],[23.289342,42.727123],[23.286681,42.731568],[23.296208,42.736926],[23.293633,42.740898],[23.293891,42.742127],[23.292389,42.74323],[23.295007,42.744712],[23.295221,42.746193],[23.297753,42.747107],[23.3002,42.750353],[23.303676,42.752937],[23.292561,42.754733],[23.292131,42.75634],[23.283463,42.756308],[23.283334,42.757821],[23.280115,42.757979],[23.277755,42.773763],[23.280716,42.773826],[23.286552,42.783244]]]]},"properties":{"cartodb_id":17,"stroke_opacity":1,"stroke_width":2,"name":"Надежда","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.378563,42.75508],[23.382854,42.749029],[23.387489,42.74739],[23.391438,42.742726],[23.397446,42.740835],[23.396931,42.737431],[23.406029,42.735035],[23.407574,42.731253],[23.414612,42.72747],[23.439331,42.717255],[23.443451,42.719273],[23.440533,42.731883],[23.447742,42.732766],[23.454437,42.744491],[23.459072,42.743608],[23.470058,42.75218],[23.475122,42.753693],[23.46611,42.760751],[23.491344,42.789417],[23.492632,42.800439],[23.494091,42.803714],[23.491259,42.818196],[23.49349,42.821721],[23.48937,42.828898],[23.495808,42.833367],[23.496752,42.853065],[23.497267,42.858035],[23.494263,42.860804],[23.490143,42.860804],[23.487482,42.865144],[23.483019,42.865648],[23.479671,42.872756],[23.473148,42.874455],[23.468256,42.87263],[23.464565,42.877977],[23.463449,42.882128],[23.455296,42.880115],[23.456926,42.870932],[23.448944,42.861118],[23.446198,42.853379],[23.420963,42.857217],[23.409462,42.861307],[23.398132,42.857091],[23.394012,42.857217],[23.385773,42.85319],[23.379507,42.851995],[23.373241,42.850611],[23.367748,42.851806],[23.362856,42.855833],[23.358049,42.863383],[23.336678,42.872567],[23.327236,42.891058],[23.32552,42.897346],[23.289986,42.906903],[23.258915,42.894579],[23.249474,42.856085],[23.255997,42.850925],[23.246727,42.824365],[23.249989,42.797164],[23.251791,42.796156],[23.264494,42.800691],[23.266125,42.798613],[23.275309,42.800439],[23.284149,42.787716],[23.287926,42.78589],[23.286896,42.783559],[23.293161,42.781606],[23.302088,42.780346],[23.312559,42.780535],[23.313847,42.779779],[23.31728,42.780346],[23.31728,42.788724],[23.322601,42.790362],[23.325348,42.786583],[23.32346,42.785197],[23.338566,42.785449],[23.329124,42.7576],[23.339252,42.763272],[23.377018,42.759365],[23.37925,42.758357],[23.378563,42.75508]]]]},"properties":{"cartodb_id":18,"stroke_opacity":1,"stroke_width":2,"name":"Нови искър","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.195615,42.697198],[23.194928,42.695369],[23.192139,42.692246],[23.1898,42.693918],[23.188062,42.69529],[23.184628,42.694028],[23.178792,42.697356],[23.175144,42.695243],[23.170595,42.694517],[23.168321,42.691174],[23.159137,42.693602],[23.159051,42.696788],[23.154116,42.693634],[23.149309,42.688776],[23.142743,42.680637],[23.141627,42.676409],[23.14137,42.670667],[23.147249,42.664356],[23.162441,42.654793],[23.169994,42.653594],[23.174028,42.649049],[23.184586,42.646397],[23.198318,42.651763],[23.204584,42.655677],[23.220978,42.662683],[23.24192,42.670446],[23.251705,42.671582],[23.260031,42.665208],[23.272305,42.671834],[23.268957,42.674043],[23.27033,42.675116],[23.27179,42.679659],[23.277197,42.683571],[23.273592,42.685653],[23.273592,42.686473],[23.268871,42.690006],[23.265696,42.690196],[23.260374,42.691773],[23.259001,42.691584],[23.2584,42.690196],[23.256683,42.690448],[23.254366,42.690259],[23.25325,42.692025],[23.251534,42.691773],[23.242865,42.692467],[23.239431,42.691584],[23.237114,42.689502],[23.235998,42.68742],[23.235826,42.685842],[23.23205,42.687231],[23.229818,42.691016],[23.230247,42.708552],[23.228703,42.708615],[23.224239,42.707416],[23.217888,42.709939],[23.212309,42.706407],[23.210678,42.704515],[23.202696,42.701614],[23.195615,42.697198]]]]},"properties":{"cartodb_id":19,"stroke_opacity":1,"stroke_width":2,"name":"Овча купел","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.14167,42.678019],[23.119354,42.680921],[23.102531,42.688114],[23.10236,42.698207],[23.069744,42.699091],[23.051891,42.701866],[23.04554,42.710444],[23.070431,42.727722],[23.076096,42.734657],[23.088455,42.744365],[23.104248,42.743104],[23.119526,42.741717],[23.1427,42.73907],[23.158665,42.741591],[23.178749,42.74323],[23.186989,42.747264],[23.204155,42.746508],[23.211708,42.744491],[23.198833,42.729487],[23.195143,42.727911],[23.198404,42.722741],[23.200035,42.722425],[23.199177,42.72129],[23.200378,42.719336],[23.199177,42.717885],[23.194113,42.718516],[23.193426,42.715552],[23.19643,42.714921],[23.196945,42.713912],[23.202267,42.714795],[23.202868,42.714228],[23.20158,42.713597],[23.205528,42.710255],[23.202009,42.706155],[23.19952,42.705209],[23.196945,42.703569],[23.194456,42.698901],[23.195314,42.697261],[23.195143,42.695684],[23.192225,42.69253],[23.188276,42.695495],[23.184586,42.694422],[23.178835,42.69764],[23.175058,42.695495],[23.170424,42.694738],[23.168278,42.691394],[23.159437,42.693855],[23.159008,42.696946],[23.153944,42.693918],[23.142271,42.680669],[23.14167,42.678019]]]]},"properties":{"cartodb_id":21,"stroke_opacity":1,"stroke_width":2,"name":"Банкя","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.453236,42.687294],[23.449459,42.707921],[23.459845,42.707227],[23.463364,42.701235],[23.48156,42.696126],[23.486195,42.693098],[23.485079,42.689312],[23.483791,42.685464],[23.49967,42.681363],[23.506794,42.676883],[23.513489,42.680795],[23.516922,42.677388],[23.530483,42.683445],[23.541126,42.685212],[23.550568,42.69682],[23.552284,42.703884],[23.560696,42.709182],[23.584042,42.711705],[23.594341,42.710948],[23.604469,42.717002],[23.609276,42.731631],[23.609962,42.734531],[23.618031,42.737683],[23.62318,42.740078],[23.63039,42.74739],[23.63142,42.753567],[23.649101,42.767809],[23.651161,42.779905],[23.668671,42.777259],[23.678284,42.790866],[23.694077,42.817062],[23.711243,42.821595],[23.713303,42.831667],[23.69133,42.835192],[23.661804,42.824617],[23.653564,42.847275],[23.647385,42.854323],[23.614426,42.85533],[23.586273,42.840731],[23.555374,42.842744],[23.541641,42.846772],[23.529968,42.854323],[23.510742,42.858853],[23.498039,42.858224],[23.495808,42.833556],[23.489799,42.829023],[23.493919,42.821847],[23.491688,42.818322],[23.494263,42.803714],[23.492718,42.799809],[23.491688,42.789228],[23.466454,42.760877],[23.47538,42.753693],[23.470402,42.752054],[23.459072,42.743356],[23.454437,42.744365],[23.447914,42.733018],[23.440876,42.731883],[23.443794,42.719273],[23.439331,42.717255],[23.417187,42.726083],[23.407402,42.731253],[23.4062,42.735161],[23.396759,42.737431],[23.397102,42.740961],[23.391609,42.742852],[23.387489,42.747769],[23.382854,42.749281],[23.37822,42.754954],[23.356419,42.748021],[23.352985,42.739448],[23.354874,42.726461],[23.367577,42.722552],[23.372211,42.71902],[23.373585,42.717002],[23.37925,42.716876],[23.390579,42.714984],[23.389378,42.71057],[23.398991,42.709182],[23.403969,42.706533],[23.399763,42.705398],[23.414354,42.701424],[23.415556,42.699658],[23.418732,42.699532],[23.419161,42.698334],[23.426628,42.69764],[23.425856,42.691584],[23.422165,42.688682],[23.435726,42.686663],[23.43667,42.688303],[23.435211,42.688619],[23.436155,42.690133],[23.441734,42.68988],[23.441477,42.686789],[23.443708,42.686347],[23.445253,42.688619],[23.453236,42.687294]]]]},"properties":{"cartodb_id":22,"stroke_opacity":1,"stroke_width":2,"name":"Кремиковци","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.506107,42.676504],[23.503532,42.654919],[23.504734,42.645829],[23.504906,42.644314],[23.496838,42.639768],[23.507481,42.63901],[23.510742,42.64343],[23.527737,42.639515],[23.53838,42.637368],[23.528252,42.615518],[23.531685,42.607053],[23.535805,42.591511],[23.540096,42.564966],[23.53838,42.541066],[23.554344,42.52576],[23.572197,42.509312],[23.573914,42.502731],[23.59623,42.492732],[23.609962,42.481719],[23.63039,42.482985],[23.646183,42.470577],[23.660431,42.445755],[23.666096,42.431566],[23.669872,42.413445],[23.636055,42.397347],[23.605328,42.394558],[23.562241,42.402798],[23.532372,42.414586],[23.514862,42.416867],[23.5322,42.461713],[23.52396,42.481972],[23.51263,42.496656],[23.505077,42.50754],[23.501644,42.514373],[23.474007,42.522344],[23.454781,42.525254],[23.447399,42.52614],[23.440876,42.523736],[23.430233,42.522344],[23.416672,42.506528],[23.446541,42.48577],[23.454437,42.47159],[23.447914,42.455634],[23.429031,42.443981],[23.400879,42.448795],[23.374786,42.472097],[23.358994,42.484251],[23.331871,42.508552],[23.317451,42.531579],[23.289299,42.554092],[23.282433,42.564966],[23.285608,42.565914],[23.292217,42.57489],[23.297367,42.58715],[23.299255,42.58892],[23.311958,42.58892],[23.312387,42.594164],[23.319769,42.592016],[23.32406,42.593659],[23.332214,42.594796],[23.339081,42.597829],[23.348265,42.600167],[23.349552,42.603199],[23.350925,42.604273],[23.354445,42.604463],[23.356676,42.605474],[23.360367,42.609138],[23.364058,42.61078],[23.365517,42.611854],[23.374186,42.615075],[23.375902,42.616781],[23.376846,42.617033],[23.37882,42.618739],[23.379164,42.620065],[23.380966,42.620697],[23.381739,42.620634],[23.38294,42.621202],[23.385944,42.621644],[23.385172,42.62316],[23.405943,42.622528],[23.406286,42.621455],[23.409204,42.621202],[23.409805,42.622149],[23.414268,42.622023],[23.420019,42.626318],[23.419418,42.63257],[23.417788,42.634274],[23.418732,42.636863],[23.448257,42.632948],[23.455124,42.655551],[23.440361,42.659149],[23.443279,42.663125],[23.44594,42.668237],[23.451433,42.665271],[23.454008,42.664703],[23.454437,42.666722],[23.456755,42.667417],[23.449717,42.707858],[23.459587,42.707227],[23.463192,42.701361],[23.481131,42.696126],[23.486023,42.693098],[23.48362,42.68559],[23.49967,42.6813],[23.506365,42.677009],[23.506107,42.676504]]]]},"properties":{"cartodb_id":23,"stroke_opacity":1,"stroke_width":2,"name":"Панчарево","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.384829,42.623049],[23.386374,42.621786],[23.383091,42.621281],[23.381546,42.620665],[23.380966,42.620649],[23.378971,42.620065],[23.378563,42.618865],[23.376782,42.617112],[23.375967,42.616891],[23.373928,42.615123],[23.373027,42.614918],[23.367405,42.612549],[23.365602,42.61198],[23.363757,42.610717],[23.36041,42.609138],[23.357105,42.605853],[23.355045,42.604652],[23.350754,42.604147],[23.34938,42.603136],[23.348007,42.600167],[23.339338,42.597892],[23.332043,42.59486],[23.324404,42.594038],[23.319855,42.592143],[23.312173,42.594228],[23.311744,42.589015],[23.299255,42.588983],[23.29741,42.587119],[23.292046,42.57508],[23.285608,42.566041],[23.278227,42.563638],[23.263721,42.564018],[23.253508,42.568759],[23.248014,42.578808],[23.237972,42.585634],[23.212738,42.586898],[23.191538,42.589362],[23.185959,42.591827],[23.163729,42.59309],[23.155746,42.593469],[23.153172,42.593027],[23.143988,42.587972],[23.136177,42.591132],[23.133516,42.600104],[23.145018,42.602378],[23.149395,42.605158],[23.158836,42.607622],[23.170252,42.613623],[23.175144,42.622213],[23.176002,42.631433],[23.167076,42.63699],[23.173599,42.649112],[23.184671,42.646271],[23.198233,42.651763],[23.204327,42.655614],[23.24132,42.67032],[23.251534,42.671645],[23.259859,42.665334],[23.272305,42.671645],[23.276854,42.669121],[23.28784,42.665334],[23.286638,42.663945],[23.284321,42.656561],[23.282862,42.653973],[23.355732,42.624107],[23.384829,42.623049]]]]},"properties":{"cartodb_id":20,"stroke_opacity":1,"stroke_width":2,"name":"Витоша","fill":"#555555","stroke":"#555555","fill_opacity":0.5}}]}
+
+function MapGeoJSON() {
+
+ const [markerPosition, setMarkerPosition] = useState({ lat:42.6944, lng:23.3328 })
+
+ const mapRef = useRef(null)
+ useEffect(() => {
+
+ mapRef.current = L.map('map', {
+ center: markerPosition,
+ zoom: 18,
+ layers: [
+ L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
+ attribution:
+ '© OpenStreetMap contributors'
+ })
+ ]
+ })
+ }, [markerPosition])
+
+
+ const markerRef = useRef(null)
+ const customIcon = L.icon({
+ iconUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png',
+ iconSize: [35,46],
+ iconAnchor: [17,46]
+ });
+
+ useEffect(() => {
+ if(markerRef.current)
+ markerRef.current.setLatLng(markerPosition)
+ else
+ markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Business Center Andromeda')
+ }, [markerPosition, customIcon])
+
+ const geoJsonRef = useRef(null)
+ useEffect(() => {
+ const style = (...args) => {
+ const feature = args[0][0]
+ return {
+ fillColor: '#45c92a',
+ weight: 1,
+ opacity: 0.7,
+ color: 'white',
+ dashArray: '3',
+ fillOpacity: 0.7
+ };
+ }
+
+ if(geoJsonRef.currrent != null) {
+ geoJsonRef.current.clearLayers()
+ }
+
+ geoJsonRef.current = null
+ geoJsonRef.current = L.geoJSON(sofiaRegions, {
+ style: style
+ }).addTo(mapRef.current)
+ },[])
+
+ return
+}
+
+export default MapGeoJSON
diff --git a/leaflet-js-intg/app/components/map-next.jsx b/leaflet-js-intg/app/components/map-next.jsx
new file mode 100644
index 0000000..2c32289
--- /dev/null
+++ b/leaflet-js-intg/app/components/map-next.jsx
@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import icon from "leaflet/dist/images/marker-icon.png";
+import iconShadow from "leaflet/dist/images/marker-shadow.png";
+
+let DefaultIcon = L.icon({
+iconUrl: icon,
+shadowUrl: iconShadow,
+});
+
+export default function MapNxt() {
+
+ useEffect(() => {
+
+ var container = L.DomUtil.get("map");
+
+ //https://stackoverflow.com/a/50034912/15078958
+ //Before initializing map check if the map is already initiated or not
+ if (container != null) {
+ container._leaflet_id = null;
+ }
+ //TODO Is this an alternative?
+ //https://stackoverflow.com/a/53836894/15078958
+ /**map.invalidateSize();*/
+
+ var map = L.map("map").setView([51.505, -0.09], 13);
+
+ L.tileLayer(
+ "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
+ {
+ attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox ',
+ maxZoom: 18,
+ id: "mapbox/streets-v11",
+ tileSize: 512,
+ zoomOffset: -1,
+ accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
+ scrollWheelZoom: false,
+ }).addTo(map);
+
+ //TODO: Why is 'scrollWheelZoom: false,' above not working?
+ //TODO: Why the following line instead?
+ map.scrollWheelZoom.disable()
+
+ L.Marker.prototype.options.icon = DefaultIcon;
+ var marker = L.marker([51.5, -0.09]).addTo(map);
+ marker.bindPopup("Hello world!
+
+ );
+};
+//https://stackoverflow.com/a/72016670/15078958
+/**
+OpenStreetMap contributors, Imagery © Mapbox ',
+ maxZoom: 18,
+ id: 'mapbox/streets-v11',
+ tileSize: 512,
+ zoomOffset: -1,
+ accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
+ scrollWheelZoom: false,
+ }).addTo(map);
+
+ //TODO: Why is 'scrollWheelZoom: false,' above not working?
+ //TODO: Why the following line instead?
+ map.scrollWheelZoom.disable()
+
+ L.Marker.prototype.options.icon = DefaultIcon;
+ var marker = L.marker([51.5, -0.09]).addTo(map);
+ marker.bindPopup("Hello world! mapContainer.current = el}>
+
+ );
+};
+//https://stackoverflow.com/a/66920207/15078958
diff --git a/leaflet-js-intg/app/components/map-nxt2.jsx b/leaflet-js-intg/app/components/map-nxt2.jsx
new file mode 100644
index 0000000..74340af
--- /dev/null
+++ b/leaflet-js-intg/app/components/map-nxt2.jsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from 'react';
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+export default function Map() {
+
+
+ const mapContainerRef = useRef(null);
+
+ useEffect( async () => {
+ //const res =await Axios.get(BASE_PATH + 'fetchProperty')
+
+ //TODO Is this the map unload part?
+ const container = L.DomUtil.get(mapContainerRef.current);
+ if(container != null) {
+ container._leaflet_id = null;
+ }
+
+ if(container) {
+
+ const mapView = L.map( mapContainerRef.current, {
+ zoom: 13,
+ center: [19.059984, 72.889999]
+ // maxZoom: 13
+ // minZoom: 15
+ });
+
+ // const canvas = mapView.getCanvasContainer();
+ mapView.zoomControl.setPosition("bottomright");
+ mapView.attributionControl.addAttribution(
+ "Mascots. pro "
+ );
+
+ L.tileLayer(
+ "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
+ {
+ attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox ',
+ maxZoom: 18,
+ id: 'mapbox/streets-v11',
+ tileSize: 512,
+ zoomOffset: -1,
+ accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg",
+ scrollWheelZoom: false,
+ }).addTo(map);
+
+ const mask = L.tileLayer.mask(
+ "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
+ {
+ attribution: 'Mascots pro ',
+ maskSize: 300
+ // maxZoom: 18,
+ // maxNativeZoom: 16
+ // tms: true
+ }
+ ).addTo(mapView);
+
+ mapView.on("mousemove", function (e) {
+ mask.setCenter(e.containerPoint);
+ });
+
+ /**
+ res.data.map((marker) => {
+
+ const innerHtmlContent = ``;
+ const divElement = document.createElement("div");
+ const assignBtn = document.createElement("div");
+ assignBtn.className = "map-link";
+ assignBtn.innerHTML = `View Property `;
+ divElement.innerHTML = innerHtmlContent;
+ divElement.appendChild(assignBtn);
+ assignBtn.addEventListener("click", (e) => {
+ console.log("dsvsdvb");
+ });
+ var iconOptions = {
+ iconUrl: "/images/location_pin2.svg",
+ iconSize: [25, 25]
+ };
+ var customIcon = L.icon(iconOptions);
+ // create popup contents
+ var customPopup = divElement;
+ // specify popup options
+ var customOptions = {
+ maxWidth: "500",
+ className: "custom"
+ };
+ const markerOptions = {
+ // title: "MyLocation",
+ // draggable: true
+ clickable: true,
+ icon: customIcon
+ };
+ const mark = L.marker([marker.Latitude,marker.Longitude], markerOptions);
+ mark.bindPopup(customPopup, customOptions);
+ mark.addTo(mapView);
+ // return mapView.off();
+ });
+*/
+ return () => mapView.remove();
+ }
+ }, [])
+ return (
+
+ );
+};
+//https://stackoverflow.com/a/67486824/15078958
diff --git a/leaflet-js-intg/app/components/map-simple.jsx b/leaflet-js-intg/app/components/map-simple.jsx
new file mode 100644
index 0000000..8f6533f
--- /dev/null
+++ b/leaflet-js-intg/app/components/map-simple.jsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useRef, useState } from 'react'
+import L from 'leaflet'
+import "leaflet/dist/leaflet.css";
+
+export default function MapSimple() {
+
+ const mapRef = useRef();
+
+ useEffect(() => {
+
+ const map = L.map(
+ mapRef.current,
+ {attributionControl: true}
+ ).setView(
+ [42.69751, 23.32415],
+ 16
+ );
+
+ L.tileLayer(
+ "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
+ {
+ attribution: '© OpenStreetMap contributors',
+ maxZoom: 18,
+ scrollWheelZoom: false,
+ }).addTo(map);
+
+ // unmount map function
+ //You should unmount the function in react.js to remove the existing map.
+ return () => map.remove();
+ }, []);
+
+ return (
+ mapRef.current = el}>
+
+ );
+};
+//https://github.com/azaharyan/react-leaflet-example
diff --git a/leaflet-js-intg/app/components/map-with-marker.jsx b/leaflet-js-intg/app/components/map-with-marker.jsx
new file mode 100644
index 0000000..06363c0
--- /dev/null
+++ b/leaflet-js-intg/app/components/map-with-marker.jsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useState } from 'react'
+import L, { geoJson } from 'leaflet'
+
+function MapWithMarker() {
+
+ const [markerPosition, setMarkerPosition] = useState({ lat:42.6944, lng:23.3328 })
+
+ const mapRef = useRef(null)
+ useEffect(() => {
+
+ mapRef.current = L.map('map', {
+ center: markerPosition,
+ zoom: 18,
+ layers: [
+ L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
+ attribution:
+ '© OpenStreetMap contributors'
+ })
+ ]
+ })
+ }, [markerPosition])
+
+
+ const markerRef = useRef(null)
+ const customIcon = L.icon({
+ iconUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png',
+ iconSize: [35,46],
+ iconAnchor: [17,46]
+ });
+
+ useEffect(() => {
+ if(markerRef.current)
+ markerRef.current.setLatLng(markerPosition)
+ else
+ markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Bulgarian National Assembly')
+ }, [markerPosition, customIcon])
+
+ return
+}
+
+export default MapWithMarker
diff --git a/leaflet-js-intg/app/components/map.jsx b/leaflet-js-intg/app/components/map.jsx
new file mode 100644
index 0000000..39c3b82
--- /dev/null
+++ b/leaflet-js-intg/app/components/map.jsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useRef, useState } from 'react';
+import L, { geoJson } from 'leaflet';
+import "leaflet/dist/leaflet.css";
+
+const sofiaRegions = {"type": "FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.333931,42.632948],[23.334789,42.641599],[23.333588,42.644819],[23.335218,42.647092],[23.33642,42.657129],[23.33642,42.657444],[23.338823,42.657255],[23.347492,42.659338],[23.362427,42.665145],[23.367748,42.668805],[23.369379,42.667732],[23.368521,42.666028],[23.369808,42.661673],[23.367748,42.659527],[23.368263,42.656813],[23.365345,42.650122],[23.364058,42.644566],[23.363199,42.640778],[23.364658,42.6392],[23.364744,42.637179],[23.361826,42.634843],[23.362083,42.630549],[23.358393,42.627518],[23.358822,42.626255],[23.357792,42.624234],[23.355045,42.624486],[23.333931,42.632948]]]]},"properties":{"cartodb_id":1,"stroke_opacity":1,"stroke_width":2,"name":"Студентски","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.347664,42.683382],[23.367577,42.669058],[23.362255,42.665113],[23.347664,42.659464],[23.338737,42.65735],[23.336377,42.657507],[23.338051,42.670572],[23.335948,42.672623],[23.345304,42.680511],[23.347664,42.683382]]]]},"properties":{"cartodb_id":4,"stroke_opacity":1,"stroke_width":2,"name":"Изгрев","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.312473,42.641978],[23.283119,42.653846],[23.284578,42.656434],[23.286724,42.664009],[23.294878,42.672276],[23.298397,42.678334],[23.302345,42.679533],[23.301058,42.684454],[23.310413,42.686978],[23.314018,42.689502],[23.315134,42.694549],[23.315392,42.697703],[23.320885,42.696757],[23.321314,42.696094],[23.318868,42.68906],[23.321786,42.688745],[23.320541,42.683066],[23.3217,42.678713],[23.312259,42.674359],[23.309855,42.672529],[23.313503,42.669594],[23.312945,42.657539],[23.316207,42.659243],[23.31522,42.654478],[23.315778,42.650753],[23.312473,42.641978]]]]},"properties":{"cartodb_id":3,"stroke_opacity":1,"stroke_width":2,"name":"Триадица","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.273206,42.709845],[23.275952,42.712872],[23.27621,42.713975],[23.281488,42.717601],[23.285136,42.717822],[23.294878,42.722615],[23.294749,42.721795],[23.295436,42.720597],[23.295994,42.720313],[23.296294,42.719399],[23.30286,42.717759],[23.301616,42.71634],[23.301487,42.715962],[23.297668,42.714921],[23.303075,42.707795],[23.304276,42.708205],[23.304534,42.707795],[23.304191,42.706123],[23.301229,42.706376],[23.299341,42.707543],[23.297324,42.702118],[23.295822,42.70256],[23.285522,42.704263],[23.284879,42.705934],[23.275909,42.708236],[23.273206,42.709845]]]]},"properties":{"cartodb_id":24,"stroke_opacity":1,"stroke_width":2,"name":"Илинден","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.357878,42.624234],[23.361998,42.623981],[23.4062,42.622592],[23.406372,42.621455],[23.409204,42.621202],[23.409634,42.622276],[23.414268,42.622023],[23.419676,42.626255],[23.419247,42.632633],[23.417616,42.634274],[23.418646,42.63699],[23.415642,42.637242],[23.401394,42.643493],[23.39942,42.644882],[23.398647,42.647849],[23.395386,42.651574],[23.392811,42.656056],[23.391008,42.658833],[23.389635,42.660916],[23.390236,42.662999],[23.381824,42.671582],[23.38131,42.673854],[23.37616,42.67499],[23.368006,42.669058],[23.369465,42.667922],[23.368607,42.666154],[23.369894,42.661673],[23.36792,42.659717],[23.368349,42.656813],[23.365431,42.650185],[23.363285,42.640967],[23.36483,42.639326],[23.36483,42.637242],[23.361912,42.63478],[23.362255,42.630612],[23.358479,42.627454],[23.358908,42.626191],[23.357878,42.624234]]]]},"properties":{"cartodb_id":5,"stroke_opacity":1,"stroke_width":2,"name":"Младост","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.347836,42.683571],[23.351784,42.686915],[23.355303,42.692656],[23.355217,42.696757],[23.354788,42.697577],[23.360796,42.696883],[23.365517,42.69499],[23.377705,42.686473],[23.379679,42.688429],[23.374443,42.695621],[23.379765,42.696378],[23.379421,42.697198],[23.385086,42.698334],[23.38706,42.699658],[23.389893,42.699091],[23.392639,42.703317],[23.399677,42.70502],[23.41444,42.701172],[23.415556,42.699595],[23.418989,42.699343],[23.418989,42.698081],[23.426628,42.697514],[23.42577,42.691394],[23.415384,42.684013],[23.414526,42.682877],[23.401051,42.686284],[23.398991,42.681237],[23.398218,42.67663],[23.394871,42.672213],[23.381653,42.673917],[23.37616,42.675053],[23.36792,42.669121],[23.347836,42.683571]]]]},"properties":{"cartodb_id":6,"stroke_opacity":1,"stroke_width":2,"name":"Слатина","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.333673,42.633138],[23.334532,42.641599],[23.333416,42.644692],[23.335133,42.647281],[23.336163,42.657571],[23.338051,42.670572],[23.335819,42.672592],[23.341742,42.677388],[23.331013,42.68641],[23.320627,42.683003],[23.321829,42.67865],[23.312387,42.674232],[23.309898,42.672465],[23.313589,42.669562],[23.313074,42.657571],[23.316336,42.659338],[23.315392,42.654414],[23.315907,42.650753],[23.312559,42.641788],[23.333673,42.633138]]]]},"properties":{"cartodb_id":2,"stroke_opacity":1,"stroke_width":2,"name":"Лозенец","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.381481,42.673854],[23.38191,42.671582],[23.390322,42.663251],[23.389807,42.661042],[23.3953,42.651889],[23.398819,42.647975],[23.399334,42.645134],[23.415556,42.637368],[23.41856,42.637053],[23.447914,42.633075],[23.455124,42.655488],[23.440104,42.659022],[23.442936,42.662936],[23.44594,42.668426],[23.451862,42.665208],[23.453665,42.664892],[23.454094,42.666786],[23.456755,42.66748],[23.453236,42.687167],[23.445425,42.688492],[23.44388,42.686221],[23.441305,42.6866],[23.441648,42.689754],[23.436327,42.690133],[23.43564,42.688682],[23.436842,42.688366],[23.435812,42.686537],[23.422079,42.688429],[23.415213,42.683887],[23.414698,42.68294],[23.401051,42.686221],[23.399076,42.681489],[23.39839,42.676504],[23.394871,42.672213],[23.381481,42.673854]]]]},"properties":{"cartodb_id":7,"stroke_opacity":1,"stroke_width":2,"name":"Искър","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.287926,42.665397],[23.276939,42.669247],[23.27239,42.671897],[23.269215,42.674043],[23.270395,42.675005],[23.272154,42.679722],[23.277433,42.68354],[23.274214,42.685369],[23.277712,42.690401],[23.281446,42.693019],[23.285952,42.689376],[23.287282,42.690101],[23.288226,42.689533],[23.297024,42.689912],[23.30153,42.691079],[23.308911,42.694454],[23.313632,42.697955],[23.315349,42.697734],[23.313932,42.689533],[23.31037,42.687041],[23.301058,42.684486],[23.302174,42.679628],[23.298311,42.678397],[23.294621,42.672087],[23.287926,42.665397]]]]},"properties":{"cartodb_id":8,"stroke_opacity":1,"stroke_width":2,"name":"Красно село","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.287582,42.690259],[23.294792,42.694359],[23.299255,42.707416],[23.301058,42.706313],[23.305349,42.705903],[23.307753,42.706281],[23.323889,42.705083],[23.321571,42.697198],[23.320971,42.696883],[23.313675,42.698081],[23.308954,42.694675],[23.301487,42.691205],[23.29711,42.690133],[23.288355,42.689691],[23.287582,42.690259]]]]},"properties":{"cartodb_id":9,"stroke_opacity":1,"stroke_width":2,"name":"Възраждане","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.35144,42.686915],[23.343887,42.690953],[23.34363,42.691962],[23.344488,42.69253],[23.334875,42.694549],[23.330927,42.695243],[23.331013,42.696126],[23.331227,42.696804],[23.329253,42.696599],[23.326378,42.697167],[23.325863,42.696567],[23.323846,42.69734],[23.321764,42.697734],[23.321636,42.697245],[23.320949,42.696851],[23.3214,42.696157],[23.318954,42.689123],[23.32185,42.688792],[23.320627,42.683066],[23.330991,42.686442],[23.341656,42.677529],[23.345346,42.680621],[23.347685,42.683508],[23.351033,42.686395],[23.351591,42.686836],[23.35144,42.686915]]]]},"properties":{"cartodb_id":10,"stroke_opacity":1,"stroke_width":2,"name":"Средец","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.354745,42.697671],[23.352814,42.69846],[23.344789,42.699753],[23.33303,42.705209],[23.328824,42.704515],[23.323932,42.705083],[23.321786,42.697797],[23.323867,42.697403],[23.325841,42.696646],[23.326335,42.697198],[23.329167,42.696678],[23.331249,42.69682],[23.331056,42.69611],[23.33097,42.69529],[23.334811,42.694628],[23.344574,42.692561],[23.343694,42.691994],[23.34393,42.691],[23.351676,42.686884],[23.355281,42.692688],[23.355196,42.696741],[23.354745,42.697671]]]]},"properties":{"cartodb_id":11,"stroke_opacity":1,"stroke_width":2,"name":"Оборище","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.399634,42.705146],[23.399291,42.70543],[23.403883,42.706407],[23.399591,42.708552],[23.398433,42.708993],[23.389077,42.710255],[23.390493,42.714417],[23.379421,42.716435],[23.373241,42.716561],[23.372297,42.718579],[23.366976,42.722236],[23.354144,42.726209],[23.351955,42.722741],[23.353028,42.717065],[23.352942,42.715804],[23.346419,42.711169],[23.338652,42.709687],[23.333201,42.705335],[23.344789,42.699879],[23.352814,42.698617],[23.354831,42.697766],[23.360753,42.697009],[23.36556,42.695148],[23.377705,42.6866],[23.379593,42.688492],[23.374314,42.695621],[23.379636,42.69641],[23.37925,42.697261],[23.385086,42.698428],[23.386974,42.699753],[23.389807,42.699154],[23.392553,42.703348],[23.399634,42.705146]]]]},"properties":{"cartodb_id":12,"stroke_opacity":1,"stroke_width":2,"name":"Подуяне","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.354702,42.726713],[23.352985,42.738944],[23.356075,42.747895],[23.378048,42.75508],[23.379078,42.757852],[23.376503,42.758987],[23.339424,42.76302],[23.328781,42.75697],[23.316936,42.72583],[23.311014,42.718579],[23.311186,42.717065],[23.309898,42.716687],[23.306465,42.717192],[23.297732,42.714858],[23.300736,42.710948],[23.303107,42.707842],[23.304255,42.708331],[23.304577,42.707937],[23.304234,42.706092],[23.305285,42.705918],[23.307667,42.706313],[23.323932,42.705146],[23.328781,42.704578],[23.333116,42.705304],[23.338652,42.709734],[23.346334,42.711185],[23.352921,42.715836],[23.352985,42.71705],[23.351891,42.722725],[23.354123,42.726287],[23.354702,42.726713]]]]},"properties":{"cartodb_id":13,"stroke_opacity":1,"stroke_width":2,"name":"Сердика","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.274214,42.685417],[23.273635,42.685748],[23.273785,42.686458],[23.268871,42.690006],[23.265266,42.69029],[23.261619,42.691363],[23.260288,42.691899],[23.258915,42.691647],[23.258228,42.69029],[23.256683,42.690543],[23.254066,42.690353],[23.253422,42.692151],[23.251233,42.691773],[23.244667,42.692467],[23.24235,42.692625],[23.239346,42.691584],[23.237114,42.689596],[23.235784,42.686947],[23.235612,42.685874],[23.23205,42.68742],[23.230891,42.688839],[23.230076,42.691174],[23.230205,42.695842],[23.230376,42.708646],[23.232136,42.707511],[23.233809,42.708331],[23.237543,42.708993],[23.240247,42.708772],[23.242693,42.707543],[23.244581,42.70647],[23.246512,42.70688],[23.247199,42.706155],[23.2481,42.706123],[23.248272,42.706691],[23.250074,42.706912],[23.250718,42.705934],[23.251534,42.705871],[23.252091,42.706817],[23.254666,42.707606],[23.259473,42.706565],[23.263035,42.706502],[23.265009,42.707164],[23.265524,42.7077],[23.266597,42.707416],[23.268056,42.709435],[23.269343,42.709372],[23.270116,42.708362],[23.272948,42.70975],[23.275738,42.708268],[23.284879,42.70584],[23.285351,42.704231],[23.295822,42.702465],[23.297367,42.702055],[23.294749,42.694407],[23.285952,42.689439],[23.281446,42.693082],[23.27754,42.690417],[23.274214,42.685417]]]]},"properties":{"cartodb_id":14,"stroke_opacity":1,"stroke_width":2,"name":"Красна поляна","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.230205,42.708709],[23.228359,42.708646],[23.224111,42.707448],[23.219304,42.709498],[23.217716,42.710002],[23.214154,42.707732],[23.212309,42.706407],[23.210421,42.704515],[23.207459,42.703159],[23.202481,42.701487],[23.197589,42.69827],[23.195615,42.69723],[23.194585,42.698617],[23.196988,42.703127],[23.199606,42.705114],[23.202095,42.70606],[23.205528,42.71016],[23.201923,42.713629],[23.203168,42.714259],[23.202481,42.714921],[23.196816,42.713881],[23.196602,42.715079],[23.193598,42.715457],[23.19407,42.717948],[23.194284,42.718201],[23.199434,42.717728],[23.200464,42.719619],[23.199134,42.721385],[23.200078,42.722552],[23.198447,42.722646],[23.195486,42.727911],[23.198919,42.729424],[23.208704,42.74052],[23.211279,42.743924],[23.224754,42.74178],[23.226643,42.742537],[23.236427,42.735918],[23.240633,42.738502],[23.247843,42.734846],[23.256254,42.745815],[23.268785,42.733207],[23.262177,42.727028],[23.279171,42.71757],[23.280287,42.716876],[23.276167,42.713975],[23.275909,42.712903],[23.272991,42.709876],[23.270137,42.70841],[23.269408,42.709387],[23.268056,42.709498],[23.266554,42.707479],[23.265524,42.707748],[23.264923,42.707196],[23.263035,42.706581],[23.25958,42.706565],[23.254752,42.707653],[23.252048,42.706833],[23.251512,42.70595],[23.25074,42.705966],[23.250096,42.706928],[23.24825,42.706723],[23.248079,42.706187],[23.247221,42.706202],[23.246577,42.706896],[23.244603,42.706502],[23.24029,42.70882],[23.23765,42.709009],[23.233874,42.708362],[23.232136,42.707574],[23.230355,42.708741],[23.230205,42.708709]]]]},"properties":{"cartodb_id":15,"stroke_opacity":1,"stroke_width":2,"name":"Люлин","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.211536,42.744365],[23.21291,42.75426],[23.214111,42.753882],[23.216686,42.756844],[23.212051,42.76031],[23.209906,42.761886],[23.212652,42.763902],[23.205528,42.766801],[23.208961,42.770392],[23.200893,42.772282],[23.21497,42.784],[23.217115,42.780598],[23.250418,42.796912],[23.251791,42.795905],[23.26458,42.800439],[23.266039,42.798424],[23.275309,42.800124],[23.283806,42.78759],[23.287668,42.785575],[23.282776,42.777133],[23.280802,42.773857],[23.277712,42.773794],[23.278913,42.765792],[23.280072,42.757915],[23.283334,42.757758],[23.283377,42.756214],[23.292089,42.756277],[23.292518,42.754607],[23.303504,42.752905],[23.300242,42.750416],[23.297625,42.747107],[23.295178,42.746193],[23.294921,42.74468],[23.292217,42.743199],[23.293805,42.742127],[23.293548,42.740866],[23.294621,42.739101],[23.29608,42.736958],[23.286595,42.731568],[23.289213,42.727091],[23.288054,42.725641],[23.294878,42.722709],[23.285136,42.717885],[23.28136,42.717665],[23.280458,42.716939],[23.262305,42.727028],[23.268828,42.733207],[23.256211,42.745941],[23.247843,42.734972],[23.240676,42.738566],[23.236427,42.736075],[23.226728,42.742631],[23.224754,42.741906],[23.211365,42.744018],[23.211536,42.744365]]]]},"properties":{"cartodb_id":16,"stroke_opacity":1,"stroke_width":2,"name":"Връбница","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.286552,42.783244],[23.293505,42.781417],[23.302174,42.780283],[23.312473,42.780283],[23.313761,42.779653],[23.317537,42.780346],[23.317537,42.786772],[23.317366,42.788661],[23.322687,42.790173],[23.32509,42.786457],[23.322773,42.784882],[23.338137,42.784945],[23.328738,42.757096],[23.316851,42.72583],[23.311014,42.718768],[23.310928,42.717381],[23.309984,42.716939],[23.306637,42.717381],[23.305092,42.717034],[23.304513,42.716892],[23.303869,42.71675],[23.303311,42.71664],[23.302882,42.716545],[23.302195,42.716246],[23.301659,42.716198],[23.30198,42.71664],[23.302517,42.716971],[23.302774,42.717255],[23.303032,42.717586],[23.302839,42.717917],[23.302302,42.71798],[23.301723,42.718059],[23.301015,42.718216],[23.300436,42.718406],[23.300135,42.718484],[23.299813,42.718547],[23.299019,42.718768],[23.298719,42.718815],[23.298161,42.718878],[23.297431,42.719146],[23.296723,42.719336],[23.296359,42.719336],[23.296101,42.720045],[23.295972,42.720408],[23.295543,42.720786],[23.295307,42.721101],[23.295221,42.721322],[23.295093,42.721527],[23.295007,42.721826],[23.294921,42.722],[23.294921,42.722347],[23.294964,42.722741],[23.288183,42.725704],[23.289342,42.727123],[23.286681,42.731568],[23.296208,42.736926],[23.293633,42.740898],[23.293891,42.742127],[23.292389,42.74323],[23.295007,42.744712],[23.295221,42.746193],[23.297753,42.747107],[23.3002,42.750353],[23.303676,42.752937],[23.292561,42.754733],[23.292131,42.75634],[23.283463,42.756308],[23.283334,42.757821],[23.280115,42.757979],[23.277755,42.773763],[23.280716,42.773826],[23.286552,42.783244]]]]},"properties":{"cartodb_id":17,"stroke_opacity":1,"stroke_width":2,"name":"Надежда","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.378563,42.75508],[23.382854,42.749029],[23.387489,42.74739],[23.391438,42.742726],[23.397446,42.740835],[23.396931,42.737431],[23.406029,42.735035],[23.407574,42.731253],[23.414612,42.72747],[23.439331,42.717255],[23.443451,42.719273],[23.440533,42.731883],[23.447742,42.732766],[23.454437,42.744491],[23.459072,42.743608],[23.470058,42.75218],[23.475122,42.753693],[23.46611,42.760751],[23.491344,42.789417],[23.492632,42.800439],[23.494091,42.803714],[23.491259,42.818196],[23.49349,42.821721],[23.48937,42.828898],[23.495808,42.833367],[23.496752,42.853065],[23.497267,42.858035],[23.494263,42.860804],[23.490143,42.860804],[23.487482,42.865144],[23.483019,42.865648],[23.479671,42.872756],[23.473148,42.874455],[23.468256,42.87263],[23.464565,42.877977],[23.463449,42.882128],[23.455296,42.880115],[23.456926,42.870932],[23.448944,42.861118],[23.446198,42.853379],[23.420963,42.857217],[23.409462,42.861307],[23.398132,42.857091],[23.394012,42.857217],[23.385773,42.85319],[23.379507,42.851995],[23.373241,42.850611],[23.367748,42.851806],[23.362856,42.855833],[23.358049,42.863383],[23.336678,42.872567],[23.327236,42.891058],[23.32552,42.897346],[23.289986,42.906903],[23.258915,42.894579],[23.249474,42.856085],[23.255997,42.850925],[23.246727,42.824365],[23.249989,42.797164],[23.251791,42.796156],[23.264494,42.800691],[23.266125,42.798613],[23.275309,42.800439],[23.284149,42.787716],[23.287926,42.78589],[23.286896,42.783559],[23.293161,42.781606],[23.302088,42.780346],[23.312559,42.780535],[23.313847,42.779779],[23.31728,42.780346],[23.31728,42.788724],[23.322601,42.790362],[23.325348,42.786583],[23.32346,42.785197],[23.338566,42.785449],[23.329124,42.7576],[23.339252,42.763272],[23.377018,42.759365],[23.37925,42.758357],[23.378563,42.75508]]]]},"properties":{"cartodb_id":18,"stroke_opacity":1,"stroke_width":2,"name":"Нови искър","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.195615,42.697198],[23.194928,42.695369],[23.192139,42.692246],[23.1898,42.693918],[23.188062,42.69529],[23.184628,42.694028],[23.178792,42.697356],[23.175144,42.695243],[23.170595,42.694517],[23.168321,42.691174],[23.159137,42.693602],[23.159051,42.696788],[23.154116,42.693634],[23.149309,42.688776],[23.142743,42.680637],[23.141627,42.676409],[23.14137,42.670667],[23.147249,42.664356],[23.162441,42.654793],[23.169994,42.653594],[23.174028,42.649049],[23.184586,42.646397],[23.198318,42.651763],[23.204584,42.655677],[23.220978,42.662683],[23.24192,42.670446],[23.251705,42.671582],[23.260031,42.665208],[23.272305,42.671834],[23.268957,42.674043],[23.27033,42.675116],[23.27179,42.679659],[23.277197,42.683571],[23.273592,42.685653],[23.273592,42.686473],[23.268871,42.690006],[23.265696,42.690196],[23.260374,42.691773],[23.259001,42.691584],[23.2584,42.690196],[23.256683,42.690448],[23.254366,42.690259],[23.25325,42.692025],[23.251534,42.691773],[23.242865,42.692467],[23.239431,42.691584],[23.237114,42.689502],[23.235998,42.68742],[23.235826,42.685842],[23.23205,42.687231],[23.229818,42.691016],[23.230247,42.708552],[23.228703,42.708615],[23.224239,42.707416],[23.217888,42.709939],[23.212309,42.706407],[23.210678,42.704515],[23.202696,42.701614],[23.195615,42.697198]]]]},"properties":{"cartodb_id":19,"stroke_opacity":1,"stroke_width":2,"name":"Овча купел","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.14167,42.678019],[23.119354,42.680921],[23.102531,42.688114],[23.10236,42.698207],[23.069744,42.699091],[23.051891,42.701866],[23.04554,42.710444],[23.070431,42.727722],[23.076096,42.734657],[23.088455,42.744365],[23.104248,42.743104],[23.119526,42.741717],[23.1427,42.73907],[23.158665,42.741591],[23.178749,42.74323],[23.186989,42.747264],[23.204155,42.746508],[23.211708,42.744491],[23.198833,42.729487],[23.195143,42.727911],[23.198404,42.722741],[23.200035,42.722425],[23.199177,42.72129],[23.200378,42.719336],[23.199177,42.717885],[23.194113,42.718516],[23.193426,42.715552],[23.19643,42.714921],[23.196945,42.713912],[23.202267,42.714795],[23.202868,42.714228],[23.20158,42.713597],[23.205528,42.710255],[23.202009,42.706155],[23.19952,42.705209],[23.196945,42.703569],[23.194456,42.698901],[23.195314,42.697261],[23.195143,42.695684],[23.192225,42.69253],[23.188276,42.695495],[23.184586,42.694422],[23.178835,42.69764],[23.175058,42.695495],[23.170424,42.694738],[23.168278,42.691394],[23.159437,42.693855],[23.159008,42.696946],[23.153944,42.693918],[23.142271,42.680669],[23.14167,42.678019]]]]},"properties":{"cartodb_id":21,"stroke_opacity":1,"stroke_width":2,"name":"Банкя","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.453236,42.687294],[23.449459,42.707921],[23.459845,42.707227],[23.463364,42.701235],[23.48156,42.696126],[23.486195,42.693098],[23.485079,42.689312],[23.483791,42.685464],[23.49967,42.681363],[23.506794,42.676883],[23.513489,42.680795],[23.516922,42.677388],[23.530483,42.683445],[23.541126,42.685212],[23.550568,42.69682],[23.552284,42.703884],[23.560696,42.709182],[23.584042,42.711705],[23.594341,42.710948],[23.604469,42.717002],[23.609276,42.731631],[23.609962,42.734531],[23.618031,42.737683],[23.62318,42.740078],[23.63039,42.74739],[23.63142,42.753567],[23.649101,42.767809],[23.651161,42.779905],[23.668671,42.777259],[23.678284,42.790866],[23.694077,42.817062],[23.711243,42.821595],[23.713303,42.831667],[23.69133,42.835192],[23.661804,42.824617],[23.653564,42.847275],[23.647385,42.854323],[23.614426,42.85533],[23.586273,42.840731],[23.555374,42.842744],[23.541641,42.846772],[23.529968,42.854323],[23.510742,42.858853],[23.498039,42.858224],[23.495808,42.833556],[23.489799,42.829023],[23.493919,42.821847],[23.491688,42.818322],[23.494263,42.803714],[23.492718,42.799809],[23.491688,42.789228],[23.466454,42.760877],[23.47538,42.753693],[23.470402,42.752054],[23.459072,42.743356],[23.454437,42.744365],[23.447914,42.733018],[23.440876,42.731883],[23.443794,42.719273],[23.439331,42.717255],[23.417187,42.726083],[23.407402,42.731253],[23.4062,42.735161],[23.396759,42.737431],[23.397102,42.740961],[23.391609,42.742852],[23.387489,42.747769],[23.382854,42.749281],[23.37822,42.754954],[23.356419,42.748021],[23.352985,42.739448],[23.354874,42.726461],[23.367577,42.722552],[23.372211,42.71902],[23.373585,42.717002],[23.37925,42.716876],[23.390579,42.714984],[23.389378,42.71057],[23.398991,42.709182],[23.403969,42.706533],[23.399763,42.705398],[23.414354,42.701424],[23.415556,42.699658],[23.418732,42.699532],[23.419161,42.698334],[23.426628,42.69764],[23.425856,42.691584],[23.422165,42.688682],[23.435726,42.686663],[23.43667,42.688303],[23.435211,42.688619],[23.436155,42.690133],[23.441734,42.68988],[23.441477,42.686789],[23.443708,42.686347],[23.445253,42.688619],[23.453236,42.687294]]]]},"properties":{"cartodb_id":22,"stroke_opacity":1,"stroke_width":2,"name":"Кремиковци","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.506107,42.676504],[23.503532,42.654919],[23.504734,42.645829],[23.504906,42.644314],[23.496838,42.639768],[23.507481,42.63901],[23.510742,42.64343],[23.527737,42.639515],[23.53838,42.637368],[23.528252,42.615518],[23.531685,42.607053],[23.535805,42.591511],[23.540096,42.564966],[23.53838,42.541066],[23.554344,42.52576],[23.572197,42.509312],[23.573914,42.502731],[23.59623,42.492732],[23.609962,42.481719],[23.63039,42.482985],[23.646183,42.470577],[23.660431,42.445755],[23.666096,42.431566],[23.669872,42.413445],[23.636055,42.397347],[23.605328,42.394558],[23.562241,42.402798],[23.532372,42.414586],[23.514862,42.416867],[23.5322,42.461713],[23.52396,42.481972],[23.51263,42.496656],[23.505077,42.50754],[23.501644,42.514373],[23.474007,42.522344],[23.454781,42.525254],[23.447399,42.52614],[23.440876,42.523736],[23.430233,42.522344],[23.416672,42.506528],[23.446541,42.48577],[23.454437,42.47159],[23.447914,42.455634],[23.429031,42.443981],[23.400879,42.448795],[23.374786,42.472097],[23.358994,42.484251],[23.331871,42.508552],[23.317451,42.531579],[23.289299,42.554092],[23.282433,42.564966],[23.285608,42.565914],[23.292217,42.57489],[23.297367,42.58715],[23.299255,42.58892],[23.311958,42.58892],[23.312387,42.594164],[23.319769,42.592016],[23.32406,42.593659],[23.332214,42.594796],[23.339081,42.597829],[23.348265,42.600167],[23.349552,42.603199],[23.350925,42.604273],[23.354445,42.604463],[23.356676,42.605474],[23.360367,42.609138],[23.364058,42.61078],[23.365517,42.611854],[23.374186,42.615075],[23.375902,42.616781],[23.376846,42.617033],[23.37882,42.618739],[23.379164,42.620065],[23.380966,42.620697],[23.381739,42.620634],[23.38294,42.621202],[23.385944,42.621644],[23.385172,42.62316],[23.405943,42.622528],[23.406286,42.621455],[23.409204,42.621202],[23.409805,42.622149],[23.414268,42.622023],[23.420019,42.626318],[23.419418,42.63257],[23.417788,42.634274],[23.418732,42.636863],[23.448257,42.632948],[23.455124,42.655551],[23.440361,42.659149],[23.443279,42.663125],[23.44594,42.668237],[23.451433,42.665271],[23.454008,42.664703],[23.454437,42.666722],[23.456755,42.667417],[23.449717,42.707858],[23.459587,42.707227],[23.463192,42.701361],[23.481131,42.696126],[23.486023,42.693098],[23.48362,42.68559],[23.49967,42.6813],[23.506365,42.677009],[23.506107,42.676504]]]]},"properties":{"cartodb_id":23,"stroke_opacity":1,"stroke_width":2,"name":"Панчарево","fill":"#555555","stroke":"#555555","fill_opacity":0.5}},{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[23.384829,42.623049],[23.386374,42.621786],[23.383091,42.621281],[23.381546,42.620665],[23.380966,42.620649],[23.378971,42.620065],[23.378563,42.618865],[23.376782,42.617112],[23.375967,42.616891],[23.373928,42.615123],[23.373027,42.614918],[23.367405,42.612549],[23.365602,42.61198],[23.363757,42.610717],[23.36041,42.609138],[23.357105,42.605853],[23.355045,42.604652],[23.350754,42.604147],[23.34938,42.603136],[23.348007,42.600167],[23.339338,42.597892],[23.332043,42.59486],[23.324404,42.594038],[23.319855,42.592143],[23.312173,42.594228],[23.311744,42.589015],[23.299255,42.588983],[23.29741,42.587119],[23.292046,42.57508],[23.285608,42.566041],[23.278227,42.563638],[23.263721,42.564018],[23.253508,42.568759],[23.248014,42.578808],[23.237972,42.585634],[23.212738,42.586898],[23.191538,42.589362],[23.185959,42.591827],[23.163729,42.59309],[23.155746,42.593469],[23.153172,42.593027],[23.143988,42.587972],[23.136177,42.591132],[23.133516,42.600104],[23.145018,42.602378],[23.149395,42.605158],[23.158836,42.607622],[23.170252,42.613623],[23.175144,42.622213],[23.176002,42.631433],[23.167076,42.63699],[23.173599,42.649112],[23.184671,42.646271],[23.198233,42.651763],[23.204327,42.655614],[23.24132,42.67032],[23.251534,42.671645],[23.259859,42.665334],[23.272305,42.671645],[23.276854,42.669121],[23.28784,42.665334],[23.286638,42.663945],[23.284321,42.656561],[23.282862,42.653973],[23.355732,42.624107],[23.384829,42.623049]]]]},"properties":{"cartodb_id":20,"stroke_opacity":1,"stroke_width":2,"name":"Витоша","fill":"#555555","stroke":"#555555","fill_opacity":0.5}}]}
+
+const getCentroid = (arr) => {
+ let twoTimesSignedArea = 0;
+ let cxTimes6SignedArea = 0;
+ let cyTimes6SignedArea = 0;
+
+ const length = arr.length
+
+ const x = function (i) { return arr[i % length][0] };
+ const y = function (i) { return arr[i % length][1] };
+
+ for ( let i = 0; i < arr.length; i++) {
+ const twoSA = x(i)*y(i+1) - x(i+1)*y(i);
+ twoTimesSignedArea += twoSA;
+ cxTimes6SignedArea += (x(i) + x(i+1)) * twoSA;
+ cyTimes6SignedArea += (y(i) + y(i+1)) * twoSA;
+ }
+ const sixSignedArea = 3 * twoTimesSignedArea;
+ return [ cxTimes6SignedArea / sixSignedArea, cyTimes6SignedArea / sixSignedArea];
+}
+
+export default function Map() {
+
+ // eslint-disable-next-line
+ const [selectedFeature, setSelectedFeature] = useState(null)
+
+ //eslint-disable-next-lin
+ const mapRef = useRef();
+
+ useEffect(() => {
+
+ const map = L.map(
+ mapRef.current,
+ {attributionControl: true}
+ ).setView(
+ [42.6659, 23.2610],
+ 18
+ );
+
+ L.tileLayer(
+ "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
+ {
+ attribution: '© OpenStreetMap contributors',
+ maxZoom: 18,
+ scrollWheelZoom: false,
+ }).addTo(map);
+
+ // unmount map function
+ //You should unmount the function in react.js to remove the existing map.
+ return () => map.remove();
+ }, []);
+
+ const [markerPosition, setMarkerPosition] = useState({ lat:42.665996698884385, lng:23.261060714721683 })
+
+ const markerRef = useRef(null)
+ const customIcon = L.icon({
+ iconUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png',
+ iconSize: [35,46],
+ iconAnchor: [17,46]
+ });
+
+ useEffect(() => {
+ if(markerRef.current) {
+ markerRef.current.setLatLng(markerPosition)
+ } else {
+ markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Business Center Andromeda')
+ }
+ // unmount map function
+ //You should unmount the function in react.js to remove the existing map.
+ return () => map.remove();
+ }, [markerPosition, customIcon]);
+
+ const geoJSONRef = useRef();
+
+ useEffect(() => {
+ const style = (...args) => {
+ const feature = args[0][0]
+ return {
+ fillColor: getColor(feature.properties.name, args[args.length-1]),
+ weight: 1,
+ opacity: 0.7,
+ color: 'white',
+ dashArray: '3',
+ fillOpacity: 0.7
+ };
+ }
+
+ const getColor = (featureName, selectedFeature) => {
+ return featureName === selectedFeature ? '#555555' : '#45c92a'
+ }
+
+ const onEachFeature = (feature, layer) => {
+ layer.on('click', (e) => {
+ const name = feature.properties.name
+ setSelectedFeature(name)
+ const centerSelectedFeature = getCentroid(feature.geometry.coordinates[0][0])
+ setMarkerPosition({lat: centerSelectedFeature[1], lng: centerSelectedFeature[0]})
+ })
+ }
+
+ if(geoJSONRef.current !== null)
+ geoJSONRef.current.clearLayers()
+
+ geoJSONRef.current = null
+ geoJSONRef.current = L.geoJSON(sofiaRegions, {
+ style: (...args) => {
+ return style(args, selectedFeature)
+ },
+ onEachFeature: onEachFeature
+ }).addTo(mapRef.current)
+ // unmount map function
+ //You should unmount the function in react.js to remove the existing map.
+ return () => map.remove();
+ }, [selectedFeature])
+
+
+ return (
+ mapRef.current = el}>
+
+ );
+};
+//https://github.com/azaharyan/react-leaflet-example
diff --git a/leaflet-js-intg/app/pages/home.jsx b/leaflet-js-intg/app/pages/home.jsx
index c8fcf32..b13395a 100644
--- a/leaflet-js-intg/app/pages/home.jsx
+++ b/leaflet-js-intg/app/pages/home.jsx
@@ -1,12 +1,27 @@
import React from 'react';
+
import Hello from '../components/hello';
+//TODO Why is this component not working?
+//import Map from '../components/map';
+import MapSimple from '../components/map-simple';
+import MapNext from '../components/map-next';
+import MapNxt from '../components/map-nxt';
+//TODO Why is this component not working?
+//import MapNxt2 from '../components/map-nxt2';
import '../style.css';
+
const Home = () => {
return (
<>
Home
(React.js Lambda Function Component)
React Example
+