mapboxgl.accessToken = 'pk.eyJ1IjoiYW1pdHJlZ2V2IiwiYSI6ImNreHNyMmE1bTY3YnIydnFoMXJjemZ6Y2gifQ.nte2VEt3Ht3ryQJ61XAlzA'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/amitregev/ckxt2ckp91xvd14lev5m5mkzm', // style URL center: [-96.5475981, 33.008648634112525], zoom: 12 }); // disable map zoom when using scroll map.scrollZoom.disable(); map.dragRotate.disable(); map.keyboard.disable(); map.dragPan.disable(); map.on('load', () => { // Wylie loadPolygon(map, [ [-96.54759788432308, 33.04191954915543], [-96.54370180564696, 33.04175931033463], [-96.53984329074126, 33.0412801388086], [-96.53605953998398, 33.04048665444047], [-96.53238703053111, 33.03938650732874], [-96.52886116357549, 33.037990303808805], [-96.52551592214734, 33.03631150387212], [-96.52238354280045, 33.03436629100822], [-96.51949420438623, 33.03217341574325], [-96.51687573694232, 33.02975401440539], [-96.51455335351738, 33.02713140488776], [-96.51254940752052, 33.024330861402105], [-96.51088317792586, 33.021379370418784], [-96.50957068438198, 33.018305370168725], [-96.5086245339767, 33.01513847623916], [-96.50805280109259, 33.01190919592635], [-96.50786294146155, 33.008648634112525], [-96.50805574118996, 33.00538819351211], [-96.50862930118523, 33.00215927218135], [-96.50957805707132, 32.99899296120704], [-96.51089283333846, 32.99591974548278], [-96.51256093713667, 32.99296921044699], [-96.5145662757928, 32.99016975759407], [-96.51688951681355, 32.98754833148201], [-96.51950827383277, 32.98513016084497], [-96.52239732267348, 32.982938516280925], [-96.52552884442613, 32.98099448682289], [-96.52887269319602, 32.97931677751939], [-96.53239668594839, 32.9779215299475], [-96.53606691167764, 32.97682216736212], [-96.53984805695312, 32.97602926594966], [-96.54370374474611, 32.97555045340598], [-96.54759788432308, 32.97539033579869], [-96.55149202390003, 32.97555045340598], [-96.55534771169301, 32.97602926594966], [-96.55912885696849, 32.97682216736212], [-96.56279908269775, 32.9779215299475], [-96.56632307545012, 32.97931677751939], [-96.56966692422001, 32.98099448682289], [-96.57279844597266, 32.982938516280925], [-96.57568749481338, 32.98513016084497], [-96.5783062518326, 32.98754833148201], [-96.58062949285333, 32.99016975759407], [-96.58263483150945, 32.99296921044699], [-96.5843029353077, 32.99591974548278], [-96.58561771257484, 32.99899296120704], [-96.5865664684609, 33.00215927218135], [-96.58714002845619, 33.00538819351211], [-96.58733282818459, 33.008648634112525], [-96.58714296855355, 33.01190919592635], [-96.58657223566944, 33.01513847623916], [-96.58562608526416, 33.018305370168725], [-96.58431359172029, 33.021379370418784], [-96.58264736212563, 33.024330861402105], [-96.58064341612878, 33.02713140488776], [-96.57832103270383, 33.02975401440539], [-96.57570256525993, 33.03217341574325], [-96.57281322684571, 33.03436629100822], [-96.56968084749882, 33.03631150387212], [-96.56633560607067, 33.037990303808805], [-96.56280973911505, 33.03938650732874], [-96.55913722966218, 33.04048665444047], [-96.5553534789049, 33.0412801388086], [-96.5514949639992, 33.04175931033463], [-96.54759788432308, 33.04191954915543] ], 'poly1', 'outline1' ); // 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'); }); 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-wylie").classList.remove('selected'); document.getElementById("center-granbury").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-wylie").classList.remove('selected'); center_granbury.classList.add("selected"); }); const center_wylie = document.getElementById("center-wylie"); center_wylie.addEventListener("click", event => { // fly with default options to null island map.flyTo({ center: [-96.5475981, 33.008648634112525], zoom: 12 }); // Mark the correct label as selected document.getElementById("center-littleelm").classList.remove('selected'); document.getElementById("center-granbury").classList.remove('selected'); center_wylie.classList.add("selected"); });