68 lines
30 KiB
JavaScript
68 lines
30 KiB
JavaScript
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:
|
|
'© <a href="http://osm.org/copyright">OpenStreetMap</a> 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 <div id='map' style={{ width: '80%' }}></div>
|
|
}
|
|
|
|
export default MapGeoJSON
|