Last active
November 25, 2025 05:46
-
-
Save RaczeQ/3e3b7d735e498693d6d5da1841b7571c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Trip animation – sequences (deck.gl + MapLibre)</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" /> | |
| <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> --> | |
| <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist.min.js"></script> | |
| <style> | |
| /* html, body {height:100%; background:#0b0b0b; overflow: hidden;} */ | |
| html, body {height:100%; background:fuchsia; overflow: hidden;} | |
| /* #map {height:95vh; aspect-ratio: 1 / 1; margin:30px auto; border-radius:12px; overflow:hidden; box-shadow:0 0 25px rgba(0,0,0,0.6);} */ | |
| #map {height:95vh; aspect-ratio: 1 / 1; margin:2.5vh auto; overflow:hidden;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| // --- example routes (3 trips) --- | |
| const trips = [{"path":[[-0.1299916771,51.5182884732],[-0.1300327361,51.5183239129],[-0.1300737952,51.5183593527],[-0.1301148543,51.5183947924],[-0.1301665094,51.5183713033],[-0.1302181644,51.5183478142],[-0.1302698194,51.5183243251],[-0.1303214743,51.5183008359],[-0.1303731292,51.5182773468],[-0.130424784,51.5182538576],[-0.1303922737,51.5182167693],[-0.1303597633,51.518179681],[-0.1303272531,51.5181425926],[-0.1302947428,51.5181055043],[-0.1302622327,51.518068416],[-0.1302297226,51.5180313276],[-0.1301972125,51.5179942393],[-0.1301647025,51.5179571509],[-0.1301321925,51.5179200626],[-0.1300996826,51.5178829742],[-0.1300671728,51.5178458858],[-0.1300363018,51.5178076559],[-0.1300054308,51.5177694261],[-0.1299745599,51.5177311962],[-0.129943689,51.5176929663],[-0.1299128182,51.5176547364],[-0.1298819474,51.5176165065],[-0.1298510767,51.5175782766],[-0.1298202061,51.5175400467],[-0.1297893354,51.5175018168],[-0.1297584649,51.5174635869],[-0.1297275944,51.517425357],[-0.1296967239,51.517387127],[-0.1296658535,51.5173488971],[-0.1295999781,51.5173633425],[-0.1295341027,51.5173777879],[-0.1294682272,51.5173922333],[-0.1294023517,51.5174066786],[-0.1293364762,51.5174211239],[-0.1292706006,51.5174355692],[-0.1292047249,51.5174500144],[-0.1291388493,51.5174644596],[-0.1290729736,51.5174789048],[-0.1290070978,51.5174933499],[-0.128941222,51.517507795],[-0.1288753462,51.51752224],[-0.1288094703,51.517536685],[-0.1287435944,51.51755113],[-0.1286777184,51.5175655749],[-0.1286118424,51.5175800198],[-0.1285459664,51.5175944646],[-0.1284800903,51.5176089094],[-0.1284142142,51.5176233542],[-0.1283782762,51.5175852603],[-0.1283423383,51.5175471663],[-0.1283064005,51.5175090724],[-0.1282704627,51.5174709784],[-0.128234525,51.5174328844],[-0.1281985874,51.5173947904],[-0.1281626498,51.5173566964],[-0.1281267122,51.5173186024],[-0.1280907748,51.5172805084],[-0.1280548374,51.5172424144],[-0.1280189,51.5172043203],[-0.1279829627,51.5171662263],[-0.1279470255,51.5171281322],[-0.1279110883,51.5170900381],[-0.1278727919,51.517054491],[-0.1278344956,51.5170189438],[-0.1277961994,51.5169833966],[-0.1277579032,51.5169478494],[-0.1277196071,51.5169123022],[-0.127681311,51.5168767549],[-0.127643015,51.5168412077],[-0.1276047191,51.5168056604],[-0.1275395254,51.5168154037],[-0.1274743316,51.516825147],[-0.1274091379,51.5168348902],[-0.1273439441,51.5168446334],[-0.1272787503,51.5168543766],[-0.1272135565,51.5168641197],[-0.1271483626,51.5168738628],[-0.1270831687,51.5168836058],[-0.1270179748,51.5168933489],[-0.1269527809,51.5169030918],[-0.1268875869,51.5169128348],[-0.1268583126,51.5168789059],[-0.1268290384,51.516844977],[-0.1267997643,51.5168110481],[-0.1267704901,51.5167771193],[-0.126741216,51.5167431904],[-0.126711942,51.5167092614],[-0.126682668,51.5166753325],[-0.1266503931,51.5166372363],[-0.1266181181,51.5165991401],[-0.1265858433,51.5165610439],[-0.1265535685,51.5165229476],[-0.1265212937,51.5164848514],[-0.126489019,51.5164467551],[-0.1264567444,51.5164086588],[-0.1264244698,51.5163705626],[-0.1263921953,51.5163324663],[-0.1263599208,51.51629437],[-0.1263573593,51.5162569111],[-0.1263547978,51.5162194523],[-0.1263774574,51.5161794796],[-0.1264001169,51.5161395069],[-0.1264227763,51.5160995342],[-0.1264454357,51.5160595615],[-0.1264680951,51.5160195888],[-0.1264907545,51.5159796161],[-0.1265134138,51.5159396434],[-0.126536073,51.5158996706],[-0.1265587322,51.5158596979],[-0.1265813914,51.5158197252],[-0.1266040505,51.5157797525],[-0.1266267096,51.5157397797],[-0.1266493687,51.515699807],[-0.1266797667,51.5156619523],[-0.1267101647,51.5156240977],[-0.1267405626,51.5155862431],[-0.1267709605,51.5155483884],[-0.1268013583,51.5155105337],[-0.1268317561,51.5154726791],[-0.1268461222,51.5154315007],[-0.1268604883,51.5153903223],[-0.1268748543,51.5153491439],[-0.1268892204,51.5153079655],[-0.1269035864,51.5152667871],[-0.1269179523,51.5152256088],[-0.1269323183,51.5151844304],[-0.1269466842,51.515143252],[-0.1268630994,51.5151042415],[-0.1268178247,51.5150543937],[-0.126824044,51.5150111246],[-0.1268302632,51.5149678555],[-0.1268364824,51.5149245865],[-0.1268427016,51.5148813174],[-0.1268489207,51.5148380483],[-0.1268551399,51.5147947792],[-0.126861359,51.5147515101],[-0.1268675782,51.5147082411],[-0.1268737973,51.514664972],[-0.1268800164,51.5146217029],[-0.1268862355,51.5145784338],[-0.1268924546,51.5145351647],[-0.1268986737,51.5144918956],[-0.1269048927,51.5144486266],[-0.1269111118,51.5144053575],[-0.1269173308,51.5143620884],[-0.1269235498,51.5143188193],[-0.1269297688,51.5142755502],[-0.1269359878,51.5142322811],[-0.1269422068,51.514189012],[-0.1269484257,51.5141457429],[-0.1269546447,51.5141024738],[-0.1269608636,51.5140592048],[-0.1269670826,51.5140159357],[-0.1269733015,51.5139726666],[-0.1269795204,51.5139293975],[-0.1269857393,51.5138861284],[-0.1269919582,51.5138428593],[-0.126961775,51.5138190184],[-0.1269315919,51.5137951775],[-0.1269014088,51.5137713366],[-0.1269310843,51.5137382475],[-0.1269607598,51.5137051585],[-0.1270563715,51.5137208759],[-0.1271086873,51.5137534335],[-0.127177497,51.5137410842],[-0.1272463065,51.5137287348],[-0.1273151161,51.5137163854],[-0.1273839256,51.513704036],[-0.1274527351,51.5136916865],[-0.1275215445,51.513679337],[-0.1275903539,51.5136669875],[-0.1276561964,51.5136556653],[-0.1277220388,51.5136443431],[-0.1277878811,51.5136330209],[-0.1278533771,51.5136226692],[-0.127918873,51.5136123175],[-0.1279843688,51.5136019658],[-0.1280498646,51.513591614],[-0.1281153604,51.5135812622],[-0.1281725394,51.5135667051],[-0.1281556456,51.5135311209],[-0.1281387518,51.5134955368],[-0.1280909293,51.5134631875],[-0.1280431069,51.5134308382],[-0.1279952845,51.5133984889],[-0.1279474622,51.5133661396],[-0.12789964,51.5133337902],[-0.1278548257,51.513303579],[-0.1278100115,51.5132733678],[-0.1277651973,51.5132431565],[-0.1277203832,51.5132129453],[-0.1276755692,51.513182734],[-0.1276307553,51.5131525227],[-0.1275859413,51.5131223114],[-0.1275411275,51.5130921],[-0.127503191,51.5130714711],[-0.1274652546,51.5130508421],[-0.1274273181,51.5130302131],[-0.1273846449,51.5130537059],[-0.1273419716,51.5130771988]],"timestamps":[0,0.0050122152,0.0100244341,0.0150366565,0.020280488,0.025524316,0.0307681404,0.0360119613,0.0412557786,0.0464995924,0.0510572868,0.0556149787,0.060172668,0.0647303547,0.0692880388,0.0738457203,0.0784033993,0.0829610757,0.0875187495,0.0920764207,0.0966340893,0.1011749601,0.1057158284,0.1102566944,0.114797558,0.1193384191,0.1238792779,0.1284201342,0.1329609882,0.1375018397,0.1420426889,0.1465835356,0.15112438,0.1556652219,0.1618974503,0.1681296816,0.1743619159,0.1805941531,0.1868263933,0.1930586364,0.1992908825,0.2055231315,0.2117553835,0.2179876384,0.2242198963,0.230452157,0.2366844208,0.2429166875,0.2491489571,0.2553812297,0.2616135052,0.2678457837,0.2740780651,0.2789176674,0.2837572667,0.2885968629,0.293436456,0.2982760461,0.3031156331,0.3079552171,0.312794798,0.3176343759,0.3224739507,0.3273135224,0.3321530911,0.3369926568,0.3418322194,0.3466608061,0.3514893896,0.3563179698,0.3611465468,0.3659751206,0.370803691,0.3756322583,0.3804608222,0.3865523215,0.3926438228,0.398735326,0.4048268312,0.4109183383,0.4170098474,0.4231013585,0.4291928715,0.4352843865,0.4413759035,0.4474674224,0.4516085621,0.4557496998,0.4598908353,0.4640319687,0.4681731001,0.4723142293,0.4764553564,0.4810694084,0.4856834579,0.4902975048,0.4949115491,0.4995255909,0.50413963,0.5087536666,0.5133677006,0.5179817321,0.5225957609,0.5260654394,0.529535118,0.5337812522,0.538027385,0.5422735163,0.5465196462,0.5507657746,0.5550119016,0.5592580272,0.5635041514,0.567750274,0.5719963953,0.5762425151,0.5804886335,0.5847347504,0.5892211999,0.5937076471,0.5981940919,0.6026805344,0.6071669745,0.6116534123,0.615683663,0.619713913,0.6237441625,0.6277744113,0.6318046594,0.635834907,0.639865154,0.6438954003,0.652419359,0.6586422353,0.6626818489,0.6667214624,0.6707610757,0.674800689,0.6788403022,0.6828799152,0.6869195282,0.6909591411,0.6949987538,0.6990383665,0.7030779791,0.7071175915,0.7111572039,0.7151968162,0.7192364283,0.7232760404,0.7273156524,0.7313552642,0.735394876,0.7394344877,0.7434740992,0.7475137107,0.7515533221,0.7555929333,0.7596325445,0.7636721556,0.7677117665,0.7717513774,0.775305777,0.7788601748,0.7824145707,0.7865219294,0.7906292859,0.7995834106,0.8052776908,0.8117380243,0.8181983553,0.8246586836,0.8311190093,0.8375793323,0.8440396527,0.8504999705,0.8566738127,0.8628476527,0.8690214903,0.8751491368,0.8812767812,0.8874044235,0.8935320638,0.8996597019,0.9051121933,0.9087523166,0.912392439,0.917727875,0.9230633068,0.9283987344,0.9337341578,0.939069577,0.9440640565,0.9490585324,0.9540530046,0.9590474732,0.964041938,0.9690363992,0.9740308567,0.9790253105,0.9830158342,0.9870063557,0.9909968748,0.995498436,1.0]},{"path":[[-0.1273419716,51.5130771988],[-0.1273780623,51.5130505431],[-0.127414153,51.5130238874],[-0.1273674125,51.5129944486],[-0.1273206721,51.5129650099],[-0.1272739317,51.5129355711],[-0.1272114234,51.512933994],[-0.1271489152,51.5129324169],[-0.1271443538,51.5129735259],[-0.1271397924,51.5130146349],[-0.127135231,51.5130557439],[-0.1271306696,51.5130968529],[-0.1271261082,51.5131379619],[-0.1271215468,51.5131790709],[-0.1271169853,51.5132201799],[-0.1271124239,51.5132612889],[-0.1271078625,51.5133023979],[-0.127103301,51.5133435069],[-0.1270949752,51.5133841111],[-0.1270866493,51.5134247153],[-0.1270783235,51.5134653195],[-0.1270699976,51.5135059237],[-0.1270616717,51.5135465279],[-0.1270533458,51.5135871321],[-0.1270450199,51.5136277363],[-0.127036694,51.5136683405],[-0.127028368,51.5137089447],[-0.1271043916,51.513749948],[-0.1270925657,51.5137846431],[-0.1270807398,51.5138193382],[-0.1270275233,51.5138266977],[-0.1269743068,51.5138340573],[-0.1269500918,51.5138067218],[-0.1269258769,51.5137793863],[-0.126901662,51.5137520507],[-0.1268421947,51.5137562563],[-0.1267827274,51.5137604618],[-0.1267232601,51.5137646672],[-0.1266637927,51.5137688727],[-0.1266043254,51.5137730781],[-0.1265462096,51.5137808582],[-0.1264880938,51.5137886384],[-0.126429978,51.5137964185],[-0.1263718622,51.5138041986],[-0.1263137464,51.5138119786],[-0.1262464847,51.5138202767],[-0.126179223,51.5138285748],[-0.1261119613,51.5138368729],[-0.1260446995,51.5138451709],[-0.1259774377,51.5138534689],[-0.125910176,51.5138617669],[-0.1258429141,51.5138700648],[-0.1257756523,51.5138783626],[-0.1257083904,51.5138866605],[-0.1256411286,51.5138949583],[-0.1255738666,51.513903256],[-0.1255066047,51.5139115537],[-0.1254393428,51.5139198514],[-0.1253720808,51.513928149],[-0.1253048188,51.5139364466],[-0.1252665254,51.5139564225],[-0.1252282321,51.5139763984],[-0.1251899387,51.5139963743],[-0.1252316937,51.5140287686],[-0.1252734487,51.5140611629],[-0.1253152038,51.5140935572],[-0.125356959,51.5141259515],[-0.1253987142,51.5141583458],[-0.1254404695,51.5141907401],[-0.1254849554,51.5142225516],[-0.1255294414,51.5142543631],[-0.1255739275,51.5142861746],[-0.1256184136,51.514317986],[-0.1256628998,51.5143497975],[-0.125707386,51.5143816089],[-0.1257518723,51.5144134203],[-0.1257054521,51.5144356883],[-0.1256590318,51.5144579562],[-0.1256126115,51.5144802242],[-0.1255661912,51.5145024921],[-0.1255129145,51.5145316963],[-0.1254596378,51.5145609005],[-0.125406361,51.5145901046],[-0.1253530841,51.5146193088],[-0.1252998072,51.5146485129],[-0.1252465302,51.5146777169],[-0.1251932532,51.514706921],[-0.125139976,51.514736125],[-0.1250866988,51.514765329],[-0.1250334216,51.514794533],[-0.1249801442,51.514823737],[-0.1249309906,51.5147917578],[-0.1248818371,51.5147597786],[-0.1248326837,51.5147277995],[-0.1247835303,51.5146958203],[-0.1247343769,51.514663841],[-0.1246852237,51.5146318618],[-0.1246360705,51.5145998825],[-0.1245869174,51.5145679032],[-0.124542425,51.5145343337],[-0.1244979326,51.5145007641],[-0.1244534404,51.5144671946],[-0.1244089482,51.514433625],[-0.124364456,51.5144000554],[-0.124319964,51.5143664858],[-0.124275472,51.5143329161],[-0.12423098,51.5142993465],[-0.1241817278,51.5143294206],[-0.1241324755,51.5143594947],[-0.1240832232,51.5143895688],[-0.1240339708,51.5144196428],[-0.1239847183,51.5144497169],[-0.1239354658,51.5144797909],[-0.1238862132,51.5145098649],[-0.1238369606,51.5145399388],[-0.1237877078,51.5145700128],[-0.123738455,51.5146000867],[-0.1236892022,51.5146301606],[-0.1236399493,51.5146602345],[-0.1235906963,51.5146903083],[-0.1235414432,51.5147203822],[-0.1234921901,51.514750456],[-0.1234455191,51.5147231115],[-0.1233988481,51.5146957669],[-0.1233521771,51.5146684224],[-0.1233055062,51.5146410778],[-0.1232588354,51.5146137332],[-0.1232121646,51.5145863886],[-0.1231654939,51.514559044],[-0.1231188232,51.5145316993],[-0.1230719509,51.5145012443],[-0.1230250786,51.5144707892],[-0.1229782064,51.5144403341],[-0.1229313342,51.514409879],[-0.1228844621,51.5143794239],[-0.1228375901,51.5143489688],[-0.1227907181,51.5143185136],[-0.1227438462,51.5142880584],[-0.1226969743,51.5142576032],[-0.1226501026,51.514227148],[-0.1226032308,51.5141966928],[-0.1226515179,51.5141660612],[-0.1226998049,51.5141354296],[-0.1227480919,51.514104798],[-0.1227963788,51.5140741663],[-0.1228446656,51.5140435347],[-0.1228929524,51.514012903],[-0.1229412391,51.5139822713],[-0.1229895257,51.5139516396],[-0.1230378123,51.5139210079],[-0.1230860988,51.5138903761],[-0.1231055749,51.5138496072],[-0.123125051,51.5138088383],[-0.1230688154,51.5137836424],[-0.1230125799,51.5137584465],[-0.1229563444,51.5137332506],[-0.122900109,51.5137080546],[-0.1228438736,51.5136828586],[-0.1227876383,51.5136576626],[-0.1227314031,51.5136324666],[-0.1226751679,51.5136072706],[-0.1226189328,51.5135820745],[-0.1225626978,51.5135568784],[-0.1225064628,51.5135316822],[-0.1224502279,51.5135064861],[-0.1223896518,51.5134847049],[-0.1223290758,51.5134629237],[-0.1222684999,51.5134411425],[-0.122207924,51.5134193612],[-0.1221616805,51.5133873193],[-0.1221154369,51.5133552773],[-0.1220691935,51.5133232354],[-0.1220229501,51.5132911934],[-0.1219767068,51.5132591514],[-0.1219304635,51.5132271094],[-0.1218842203,51.5131950674],[-0.1218379772,51.5131630254],[-0.1217917341,51.5131309833],[-0.1217454911,51.5130989413],[-0.1216992482,51.5130668992],[-0.1216530053,51.5130348571],[-0.1216067625,51.513002815],[-0.1215605198,51.5129707728],[-0.1215211274,51.512937133],[-0.121481735,51.5129034931],[-0.1214423427,51.5128698533],[-0.1214029504,51.5128362134],[-0.1213635582,51.5128025736],[-0.121324166,51.5127689337],[-0.1212847739,51.5127352938],[-0.1212453819,51.5127016538],[-0.1212059899,51.5126680139],[-0.1211658742,51.5126326694],[-0.1211257585,51.5125973248],[-0.1210856429,51.5125619802],[-0.1210455273,51.5125266357],[-0.1210054118,51.5124912911],[-0.1209652964,51.5124559465],[-0.120925181,51.5124206018],[-0.1208850657,51.5123852572],[-0.1208449505,51.5123499125],[-0.1208066014,51.5123182115],[-0.1207682524,51.5122865105],[-0.1207299035,51.5122548094],[-0.1206915546,51.5122231084],[-0.1206532058,51.5121914073],[-0.120614857,51.5121597062],[-0.1205765083,51.5121280051],[-0.1205381596,51.512096304],[-0.1204908324,51.5121202881],[-0.1204435051,51.5121442721],[-0.1203875577,51.5121703886],[-0.1203316104,51.5121965051],[-0.1202756629,51.5122226216],[-0.1202197154,51.5122487381],[-0.1201637678,51.5122748545],[-0.1201078202,51.5123009709],[-0.1200518725,51.5123270873],[-0.1199959247,51.5123532037],[-0.1199399769,51.51237932],[-0.119884029,51.5124054363],[-0.1198537471,51.5124459307],[-0.1198234651,51.5124864252],[-0.119793183,51.5125269196],[-0.1197629009,51.512567414],[-0.1197326188,51.5126079084],[-0.1197023366,51.5126484028],[-0.1196720543,51.5126888972],[-0.119641772,51.5127293916],[-0.1196114896,51.512769886],[-0.1195812072,51.5128103803],[-0.1195509247,51.5128508747],[-0.1195206421,51.5128913691],[-0.1194903595,51.5129318634],[-0.1194575667,51.512968586],[-0.1194247738,51.5130053086],[-0.1193919809,51.5130420313],[-0.1193591878,51.5130787538],[-0.1193263948,51.5131154764],[-0.1192936017,51.513152199],[-0.1192608085,51.5131889216],[-0.1192280153,51.5132256441],[-0.119195222,51.5132623667],[-0.1191624287,51.5132990892],[-0.1191296353,51.5133358118],[-0.1191899948,51.5133599972],[-0.1192503544,51.5133841827],[-0.1193107141,51.5134083681],[-0.1193710738,51.5134325535],[-0.1194314336,51.5134567388],[-0.1194917934,51.5134809242],[-0.1195521533,51.5135051095],[-0.1196125133,51.5135292947],[-0.1196728734,51.51355348],[-0.1197332335,51.5135776652],[-0.1197935936,51.5136018504],[-0.1198539539,51.5136260355],[-0.1199143142,51.5136502206],[-0.1199746745,51.5136744057],[-0.1200350349,51.5136985908],[-0.1200953954,51.5137227758],[-0.1201533669,51.5137469078],[-0.1202113385,51.5137710399],[-0.1202693101,51.5137951719],[-0.1203272817,51.5138193038],[-0.1203852535,51.5138434358],[-0.1204432253,51.5138675677],[-0.1205011971,51.5138916996],[-0.120559169,51.5139158314],[-0.120617141,51.5139399632],[-0.120675113,51.513964095],[-0.1207330851,51.5139882268],[-0.1207910573,51.5140123586],[-0.1208490295,51.5140364903],[-0.1209070018,51.514060622],[-0.1209649742,51.5140847536],[-0.1210229466,51.5141088853],[-0.121080919,51.5141330169],[-0.1211388916,51.5141571484],[-0.1211968642,51.51418128],[-0.1212539768,51.514207335],[-0.1213110894,51.5142333899],[-0.1213682022,51.5142594448],[-0.1214253149,51.5142854997],[-0.1214824278,51.5143115546],[-0.1215395407,51.5143376095],[-0.1215966537,51.5143636643],[-0.1216537668,51.5143897191],[-0.1217108799,51.5144157739],[-0.1217679931,51.5144418286],[-0.1218251063,51.5144678833],[-0.1218822196,51.514493938],[-0.121926516,51.5145271927],[-0.1219708124,51.5145604473],[-0.1220151089,51.514593702],[-0.1219771407,51.5146293319],[-0.1219391725,51.5146649618],[-0.1219012042,51.5147005917],[-0.1218632358,51.5147362215],[-0.1218252674,51.5147718514],[-0.1217872989,51.5148074812],[-0.1217493304,51.5148431111],[-0.1217568407,51.5148813472],[-0.1217643511,51.5149195833],[-0.1217718615,51.5149578194],[-0.1217793719,51.5149960554],[-0.1217323687,51.5150292736],[-0.1216853654,51.5150624918],[-0.121638362,51.5150957099],[-0.1215913586,51.515128928],[-0.1215443551,51.5151621461],[-0.1214973516,51.5151953642],[-0.1214503479,51.5152285822],[-0.1214033442,51.5152618002],[-0.1213563405,51.5152950183],[-0.1213093366,51.5153282362],[-0.1212623327,51.5153614542],[-0.1212153288,51.5153946722],[-0.1211683247,51.5154278901],[-0.1211213206,51.515461108],[-0.1210743165,51.5154943259],[-0.1210273122,51.5155275438],[-0.1209769625,51.5155590113],[-0.1209266128,51.5155904789],[-0.120876263,51.5156219464],[-0.1208259131,51.5156534139],[-0.1207755632,51.5156848814],[-0.1207252132,51.5157163488],[-0.1206748631,51.5157478163],[-0.1206245129,51.5157792837],[-0.1205741627,51.5158107511],[-0.1205238124,51.5158422184],[-0.120473462,51.5158736858],[-0.1204231116,51.5159051531],[-0.1203727611,51.5159366204],[-0.1203224105,51.5159680876],[-0.1202720599,51.5159995549],[-0.1202217092,51.5160310221],[-0.1201713584,51.5160624893],[-0.1201210076,51.5160939565],[-0.1201571871,51.5161304204],[-0.1201933667,51.5161668843],[-0.1202295464,51.5162033482]],"timestamps":[0,0.0023349594,0.0046699173,0.0075446271,0.0104193347,0.0132940401,0.016548106,0.0198021717,0.0219546792,0.0241071867,0.0262596943,0.0284122019,0.0305647095,0.0327172171,0.0348697247,0.0370222324,0.0391747401,0.0413272479,0.0434843205,0.0456413932,0.0477984661,0.0499555391,0.0521126122,0.0542696854,0.0564267587,0.0585838321,0.0607409057,0.0652360641,0.0671436568,0.0690512498,0.0718470796,0.0746429101,0.0765433861,0.0784438613,0.0803443357,0.0834468391,0.0865493428,0.0896518469,0.0927543515,0.0958568565,0.0989082756,0.1019596954,0.1050111161,0.1080625376,0.1111139598,0.114640903,0.1181678471,0.1216947922,0.1252217383,0.1287486854,0.1322756334,0.1358025824,0.1393295323,0.1428564832,0.1463834351,0.1499103879,0.1534373417,0.1569642965,0.1604912523,0.164018209,0.166265909,0.1685136102,0.1707613127,0.1735115879,0.176261865,0.1790121441,0.1817624252,0.1845127083,0.1872629933,0.1901091362,0.1929552811,0.1958014282,0.1986475774,0.2014937287,0.2043398822,0.2071860377,0.2098653971,0.2125447581,0.2152241208,0.2179034851,0.2210653226,0.2242271625,0.2273890048,0.2305508497,0.233712697,0.2368745468,0.2400363991,0.2431982539,0.2463601111,0.2495219708,0.252683833,0.2557355934,0.2587873514,0.2618391069,0.26489086,0.2679426107,0.2709943589,0.2740461047,0.2770978481,0.2799984317,0.2828990132,0.2857995924,0.2887001695,0.2916007443,0.294501317,0.2974018874,0.3003024557,0.3033056807,0.3063089081,0.3093121377,0.3123153696,0.3153186039,0.3183218404,0.3213250793,0.3243283204,0.3273315638,0.3303348096,0.3333380576,0.3363413079,0.3393445605,0.3423478155,0.3453510727,0.3481660905,0.3509811063,0.3537961201,0.3566111319,0.3594261416,0.3622411492,0.3650561548,0.3678711584,0.370780152,0.3736891434,0.3765981326,0.3795071196,0.3824161044,0.3853250869,0.3882340673,0.3911430454,0.3940520214,0.3969609951,0.3998699666,0.4028458795,0.4058217902,0.4087976987,0.4117736048,0.4147495087,0.4177254103,0.4207013096,0.4236772067,0.4266531015,0.429628994,0.4319803451,0.4343316955,0.4375386047,0.4407455115,0.4439524159,0.447159318,0.4503662176,0.4535731148,0.4567800096,0.459986902,0.463193792,0.4664006796,0.4696075648,0.4728144476,0.4761645188,0.4795145878,0.4828646544,0.4862147188,0.489142563,0.492070405,0.4949982448,0.4979260823,0.5008539175,0.5037817505,0.5067095813,0.5096374098,0.5125652361,0.5154930601,0.5184208819,0.5213487015,0.5242765188,0.5272043338,0.5299001699,0.5325960041,0.5352918364,0.5379876669,0.5406834956,0.5433793224,0.5460751474,0.5487709705,0.5514667917,0.5542491974,0.5570316012,0.559814003,0.5625964029,0.5653788008,0.5681611968,0.5709435908,0.5737259828,0.5765083729,0.5790977257,0.5816870767,0.5842764261,0.5868657737,0.5894551196,0.5920444637,0.5946338062,0.5972231469,0.5999843462,0.6027455473,0.6059587424,0.6091719398,0.6123851397,0.615598342,0.6188115467,0.6220247537,0.6252379632,0.6284511751,0.6316643893,0.634877606,0.6375090775,0.6401405503,0.6427720244,0.6454034999,0.6480349767,0.6506664549,0.6532979344,0.6559294152,0.6585608974,0.6611923809,0.6638238657,0.6664553519,0.6690868394,0.6716490212,0.6742112045,0.6767733892,0.6793355754,0.6818977631,0.6844599522,0.6870221428,0.6895843348,0.6921465283,0.6947087233,0.6972709197,0.7006549082,0.7040388992,0.7074228927,0.7108068888,0.7141908874,0.7175748884,0.7209588921,0.7243428982,0.7277269069,0.731110918,0.7344949317,0.7378789479,0.7412629667,0.744646988,0.7480310117,0.7514150381,0.7546829226,0.7579508095,0.7612186988,0.7644865905,0.7677544846,0.7710223811,0.7742902801,0.7775581814,0.7808260851,0.7840939912,0.7873618998,0.7906298107,0.793897724,0.7971656398,0.8004335579,0.8037014784,0.8069694014,0.8102373267,0.8135052545,0.8167721699,0.8200390879,0.8233060083,0.8265729313,0.8298398568,0.8331067848,0.8363737154,0.8396406484,0.8429075839,0.846174522,0.8494414626,0.8527084057,0.8555909849,0.8584735662,0.8613561497,0.8640658499,0.8667755519,0.8694852558,0.8721949614,0.8749046688,0.877614378,0.880324089,0.8823519788,0.8843798687,0.8864077587,0.8884356488,0.8914309802,0.8944263139,0.89742165,0.9004169884,0.903412329,0.9064076721,0.9094030174,0.912398365,0.915393715,0.9183890673,0.9213844219,0.9243797788,0.9273751381,0.9303704997,0.9333658636,0.9363612298,0.9394511585,0.9425410897,0.9456310233,0.9487209593,0.9518108978,0.9549008387,0.9579907821,0.9610807279,0.9641706762,0.9672606269,0.97035058,0.9734405356,0.9765304937,0.9796204541,0.9827104171,0.9858003824,0.9888903502,0.9919803205,0.9946535453,0.9973267718,1.0]},{"path":[[-0.1202295464,51.5162033482],[-0.120206421,51.5162078025],[-0.120172161,51.5161736909],[-0.1201379011,51.5161395794],[-0.1201036413,51.5161054678],[-0.1200522516,51.5161340496],[-0.120000862,51.5161626314],[-0.1199494722,51.5161912131],[-0.1198980824,51.5162197948],[-0.1198466925,51.5162483766],[-0.1197953026,51.5162769582],[-0.1197439125,51.5163055399],[-0.1196925225,51.5163341215],[-0.1197152196,51.5163706314],[-0.1197379167,51.5164071412],[-0.1197606139,51.516443651],[-0.1197833111,51.5164801608],[-0.1198060083,51.5165166706],[-0.1198287056,51.5165531804],[-0.1198184276,51.5165955529],[-0.1198081496,51.5166379255],[-0.1198343115,51.5166792076],[-0.1198604734,51.5167204897],[-0.1198866354,51.5167617718],[-0.1199127974,51.516803054],[-0.1199389595,51.5168443361],[-0.1199651216,51.5168856182],[-0.1199912837,51.5169269003],[-0.1200174459,51.5169681824],[-0.1200436082,51.5170094645],[-0.1200697705,51.5170507465],[-0.1200959328,51.5170920286],[-0.1201514166,51.5171187684],[-0.1202069005,51.5171455081],[-0.1202300257,51.5171872258],[-0.120253151,51.5172289436],[-0.1202762763,51.5172706613],[-0.1202994016,51.517312379],[-0.120322527,51.5173540967],[-0.1203456525,51.5173958144],[-0.1203687779,51.5174375322],[-0.1203919034,51.5174792499],[-0.120415029,51.5175209676],[-0.1204381546,51.5175626853],[-0.1204612802,51.517604403],[-0.1204779489,51.5176461329],[-0.1204946177,51.5176878628],[-0.1205112864,51.5177295927],[-0.1205279552,51.5177713227],[-0.120544624,51.5178130526],[-0.1205612928,51.5178547825],[-0.1205779617,51.5178965124],[-0.1205946306,51.5179382423],[-0.1206112995,51.5179799722],[-0.1206279685,51.5180217022],[-0.1206446375,51.5180634321],[-0.1206703371,51.5181005201],[-0.1206960367,51.5181376081],[-0.1207217364,51.5181746961],[-0.1207474361,51.5182117841],[-0.1207731359,51.5182488721],[-0.1207988357,51.5182859601],[-0.1208245356,51.5183230481],[-0.1208502355,51.5183601361],[-0.1208684621,51.5184018739],[-0.1208866887,51.5184436117],[-0.1209049153,51.5184853496],[-0.120923142,51.5185270874],[-0.1209413687,51.5185688252],[-0.1209595955,51.518610563],[-0.1209778223,51.5186523008],[-0.1209960491,51.5186940387],[-0.121014276,51.5187357765],[-0.1210325028,51.5187775143],[-0.1210507298,51.5188192521],[-0.1210689567,51.5188609899],[-0.1211068682,51.5188960736],[-0.1211447797,51.5189311572],[-0.1211826912,51.5189662409],[-0.1212206029,51.5190013246],[-0.1212585145,51.5190364082],[-0.1212964263,51.5190714919],[-0.1213343381,51.5191065755],[-0.1213722499,51.5191416591],[-0.1214101619,51.5191767427],[-0.1214145363,51.5192189336],[-0.1214189107,51.5192611245],[-0.1214619253,51.5192962079],[-0.12150494,51.5193312912],[-0.1215479548,51.5193663745],[-0.1215909696,51.5194014578],[-0.1216339845,51.5194365411],[-0.1216769994,51.5194716244],[-0.1217200144,51.5195067076],[-0.1217630295,51.5195417909],[-0.1218060446,51.5195768741],[-0.1218490599,51.5196119573],[-0.1218920751,51.5196470405],[-0.1219350905,51.5196821237],[-0.1219781059,51.5197172068],[-0.1220211214,51.51975229],[-0.1220641369,51.5197873731],[-0.1221071525,51.5198224562],[-0.1221501682,51.5198575393],[-0.1221931839,51.5198926224],[-0.1222513189,51.519867767],[-0.1223094538,51.5198429115],[-0.1223675886,51.519818056],[-0.1224257234,51.5197932004],[-0.1224838581,51.5197683448],[-0.1225419928,51.5197434892],[-0.1226001274,51.5197186336],[-0.1226582619,51.5196937779],[-0.1227163964,51.5196689223],[-0.1227745308,51.5196440665],[-0.1228326651,51.5196192108],[-0.1228907994,51.519594355],[-0.1229489336,51.5195694992],[-0.1230070678,51.5195446433],[-0.1230652019,51.5195197875],[-0.1231233359,51.5194949316],[-0.1231814698,51.5194700756],[-0.1232396037,51.5194452197],[-0.1232977376,51.5194203637],[-0.1233558714,51.5193955077],[-0.1234140051,51.5193706516],[-0.1234721387,51.5193457956],[-0.1235302723,51.5193209395],[-0.1235884058,51.5192960833],[-0.1236465393,51.5192712272],[-0.1237046727,51.519246371],[-0.123762806,51.5192215147],[-0.1238209393,51.5191966585],[-0.1238790725,51.5191718022],[-0.1239372056,51.5191469459],[-0.1239953387,51.5191220895],[-0.1240534717,51.5190972332],[-0.1241116047,51.5190723768],[-0.1241697376,51.5190475203],[-0.1242278704,51.5190226639],[-0.1242860032,51.5189978074],[-0.1243441359,51.5189729509],[-0.1244022685,51.5189480943],[-0.1244618551,51.5189236062],[-0.1245214415,51.5188991181],[-0.1245810279,51.5188746299],[-0.1246406143,51.5188501417],[-0.1247002006,51.5188256535],[-0.1247597868,51.5188011653],[-0.1248193729,51.518776677],[-0.124878959,51.5187521887],[-0.1249385451,51.5187277003],[-0.124998131,51.5187032119],[-0.1250577169,51.5186787235],[-0.1251173028,51.5186542351],[-0.1251768885,51.5186297466],[-0.1252364743,51.5186052581],[-0.1252960599,51.5185807696],[-0.1253556455,51.518556281],[-0.125415231,51.5185317924],[-0.1254748165,51.5185073038],[-0.1255344019,51.5184828151],[-0.1255939872,51.5184583264],[-0.1256535725,51.5184338377],[-0.1257131577,51.518409349],[-0.1257727428,51.5183848602],[-0.1258323279,51.5183603714],[-0.1258919129,51.5183358825],[-0.1259514978,51.5183113937],[-0.1260110827,51.5182869048],[-0.1260706675,51.5182624158],[-0.1261302523,51.5182379269],[-0.1261893073,51.5182150617],[-0.1262483622,51.5181921965],[-0.1263074171,51.5181693312],[-0.126366472,51.518146466],[-0.1264255267,51.5181236007],[-0.1264845814,51.5181007354],[-0.1265436361,51.51807787],[-0.1266026907,51.5180550046],[-0.1266617452,51.5180321392],[-0.1267207997,51.5180092738],[-0.1267859788,51.5179937581],[-0.1268511579,51.5179782424],[-0.1269163369,51.5179627267],[-0.1269815159,51.517947211],[-0.1270466949,51.5179316952],[-0.1271118738,51.5179161793],[-0.1271770526,51.5179006635],[-0.1272422315,51.5178851476],[-0.1273074102,51.5178696316],[-0.127372589,51.5178541157],[-0.12744258,51.5178448609],[-0.127512571,51.5178356062],[-0.1275825619,51.5178263514],[-0.1276525528,51.5178170965],[-0.1277225437,51.5178078416],[-0.1277398933,51.5178475116],[-0.1277572429,51.5178871816],[-0.1277745926,51.5179268517],[-0.1277919423,51.5179665217],[-0.127809292,51.5180061917],[-0.1278458219,51.518043459],[-0.1278823519,51.5180807264],[-0.1279188819,51.5181179937],[-0.1279554121,51.5181552611],[-0.1279919422,51.5181925284],[-0.1280284724,51.5182297957],[-0.1280650027,51.518267063],[-0.1281015331,51.5183043303],[-0.1281380635,51.5183415975],[-0.1281745939,51.5183788648],[-0.1282111245,51.5184161321],[-0.1282497582,51.5184513516],[-0.128288392,51.518486571],[-0.1283270258,51.5185217905],[-0.1283656597,51.51855701],[-0.1284042937,51.5185922294],[-0.1284429277,51.5186274488],[-0.1284815617,51.5186626683],[-0.1285201959,51.5186978877],[-0.1285588301,51.5187331071],[-0.1285974643,51.5187683265],[-0.1286360987,51.5188035458],[-0.1286764185,51.5188392663],[-0.1287167384,51.5188749867],[-0.1287570583,51.5189107071],[-0.1287973783,51.5189464275],[-0.1288545459,51.5189222443],[-0.1289117135,51.5188980611],[-0.128968881,51.5188738779],[-0.1290260484,51.5188496946],[-0.1290832157,51.5188255113],[-0.129140383,51.518801328],[-0.1291975503,51.5187771446],[-0.1292547175,51.5187529612],[-0.1293118846,51.5187287778],[-0.1293690516,51.5187045944],[-0.1294262186,51.5186804109],[-0.1294833856,51.5186562274],[-0.1295405524,51.5186320438],[-0.1295977193,51.5186078603],[-0.129654886,51.5185836767],[-0.1297120527,51.5185594931],[-0.1297692194,51.5185353094],[-0.1298263859,51.5185111258],[-0.1298835524,51.5184869421],[-0.1299407189,51.5184627583],[-0.1299978853,51.5184385746],[-0.1300550516,51.5184143908],[-0.1301122179,51.518390207],[-0.1300730369,51.5183578881],[-0.130033856,51.5183255693],[-0.1299946751,51.5182932504],[-0.1299916771,51.5182884732]],"timestamps":[0,0.0016568462,0.0050581326,0.008459417,0.0118606993,0.0159976733,0.0201346504,0.0242716307,0.0284086141,0.0325456007,0.0366825905,0.0408195833,0.0449565794,0.0479810382,0.051005498,0.0540299589,0.0570544209,0.0600788839,0.063103348,0.0661708231,0.0692382985,0.0726767193,0.0761151415,0.0795535651,0.0829919901,0.0864304166,0.0898688445,0.0933072738,0.0967457045,0.1001841366,0.1036225701,0.1070610051,0.1113941201,0.1157272385,0.1190829657,0.122438694,0.1257944234,0.1291501539,0.1325058856,0.1358616185,0.1392173525,0.1425730876,0.1459288238,0.1492845612,0.1526402998,0.1558016688,0.1589630385,0.1621244087,0.1652857796,0.1684471511,0.1716085232,0.174769896,0.1779312693,0.1810926433,0.1842540179,0.1874153931,0.1905898538,0.1937643159,0.1969387793,0.200113244,0.20328771,0.2064621774,0.2096366461,0.2128111162,0.2160152683,0.2192194211,0.2224235747,0.225627729,0.2288318841,0.2320360399,0.2352401964,0.2384443536,0.2416485116,0.2448526703,0.2480568298,0.25126099,0.2548950043,0.2585290212,0.2621630404,0.265797062,0.2694310861,0.2730651126,0.2766991415,0.2803331729,0.2839672067,0.2869513722,0.2899355378,0.2938406619,0.2977457889,0.3016509188,0.3055560516,0.3094611873,0.3133663259,0.3172714675,0.3211766119,0.3250817593,0.3289869095,0.3328920627,0.3367972187,0.3407023777,0.3446075396,0.3485127044,0.3524178721,0.3563230427,0.3602282163,0.3646763164,0.3691244132,0.3735725068,0.3780205972,0.3824686843,0.3869167681,0.3913648487,0.3958129261,0.4002610002,0.404709071,0.4091571386,0.4136052029,0.418053264,0.4225013218,0.4269493764,0.4313974277,0.4358454758,0.4402935206,0.4447415622,0.4491896005,0.4536376355,0.4580856673,0.4625336959,0.4669817212,0.4714297432,0.475877762,0.4803257776,0.4847737899,0.4892217989,0.4936698047,0.4981178072,0.5025658065,0.5070138026,0.5114617953,0.5159097849,0.5203577711,0.5248057541,0.5292537339,0.5337860242,0.5383183111,0.5428505948,0.5473828751,0.5519151522,0.5564474259,0.5609796964,0.5655119635,0.5700442274,0.5745764879,0.5791087452,0.5836409991,0.5881732497,0.5927054971,0.5972377411,0.6017699818,0.6063022193,0.6108344534,0.6153666842,0.6198989117,0.624431136,0.6289633569,0.6334955745,0.6380277888,0.6425599998,0.6470922075,0.6516244119,0.6561566131,0.6606888109,0.6651440494,0.6695992849,0.6740545174,0.6785097467,0.682964973,0.6874201962,0.6918754163,0.6963306334,0.7007858473,0.7052410582,0.7099547312,0.7146684017,0.7193820699,0.7240957357,0.7288093992,0.7335230602,0.7382367189,0.7429503752,0.7476640291,0.7523776807,0.7573446108,0.7623115393,0.7672784664,0.7722453919,0.7772123159,0.7802584578,0.7833046003,0.7863507436,0.7893968875,0.792443032,0.7961144103,0.799785791,0.803457174,0.8071285594,0.8107999472,0.8144713373,0.8181427298,0.8218141247,0.8254855219,0.8291569214,0.8328283234,0.8365062245,0.8401841281,0.8438620343,0.8475399429,0.851217854,0.8548957677,0.8585736838,0.8622516024,0.8659295235,0.8696074471,0.8732853732,0.8770750635,0.8808647565,0.8846544522,0.8884441505,0.8928111119,0.8971780701,0.9015450252,0.9059119772,0.9102789261,0.9146458718,0.9190128145,0.923379754,0.9277466904,0.9321136237,0.9364805539,0.9408474809,0.9452144049,0.9495813257,0.9539482434,0.958315158,0.9626820695,0.9670489778,0.9714158831,0.9757827852,0.9801496842,0.9845165801,0.9888834729,0.9924567207,0.9960299662,0.9996032091,1.0]}]; | |
| console.log(trips); | |
| // --- POIS --- | |
| // https://fonts.google.com/icons?selected=Material+Symbols+Outlined:theaters:FILL@1;wght@400;GRAD@0;opsz@40&icon.size=32&icon.color=%2368e19e&icon.platform=web&icon.query=cinema | |
| const pois = [ | |
| { | |
| id:'home', | |
| coord:trips[0].path[0], | |
| sizeScale: 0, | |
| anchorX: 20, | |
| anchorY: 20, | |
| offsetX: 10, | |
| offsetY: -30, | |
| svg: '<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#68e19e"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>' | |
| }, | |
| { | |
| id:'work', | |
| coord:trips[0].path.slice(-1)[0], | |
| sizeScale: 0, | |
| anchorX: 20, | |
| anchorY: 20, | |
| offsetX: -30, | |
| offsetY: 20, | |
| svg: '<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#68e19e"><path d="M146.67-120q-27 0-46.84-19.83Q80-159.67 80-186.67v-466.66q0-27 19.83-46.84Q119.67-720 146.67-720H320v-93.33q0-27 19.83-46.84Q359.67-880 386.67-880h186.66q27 0 46.84 19.83Q640-840.33 640-813.33V-720h173.33q27 0 46.84 19.83Q880-680.33 880-653.33v466.66q0 27-19.83 46.84Q840.33-120 813.33-120H146.67Zm240-600h186.66v-93.33H386.67V-720Z"/></svg>' | |
| }, | |
| { | |
| id:'cinema', | |
| coord:trips[1].path.slice(-1)[0], | |
| sizeScale: 0, | |
| anchorX: 20, | |
| anchorY: 20, | |
| offsetX: 0, | |
| offsetY: -30, | |
| svg: '<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#68e19e"><path d="M160-120v-720h66.67v66.67h106.66V-840h293.34v66.67h106.66V-840H800v720h-66.67v-66.67H626.67V-120H333.33v-66.67H226.67V-120H160Zm66.67-133.33h106.66V-360H226.67v106.67Zm0-173.34h106.66v-106.66H226.67v106.66Zm0-173.33h106.66v-106.67H226.67V-600Zm400 346.67h106.66V-360H626.67v106.67Zm0-173.34h106.66v-106.66H626.67v106.66Zm0-173.33h106.66v-106.67H626.67V-600Z"/></svg>' | |
| } | |
| ]; | |
| const minX = Math.min(...pois.map(poi => poi.coord[0])) | |
| const maxX = Math.max(...pois.map(poi => poi.coord[0])) | |
| const minY = Math.min(...pois.map(poi => poi.coord[1])) | |
| const maxY = Math.max(...pois.map(poi => poi.coord[1])) | |
| const avgCoords = [ | |
| (maxX + minX) / 2, | |
| (maxY + minY) / 2, | |
| ] | |
| console.log(pois, avgCoords); | |
| const startZoom = 15.5; | |
| // const startZoom = 14.5; | |
| const endZoom = 14.5; | |
| const startPitch = 40; | |
| const endPitch = 0; | |
| // --- MapLibre: dark background CartoDB --- | |
| const map = new maplibregl.Map({ | |
| container: 'map', | |
| style: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json', | |
| // style: 'https://raw.githubusercontent.com/teamapps-org/maplibre-gl-styles/refs/heads/main/dark/dark_custom-3d.json', | |
| center: pois[0].coord, | |
| zoom: startZoom, | |
| pitch: startPitch, | |
| bearing: 0 | |
| }); | |
| map.on('load', () => { | |
| map.addSource('openfreemap', { | |
| url: `https://tiles.openfreemap.org/planet`, | |
| type: 'vector', | |
| }); | |
| map.addLayer({ | |
| id: '3d-buildings', | |
| source: 'openfreemap', // must match the source in your style | |
| 'source-layer': 'building', | |
| 'filter': ['!=', ['get', 'hide_3d'], true], | |
| type: 'fill-extrusion', | |
| minzoom: 12, | |
| paint: { | |
| // 'fill-extrusion-color': '#aaa', | |
| 'fill-extrusion-color': [ | |
| 'interpolate', | |
| ['linear'], | |
| ['zoom'], | |
| // endZoom, '#2a3b5f', // darker at low zoom | |
| // startZoom, '#3a7d66', // lighter at higher zoom | |
| endZoom, '#4a0f66', // lighter at higher zoom | |
| startZoom, '#951fca', // lighter at higher zoom | |
| // endZoom, '#3a7d66', // darker at low zoom | |
| // startZoom, '#8ef5c0', // lighter at higher zoom | |
| // endZoom, 'grey', // darker at low zoom | |
| // startZoom, 'lightgray' // lighter at higher zoom | |
| ], | |
| 'fill-extrusion-height': [ | |
| 'interpolate', | |
| ['linear'], | |
| ['zoom'], | |
| // endZoom, '#ffffff', // darker at low zoom | |
| // startZoom, '#ffffff', // lighter at higher zoom | |
| endZoom, 0, // darker at low zoom | |
| startZoom, ['get', 'render_height'] // lighter at higher zoom | |
| ], | |
| // 'fill-extrusion-height': ['get', 'render_height'], | |
| // 'fill-extrusion-base': [ | |
| // 'interpolate', | |
| // ['linear'], | |
| // ['zoom'], | |
| // // endZoom, '#ffffff', // darker at low zoom | |
| // // startZoom, '#ffffff', // lighter at higher zoom | |
| // endZoom, 0, // darker at low zoom | |
| // startZoom, ['get', 'render_min_height'] // lighter at higher zoom | |
| // ], | |
| "fill-extrusion-base": [ | |
| "case", | |
| [">=", | |
| ["get", "zoom"], | |
| endZoom | |
| ], | |
| ["get", "render_min_height"], | |
| 0 | |
| ], | |
| // 'fill-extrusion-base': ['get', 'render_min_height'], | |
| // 'fill-extrusion-opacity': 0.8 | |
| 'fill-extrusion-opacity': 1.0 | |
| } | |
| }); | |
| // map.setLight({ | |
| // anchor: 'viewport', | |
| // color: 'white', | |
| // intensity: 0.6, | |
| // position: [1.5, 90, 30] // [radial, azimutshal, polar] | |
| // }); | |
| // r radial coordinate, a azimuthal angle, p polar angle ` | |
| map.setLight({ | |
| // anchor: 'viewport', | |
| // color: 'white', // warm orange tone | |
| // color: '#ffcc88', // warm orange tone | |
| color: '#68e19e', // DSS green | |
| // intensity: 0.05, // softer than midday | |
| // position: [90, 180, 45] // low angle, like the sun near horizon | |
| // position: [1.05, 210, 60] // low angle, like the sun near horizon | |
| }); | |
| // map.setSky({ | |
| // "sky-color": "#199EF3", | |
| // "sky-horizon-blend": 0.5, | |
| // "horizon-color": "#ffffff", | |
| // "horizon-fog-blend": 0.5, | |
| // "fog-color": "#0000ff", | |
| // "fog-ground-blend": 0.5, | |
| // "atmosphere-blend": [ | |
| // "interpolate", | |
| // ["linear"], | |
| // ["zoom"], | |
| // 0, | |
| // 1, | |
| // endZoom, | |
| // 1, | |
| // startZoom, | |
| // 0 | |
| // ] | |
| // }); | |
| }); | |
| class GlowExtension extends deck.LayerExtension { | |
| getShaders() { | |
| return { | |
| inject: { | |
| 'fs:DECKGL_FILTER_COLOR': ` | |
| // Use the distance to the center to create a glow effect | |
| // The 0.5 is the center of the geometry cause it goes from 0 to 1 | |
| // we want to make the glow effect stronger the closer we are to the center so we use abs(x - 0.5) | |
| // float distanceToCenter = abs(geometry.uv.x - 0.5); | |
| float distanceToCenter = abs(geometry.uv.x); | |
| // and we want a bigger area than just the center so we exclude the range from 0.25 to 0.75 | |
| // float alpha = distanceToCenter < 0.25 ? 1.0 : 1.0 - distanceToCenter; | |
| float alpha = smoothstep(1.0, 0.0, distanceToCenter); | |
| // float alpha = exp(-dist * dist * 8.0); // Gaussian curve | |
| // Set the color with red and use the calculated alpha | |
| // color = vec4(255, 255, 255, alpha * 0.5); | |
| color = vec4(color.r, color.g, color.b, alpha); | |
| // color *= alpha; | |
| `, | |
| }, | |
| }; | |
| } | |
| } | |
| class ShadowExtension extends deck.LayerExtension { | |
| getShaders() { | |
| return { | |
| inject: { | |
| 'fs:DECKGL_FILTER_COLOR': ` | |
| // Use the distance to the center to create a glow effect | |
| // The 0.5 is the center of the geometry cause it goes from 0 to 1 | |
| // we want to make the glow effect stronger the closer we are to the center so we use abs(x - 0.5) | |
| // float distanceToCenter = abs(geometry.uv.x - 0.5); | |
| float distanceToCenter = abs(geometry.uv.x); | |
| // and we want a bigger area than just the center so we exclude the range from 0.25 to 0.75 | |
| float alpha = smoothstep(1.0, 0.0, distanceToCenter); | |
| // Set the color with red and use the calculated alpha | |
| color = vec4(color.r, color.g, color.b, alpha * 0.5); | |
| `, | |
| }, | |
| }; | |
| } | |
| } | |
| // --- DeckGL overlay --- | |
| // const overlay = new deck.MapboxOverlay({ interleaved: true, effects: [lightingEffect] }); | |
| const overlay = new deck.MapboxOverlay({ interleaved: true }); | |
| map.addControl(overlay); | |
| // --- animation config --- | |
| const slowingFactor = 1; | |
| const legDuration = 4 * slowingFactor; // single trip animation length (seconds) | |
| const iconScaleDuration = 0.2 * legDuration; // in length of leg duration | |
| const pause = 2 * slowingFactor; // pause between trips | |
| const fadeOutReset = 4 * slowingFactor; // reset length at the end | |
| const totalDuration = (legDuration + pause) * trips.length; | |
| const totalDurationWithReset = totalDuration + fadeOutReset; | |
| const tripColor = [104, 225, 158]; | |
| function easeInOutCubic(x) { | |
| return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; | |
| } | |
| function easeInOutQuad(x) { | |
| return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; | |
| } | |
| function easeInOutQuint(x) { | |
| return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2; | |
| } | |
| function easeOutQuint(x) { | |
| return 1 - Math.pow(1 - x, 5); | |
| } | |
| function createTripsLayer(trip, id, progress, legResetProgress) { | |
| const easedProgress = progress <= 1 ? easeInOutQuad(progress) : progress; | |
| const trailLength = 0.1; | |
| const pathStartIdx = Math.round(trip.timestamps.length * legResetProgress) | |
| const pathLengthIdx = trip.timestamps.findLastIndex(ts => ts < (easedProgress - trailLength * 0.1)); | |
| const partialPath = trip.path.slice(pathStartIdx, pathLengthIdx + 1); | |
| const pathLayers = [ | |
| new deck.PathLayer({ | |
| id: `path-shadow-${id}`, | |
| data: [{ path: partialPath }], | |
| getPath: d => d.path, | |
| getColor: [10, 10, 10], | |
| // getColor: tripColor, | |
| getWidth: 20, | |
| capRounded: true, | |
| jointRounded: true, | |
| widthUnits: 'meters', | |
| widthMinPixels: 8, | |
| shadowEnabled: true, | |
| extensions: [new ShadowExtension()], | |
| }), | |
| new deck.PathLayer({ | |
| id: `path-shadow-color-${id}`, | |
| data: [{ path: partialPath }], | |
| getPath: d => d.path, | |
| // getColor: [10, 10, 10], | |
| getColor: tripColor, | |
| getWidth: 16, | |
| capRounded: true, | |
| jointRounded: true, | |
| widthUnits: 'meters', | |
| widthMinPixels: 8, | |
| shadowEnabled: true, | |
| extensions: [new ShadowExtension()], | |
| }), | |
| new deck.PathLayer({ | |
| id: `path-glow-${id}`, | |
| data: [{ path: partialPath }], | |
| // getPath: d => d.path.map(coord => [...coord, 50]), | |
| getPath: d => d.path.map(coord => [...coord, 45]), | |
| // getPath: d => d.path, | |
| getColor: tripColor, | |
| getWidth: 20, | |
| capRounded: true, | |
| jointRounded: true, | |
| widthUnits: 'meters', | |
| widthMinPixels: 8, | |
| opacity: 1.0, | |
| shadowEnabled: true, | |
| extensions: [new GlowExtension()], | |
| }), | |
| new deck.PathLayer({ | |
| id: `path-${id}`, | |
| data: [{ path: partialPath }], | |
| getPath: d => d.path.map(coord => [...coord, 50]), | |
| // getPath: d => d.path, | |
| getColor: tripColor, | |
| getWidth: 8, | |
| capRounded: true, | |
| jointRounded: true, | |
| widthUnits: 'meters', | |
| widthMinPixels: 4, | |
| shadowEnabled: true, | |
| }), | |
| new deck.TripsLayer({ | |
| id: `trip-${id}`, | |
| data: [trip], | |
| getPath: d => d.path.map(coord => [...coord, 50]), | |
| getTimestamps: d => d.timestamps, | |
| getColor: tripColor, | |
| currentTime: easedProgress, | |
| trailLength, | |
| capRounded: true, | |
| jointRounded: true, | |
| getWidth: 20, | |
| widthUnits: 'meters', | |
| widthMinPixels: 10, | |
| shadowEnabled: true, | |
| extensions: [new GlowExtension()], | |
| }), | |
| ] | |
| return { | |
| layers: pathLayers, | |
| partialPath: partialPath | |
| }; | |
| } | |
| function createPOILayer(_pois) { | |
| return new deck.IconLayer({ | |
| // id: `pois-${Math.random()}`, | |
| id: `pois`, | |
| data: _pois, | |
| getPosition: d => [...d.coord, 50], | |
| getIcon: d => ({ | |
| url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(d.svg)}`, | |
| width: 40, | |
| height: 40, | |
| anchorX: d.anchorX, | |
| anchorY: d.anchorY, | |
| }), | |
| getPixelOffset: d => [d.offsetX, d.offsetY], | |
| getSize: d => d.sizeScale * 40, | |
| // sizeMinPixels: d => d.sizeScale * 30, | |
| // opacity: d => d.sizeScale, | |
| // sizeUnits: 'meters', | |
| billboard: true, | |
| updateTriggers: { | |
| getSize: [_pois.map(poi => poi.sizeScale)] | |
| } | |
| }); | |
| } | |
| // --- animation --- | |
| let start = performance.now(); | |
| let statedLastZoomOut = false; | |
| let startedMovingFadeOut = false; | |
| function animate() { | |
| const t = ((performance.now() - start) / 1000) % totalDurationWithReset; | |
| const resetProgress = easeInOutQuint(Math.max(0, t - totalDuration) / fadeOutReset); | |
| // const resetProgress = easeOutQuint(Math.max(0, t - totalDuration) / fadeOutReset); | |
| const legResetLength = 1 / trips.length; | |
| // set current trip id (0,1,2) | |
| const legIndex = Math.floor(t / (legDuration + pause)); | |
| const tInLeg = t % (legDuration + pause); | |
| // const legProgress = Math.min(1, tInLeg / legDuration); | |
| const legProgress = tInLeg / legDuration; | |
| // trips layers - only current trip is changing | |
| const layers = []; | |
| const clippedPaths = []; | |
| for (let i = 0; i < trips.length; i++) { | |
| let progress = 0; | |
| if (i < legIndex) progress = 2; // finished trips | |
| else if (i === legIndex) progress = legProgress; | |
| // Scale POIs | |
| if (legIndex == 0) { | |
| const sizeScale = Math.min(t / iconScaleDuration, 1); | |
| pois[0].sizeScale = sizeScale; | |
| } | |
| if (i == (legIndex + 1) && tInLeg >= (legDuration - iconScaleDuration)) { | |
| const sizeScale = Math.min((tInLeg + iconScaleDuration - legDuration) / iconScaleDuration, 1); | |
| pois[i].sizeScale = sizeScale; | |
| } | |
| if (i > legIndex) continue; | |
| let opacity = 1; | |
| if (i == legIndex && tInLeg >= legDuration) { | |
| const fadeProgress = Math.min((tInLeg - legDuration) / pause, 1); | |
| opacity = 1 - 0.9 * fadeProgress; | |
| } else if (i < legIndex) { | |
| opacity = 0.1 | |
| } | |
| let legResetProgress = 0; | |
| if (resetProgress > legResetLength * i) { | |
| legResetProgress = Math.min(1, (resetProgress - i * legResetLength) / legResetLength); | |
| } | |
| const tripLayer = createTripsLayer(trips[i], i, progress, legResetProgress); | |
| tripLayer.layers.forEach(l => layers.push(l)) | |
| // layers.push(tripLayer.pathShadow); | |
| // layers.push(tripLayer.pathGlow); | |
| // layers.push(tripLayer.path); | |
| // layers.push(tripLayer.trip); | |
| clippedPaths.push(tripLayer.partialPath); | |
| } | |
| if (t > totalDuration) { | |
| pois.forEach(poi => { | |
| poi.sizeScale = 1 - resetProgress; | |
| }); | |
| } | |
| layers.push(createPOILayer(pois)); | |
| if (t <= totalDuration) { | |
| if (legIndex < trips.length - 1) { | |
| statedLastZoomOut = false; | |
| startedMovingFadeOut = false; | |
| const currentPos = clippedPaths[legIndex][clippedPaths[legIndex].length - 1]; | |
| map.easeTo({ | |
| center: currentPos, | |
| duration: 100, | |
| easing: t => legDuration * 0.003 | |
| }); | |
| } else if (!statedLastZoomOut) { | |
| map.easeTo({ | |
| center: avgCoords, | |
| zoom: endZoom, | |
| pitch: endPitch, | |
| // easing: t => 0.01, | |
| easing: easeInOutCubic, | |
| duration: legDuration * 1000, | |
| }); | |
| statedLastZoomOut = true; | |
| } | |
| } else if (!startedMovingFadeOut) { | |
| startedMovingFadeOut = true; | |
| map.easeTo({ | |
| center: pois[0].coord, | |
| zoom: startZoom, | |
| pitch: startPitch, | |
| easing: easeInOutCubic, | |
| duration: fadeOutReset * 1000, | |
| }); | |
| } | |
| overlay.setProps({ layers }); | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment