mapboxgl.accessToken = 'pk.eyJ1IjoiYW1pdHJlZ2V2IiwiYSI6ImNreHNyMmE1bTY3YnIydnFoMXJjemZ6Y2gifQ.nte2VEt3Ht3ryQJ61XAlzA'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/amitregev/ckxt2ckp91xvd14lev5m5mkzm', // style URL center: [-97.77436223230066, 32.43122897909017], zoom: 12 }); // disable map zoom when using scroll map.scrollZoom.disable(); map.dragRotate.disable(); map.keyboard.disable(); map.dragPan.disable(); map.on('load', () => { // HollySprings loadPolygon(map, [ [ -78.84519264446354,35.6994511623112], [-78.84920368329354,35.69929107356641], [-78.85317604571638,35.69881235099176], [-78.8570714296448,35.69801961062632], [-78.86085227795505,35.696920496214744], [-78.86448214181657,35.69552560523856], [-78.86792603314552,35.69384838637865], [-78.87115076273247,35.69190500941499], [-78.87412526074306,35.68971420883866], [-78.8768208764713,35.687297102708484], [-78.87921165443862,35.68467698852389], [-78.88127458417273,35.681879118109265], [-78.88298982126851,35.678930453706336], [-78.88434087762299,35.67585940765114], [-78.88531477904644,35.67269556816836], [-78.88590218877727,35.669469413945684], [-78.88609749576663,35.66621202025537], [-78.88589886694552,35.66295475946673], [-78.88530826303898,35.65972899884172], [-78.88433141784607,35.656565798526906], [-78.88297778125575,35.65349561264713], [-78.88126042661474,35.650547996371024], [-78.87919592340211,35.647751321755784], [-78.87680417649095,35.64513250508923], [-78.87410823358962,35.64271674833289], [-78.8711340627499,35.64052729713053], [-78.86791030210492,35.638585217685254], [-78.86446798425322,35.636909194625254], [-78.86084023793647,35.63551535177652], [-78.8570619698625,35.634417097540975], [-78.85316952970481,35.63362499634403], [-78.84920036145957,35.633146667367406], [-78.84519264446354,35.6329867115244], [-78.84118492746751,35.633146667367406], [-78.83721575922226,35.63362499634403], [-78.83332331906456,35.634417097540975], [-78.82954505099059,35.63551535177652], [-78.82591730467385,35.636909194625254], [-78.82247498682216,35.638585217685254], [-78.81925122617717,35.64052729713053], [-78.81627705533745,35.64271674833289], [-78.81358111243611,35.64513250508923], [-78.81118936552495,35.647751321755784], [-78.80912486231232,35.650547996371024], [-78.80740750767133,35.65349561264713], [-78.80605387108099,35.656565798526906], [-78.8050770258881,35.65972899884172], [-78.80448642198154,35.66295475946673], [-78.80428779316043,35.66621202025537], [-78.8044831001498,35.669469413945684], [-78.80507050988064,35.67269556816836], [-78.80604441130409,35.67585940765114], [-78.80739546765855,35.678930453706336], [-78.80911070475435,35.681879118109265], [-78.81117363448845,35.68467698852389], [-78.81356441245578,35.687297102708484], [-78.816260028184,35.68971420883866], [-78.81923452619459,35.69190500941499], [-78.82245925578154,35.69384838637865], [-78.8259031471105,35.69552560523856], [-78.82953301097203,35.696920496214744], [-78.83331385928227,35.69801961062632], [-78.83720924321068,35.69881235099176], [-78.84118160563354,35.69929107356641], [-78.84519264446354,35.6994511623112] ], 'poly1', 'outline1'); // Raeford loadPolygon(map, [ [-79.17395357278171,35.043054725309695], [-79.17794644343297,35.04289406167174], [-79.1819008138403,35.0424136199216], [-79.18577855633707,35.04161803255866], [-79.18954228475373,35.040514970589356], [-79.19315571606032,35.039115069301914], [-79.19658402118746,35.037431825372956], [-79.19979416159367,35.03548146631471], [-79.20275520829307,35.033282793542455], [-79.20543864023917,35.03085700059874], [-79.20781861917064,35.02822746831205], [-79.2098722382661,35.025419538891356], [-79.21157974222032,35.0224602711601], [-79.21292471664299,35.01937817931448], [-79.21389424498925,35.01620295774638], [-79.21447903155527,35.012965194603545], [-79.21467348940811,35.009696076862824], [-79.21447579246464,35.006427089770575], [-79.2138878912843,35.00318971355241], [-79.2129154924928,35.000015120315915], [-79.21156800210353,34.99693387406239], [-79.20985843334849,34.99397563668819], [-79.20780327996715,34.991168882793446], [-79.20542235622659,34.988540626026854], [-79.20273860525676,34.98611615957988], [-79.19977787757897,34.983918813304484], [-79.19656868198005,34.981969729766675], [-79.19314191113756,34.98028766136418], [-79.18953054463137,34.978888790434375], [-79.18576933218174,34.977786574057795], [-79.1818944601314,34.97699161502697], [-79.17794320434021,34.97651156020185], [-79.17395357278171,34.97635102721247], [-79.16996394122323,34.97651156020185], [-79.16601268543205,34.97699161502697], [-79.1621378133817,34.977786574057795], [-79.15837660093207,34.978888790434375], [-79.15476523442588,34.98028766136418], [-79.15133846358339,34.981969729766675], [-79.14812926798449,34.983918813304484], [-79.14516854030668,34.98611615957988], [-79.14248478933686,34.988540626026854], [-79.14010386559629,34.991168882793446], [-79.13804871221497,34.99397563668819], [-79.1363391434599,34.99693387406239], [-79.13499165307064,35.000015120315915], [-79.13401925427915,35.00318971355241], [-79.1334313530988,35.006427089770575], [-79.13323365615533,35.009696076862824], [-79.13342811400817,35.012965194603545], [-79.13401290057419,35.01620295774638], [-79.13498242892047,35.01937817931448], [-79.13632740334312,35.0224602711601], [-79.13803490729735,35.025419538891356], [-79.14008852639282,35.02822746831205], [-79.14246850532427,35.03085700059874], [-79.14515193727037,35.033282793542455], [-79.14811298396977,35.03548146631471], [-79.15132312437598,35.037431825372956], [-79.15475142950314,35.039115069301914], [-79.15836486080971,35.040514970589356], [-79.16212858922637,35.04161803255866], [-79.16600633172315,35.0424136199216], [-79.16996070213047,35.04289406167174], [-79.17395357278171,35.043054725309695] ], 'poly2', 'outline2'); // Granbury loadPolygon(map, [ [-97.77468649364447,32.46499070013612], [-97.77855436138535,32.46483032039528], [-97.78238493846608,32.4643507274214], [-97.78614129493387,32.463556545003456], [-97.78978721871583,32.462455429746775], [-97.79328756575875,32.461057997020056], [-97.79660859970951,32.459377718298896], [-97.79971831781849,32.45743079091072], [-97.8025867598879,32.45523598145566], [-97.8051862972617,32.45281444443398], [-97.80749189905605,32.45018951785153], [-97.80948137306115,32.44738649779721], [-97.81113557900035,32.444432394189164], [-97.81243861211112,32.44135567006625], [-97.81337795530887,32.43818596695865], [-97.81394459850709,32.434953819001635], [-97.81413312399243,32.43169035856238], [-97.81394175708583,32.428427016226536], [-97.81337238166046,32.425195218041104], [-97.81243052042761,32.422026082931765], [-97.81112528024033,32.41895012320596], [-97.80946926299994,32.41599695101852], [-97.80747844307628,32.4131949936144], [-97.80517201246894,32.41057122007468], [-97.80257219523867,32.40815088217751], [-97.79970403302404,32.40595727184706], [-97.79659514372659,32.404011497501905], [-97.79327545569342,32.402332281431356], [-97.78977691995138,32.40093578012575], [-97.78613320324624,32.399835429266666], [-97.78237936481456,32.39904181484741], [-97.77855151996238,32.3985625716454], [-97.77468649364447,32.39840231000808], [-97.77082146732654,32.3985625716454], [-97.76699362247436,32.39904181484741], [-97.76323978404268,32.399835429266666], [-97.75959606733753,32.40093578012575], [-97.75609753159549,32.402332281431356], [-97.75277784356231,32.404011497501905], [-97.74966895426488,32.40595727184706], [-97.74680079205027,32.40815088217751], [-97.74420097481996,32.41057122007468], [-97.74189454421264,32.4131949936144], [-97.739903724289,32.41599695101852], [-97.73824770704857,32.41895012320596], [-97.73694246686131,32.422026082931765], [-97.73600060562845,32.425195218041104], [-97.73543123020308,32.428427016226536], [-97.73523986329647,32.43169035856238], [-97.73542838878183,32.434953819001635], [-97.73599503198004,32.43818596695865], [-97.73693437517778,32.44135567006625], [-97.73823740828857,32.444432394189164], [-97.73989161422776,32.44738649779721], [-97.74188108823287,32.45018951785153], [-97.74418669002722,32.45281444443398], [-97.746786227401,32.45523598145566], [-97.74965466947043,32.45743079091072], [-97.75276438757942,32.459377718298896], [-97.75608542153017,32.461057997020056], [-97.75958576857307,32.462455429746775], [-97.76323169235505,32.463556545003456], [-97.76698804882284,32.4643507274214], [-97.77081862590357,32.46483032039528], [-97.77468649364447,32.46499070013612] ], 'poly4', 'outline4'); // Little Elm loadPolygon(map, [ [-96.89250588660708,33.18936634848827], [-96.8964019652832,33.189206109667474], [-96.9002604801889,33.18872693814144], [-96.90404423094618,33.187933453773304], [-96.90771674039905,33.18683330666158], [-96.91124260735467,33.185437103141645], [-96.91458784878282,33.18375830320496], [-96.91772022812971,33.18181309034106], [-96.92060956654393,33.17962021507609], [-96.92322803398784,33.17720081373823], [-96.92555041741278,33.1745782042206], [-96.92755436340964,33.171777660734946], [-96.92922059300429,33.168826169751625], [-96.93053308654817,33.165752169501566], [-96.93147923695345,33.162585275572], [-96.93204996983756,33.15935599525919], [-96.9322398294686,33.156095433445365], [-96.93204702974019,33.15283499284495], [-96.93147346974492,33.14960607151419], [-96.93052471385883,33.14643976053988], [-96.92920993659169,33.14336654481562], [-96.92754183279348,33.14041600977983], [-96.92553649413735,33.13761655692691], [-96.9232132531166,33.13499513081485], [-96.92059449609738,33.132576960177815], [-96.91770544725667,33.13038531561377], [-96.91457392550402,33.12844128615574], [-96.91123007673413,33.12676357685224], [-96.90770608398176,33.12536832928035], [-96.90403585825251,33.12426896669497], [-96.90025471297703,33.12347606528251], [-96.89639902518404,33.122997252738834], [-96.89250588660708,33.12283713513154], [-96.88861274803014,33.122997252738834], [-96.88475706023716,33.12347606528251], [-96.88097591496167,33.12426896669497], [-96.87730568923243,33.12536832928035], [-96.87378169648007,33.12676357685224], [-96.87043784771016,33.12844128615574], [-96.86730632595753,33.13038531561377], [-96.8644172771168,33.132576960177815], [-96.86179852009758,33.13499513081485], [-96.85947527907685,33.13761655692691], [-96.85746994042073,33.14041600977983], [-96.85580183662249,33.14336654481562], [-96.85448705935535,33.14643976053988], [-96.85353830346929,33.14960607151419], [-96.852964743474,33.15283499284495], [-96.8527719437456,33.156095433445365], [-96.85296180337663,33.15935599525919], [-96.85353253626074,33.162585275572], [-96.85447868666604,33.165752169501566], [-96.85579118020992,33.168826169751625], [-96.85745740980455,33.171777660734946], [-96.8594613558014,33.1745782042206], [-96.86178373922635,33.17720081373823], [-96.86440220667025,33.17962021507609], [-96.86729154508448,33.18181309034106], [-96.87042392443139,33.18375830320496], [-96.87376916585953,33.185437103141645], [-96.87729503281514,33.18683330666158], [-96.880967542268,33.187933453773304], [-96.88475129302529,33.18872693814144], [-96.88860980793099,33.189206109667474], [-96.89250588660708,33.18936634848827] ], 'poly5', 'outline5'); // Durham /* loadPolygon(map, [ [-78.93493237447014,35.93621306480916], [-78.938959524757,35.936052810997374], [-78.94294784281136,35.93557359483221], [-78.94685887224682,35.93478003716778], [-78.95065490467726,35.93367978971959], [-78.95429934452602,35.93228346101529], [-78.95775706291225,35.93060451374556], [-78.96099473715098,35.928659134522555], [-78.96398117255123,35.92646607732281], [-78.96668760337907,35.92404648214814], [-78.96908797006695,35.921423670679374], [-78.97115916999233,35.91862292091951], [-78.97288127941852,35.91567122302626], [-78.97423774448154,35.91259701871309], [-78.9752155394181,35.90942992675428], [-78.97580529055742,35.90620045725994], [-78.97600136493857,35.90293971749124], [-78.97580192276419,35.899679112062366], [-78.97520893325392,35.89645004042494], [-78.97422815381738,35.89328359455071], [-78.97286907281789,35.890210259721165], [-78.97114481654769,35.88725962129685], [-78.96907202137284,35.884460080276455], [-78.96667067233462,35.881838580366555], [-78.96396390980684,35.87942034916771], [-78.96097780610424,35.877228655943895], [-78.95774111421392,35.875284588280124], [-78.95428499107588,35.8736068497504], [-78.95064269807067,35.87221158051566], [-78.94684928157714,35.87111220255172], [-78.942941236643,35.87031929097241], [-78.9389561569615,35.86984047266452], [-78.93493237447014,35.8696803531927], [-78.93090859197876,35.86984047266452], [-78.92692351229728,35.87031929097241], [-78.92301546736314,35.87111220255172], [-78.9192220508696,35.87221158051566], [-78.91557975786439,35.8736068497504], [-78.91212363472636,35.875284588280124], [-78.90888694283603,35.877228655943895], [-78.90590083913344,35.87942034916771], [-78.90319407660566,35.881838580366555], [-78.90079272756743,35.884460080276455], [-78.89871993239258,35.88725962129685], [-78.89699567612239,35.890210259721165], [-78.8956365951229,35.89328359455071], [-78.89465581568633,35.89645004042494], [-78.89406282617608,35.899679112062366], [-78.8938633840017,35.90293971749124], [-78.89405945838287,35.90620045725994], [-78.89464920952217,35.90942992675428], [-78.89562700445873,35.91259701871309], [-78.89698346952174,35.91567122302626], [-78.89870557894794,35.91862292091951], [-78.90077677887332,35.921423670679374], [-78.90317714556119,35.92404648214814], [-78.90588357638904,35.92646607732281], [-78.90887001178929,35.928659134522555], [-78.91210768602802,35.93060451374556], [-78.91556540441425,35.93228346101529], [-78.91920984426301,35.93367978971959], [-78.92300587669345,35.93478003716778], [-78.9269169061289,35.93557359483221], [-78.93090522418328,35.936052810997374], [-78.93493237447014,35.93621306480916] ], 'poly5', 'outline5');*/ }); function loadPolygon(map, points, id, outline) { // Add a data source containing GeoJSON data. map.addSource(id, { 'type': 'geojson', 'data': { 'type': 'Feature', 'geometry': { 'type': 'Polygon', // These coordinates outline Maine. 'coordinates': [points] } } }); // Add a new layer to visualize the polygon. map.addLayer({ 'id': id, 'type': 'fill', 'source': id, // reference the data source 'layout': {}, 'paint': { 'fill-color': '#ffcc40', // blue color fill 'fill-opacity': 0.4 } }); // Add a black outline around the polygon. map.addLayer({ 'id': outline, 'type': 'line', 'source': id, 'layout': {}, 'paint': { 'line-color': '#ffcc40', 'line-width': 4 } }); } const center_littleelm = document.getElementById("center-littleelm"); center_littleelm.addEventListener("click", event => { // fly with default options to null island map.flyTo({ center: [-96.89254160138641, 33.156101045328576], zoom: 12 }); // Mark the correct label as selected document.getElementById("center-granbury").classList.remove('selected'); document.getElementById("center-hollysprings").classList.remove('selected'); document.getElementById("center-raeford").classList.remove('selected'); center_littleelm.classList.add("selected"); }); const center_granbury = document.getElementById("center-granbury"); center_granbury.addEventListener("click", event => { // fly with default options to null island map.flyTo({ center: [-97.774928, 32.431614], zoom: 12 }); // Mark the correct label as selected document.getElementById("center-littleelm").classList.remove('selected'); document.getElementById("center-hollysprings").classList.remove('selected'); document.getElementById("center-raeford").classList.remove('selected'); center_granbury.classList.add("selected"); }); const center_hollysprings = document.getElementById("center-hollysprings"); center_hollysprings.addEventListener("click", event => { // fly with default options to null island map.flyTo({ center: [-78.845121, 35.66629], zoom: 12 }); // Mark the correct label as selected document.getElementById("center-littleelm").classList.remove('selected'); document.getElementById("center-raeford").classList.remove('selected'); document.getElementById("center-granbury").classList.remove('selected'); center_hollysprings.classList.add("selected"); }); const center_raeford = document.getElementById("center-raeford"); center_raeford.addEventListener("click", event => { // fly with default options to null island map.flyTo({ center: [-79.174287, 35.010229], zoom: 12 }); // Mark the correct label as selected document.getElementById("center-littleelm").classList.remove('selected'); document.getElementById("center-hollysprings").classList.remove('selected'); document.getElementById("center-granbury").classList.remove('selected'); center_raeford.classList.add("selected"); });