Created
April 10, 2016 23:32
-
-
Save luqmaan/d0d488655bf7f08cfb790c8e80c548aa to your computer and use it in GitHub Desktop.
leaflet + css animations
This file contains 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> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title></title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' /> | |
| <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position: absolute; top:0; bottom:0; left: 0; right: 0; width:100%; height: 100%; } | |
| #container { | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| max-width: 100%; | |
| max-height: 100%; | |
| overflow: hidden; | |
| } | |
| .vehicle { | |
| height: 28px; | |
| width: 28px; | |
| margin-left: -5px; | |
| margin-top: -5px; | |
| background: #fff; | |
| border-radius: 14px; | |
| position: absolute; | |
| font-size: 12px; | |
| font-family: arial; | |
| border: 1px solid rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .vehicle div { | |
| } | |
| .transition .vehicle { | |
| -webkit-transition: -webkit-transform 300ms linear; | |
| transition: transform 300ms linear; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var vehicles = window.vehicles = [ | |
| { | |
| "lat": 30.168642044067383, | |
| "lon": -97.79508972167969 | |
| }, | |
| { | |
| "lat": 30.290769577026367, | |
| "lon": -97.73670196533203 | |
| }, | |
| { | |
| "lat": 30.23593521118164, | |
| "lon": -97.7049331665039 | |
| }, | |
| { | |
| "lat": 30.232084274291992, | |
| "lon": -97.88090515136719 | |
| }, | |
| { | |
| "lat": 30.363561630249023, | |
| "lon": -97.71601867675781 | |
| }, | |
| { | |
| "lat": 30.58661460876465, | |
| "lon": -97.85547637939453 | |
| }, | |
| { | |
| "lat": 30.272096633911133, | |
| "lon": -97.73885345458984 | |
| }, | |
| { | |
| "lat": 30.447492599487305, | |
| "lon": -97.7813491821289 | |
| }, | |
| { | |
| "lat": 30.25339698791504, | |
| "lon": -97.73426055908203 | |
| }, | |
| { | |
| "lat": 30.265056610107422, | |
| "lon": -97.73926544189453 | |
| }, | |
| { | |
| "lat": 30.254331588745117, | |
| "lon": -97.72872161865234 | |
| }, | |
| { | |
| "lat": 30.258705139160156, | |
| "lon": -97.74866485595703 | |
| }, | |
| { | |
| "lat": 30.58661460876465, | |
| "lon": -97.8554458618164 | |
| }, | |
| { | |
| "lat": 30.40580177307129, | |
| "lon": -97.66374206542969 | |
| }, | |
| { | |
| "lat": 30.354103088378906, | |
| "lon": -97.68153381347656 | |
| }, | |
| { | |
| "lat": 30.240720748901367, | |
| "lon": -97.72738647460938 | |
| }, | |
| { | |
| "lat": 30.30581283569336, | |
| "lon": -97.66107940673828 | |
| }, | |
| { | |
| "lat": 30.357099533081055, | |
| "lon": -97.70050048828125 | |
| }, | |
| { | |
| "lat": 30.234477996826172, | |
| "lon": -97.71978759765625 | |
| }, | |
| { | |
| "lat": 30.16704750061035, | |
| "lon": -97.78929901123047 | |
| }, | |
| { | |
| "lat": 30.29544448852539, | |
| "lon": -97.73676300048828 | |
| }, | |
| { | |
| "lat": 30.28034782409668, | |
| "lon": -97.73733520507812 | |
| }, | |
| { | |
| "lat": 30.27042007446289, | |
| "lon": -97.74458312988281 | |
| }, | |
| { | |
| "lat": 30.18992805480957, | |
| "lon": -97.76757049560547 | |
| }, | |
| { | |
| "lat": 30.302539825439453, | |
| "lon": -97.69961547851562 | |
| }, | |
| { | |
| "lat": 30.230215072631836, | |
| "lon": -97.7953109741211 | |
| }, | |
| { | |
| "lat": 30.223064422607422, | |
| "lon": -97.76687622070312 | |
| }, | |
| { | |
| "lat": 30.289587020874023, | |
| "lon": -97.72314453125 | |
| }, | |
| { | |
| "lat": 30.35242462158203, | |
| "lon": -97.7332763671875 | |
| }, | |
| { | |
| "lat": 30.57663345336914, | |
| "lon": -97.85171508789062 | |
| }, | |
| { | |
| "lat": 30.343624114990234, | |
| "lon": -97.73847198486328 | |
| }, | |
| { | |
| "lat": 30.229032516479492, | |
| "lon": -97.8006362915039 | |
| }, | |
| { | |
| "lat": 30.29891014099121, | |
| "lon": -97.64559173583984 | |
| }, | |
| { | |
| "lat": 30.58218765258789, | |
| "lon": -97.85430908203125 | |
| }, | |
| { | |
| "lat": 30.235742568969727, | |
| "lon": -97.71868133544922 | |
| }, | |
| { | |
| "lat": 30.1669921875, | |
| "lon": -97.78755187988281 | |
| }, | |
| { | |
| "lat": 30.372995376586914, | |
| "lon": -97.75009155273438 | |
| }, | |
| { | |
| "lat": 30.40569305419922, | |
| "lon": -97.66380310058594 | |
| }, | |
| { | |
| "lat": 30.414382934570312, | |
| "lon": -97.6636734008789 | |
| }, | |
| { | |
| "lat": 30.23436737060547, | |
| "lon": -97.69743347167969 | |
| }, | |
| { | |
| "lat": 30.272510528564453, | |
| "lon": -97.69774627685547 | |
| }, | |
| { | |
| "lat": 30.19237518310547, | |
| "lon": -97.76836395263672 | |
| }, | |
| { | |
| "lat": 30.25050926208496, | |
| "lon": -97.68910217285156 | |
| }, | |
| { | |
| "lat": 30.346017837524414, | |
| "lon": -97.71320343017578 | |
| }, | |
| { | |
| "lat": 30.42777442932129, | |
| "lon": -97.75994110107422 | |
| }, | |
| { | |
| "lat": 30.219297409057617, | |
| "lon": -97.7188720703125 | |
| }, | |
| { | |
| "lat": 30.376239776611328, | |
| "lon": -97.72298431396484 | |
| }, | |
| { | |
| "lat": 30.156570434570312, | |
| "lon": -97.7392349243164 | |
| }, | |
| { | |
| "lat": 30.223339080810547, | |
| "lon": -97.7635498046875 | |
| }, | |
| { | |
| "lat": 30.289697647094727, | |
| "lon": -97.7406234741211 | |
| }, | |
| { | |
| "lat": 30.256229400634766, | |
| "lon": -97.70161437988281 | |
| }, | |
| { | |
| "lat": 30.349674224853516, | |
| "lon": -97.7112045288086 | |
| }, | |
| { | |
| "lat": 30.422439575195312, | |
| "lon": -97.71513366699219 | |
| }, | |
| { | |
| "lat": 30.358034133911133, | |
| "lon": -97.73511505126953 | |
| }, | |
| { | |
| "lat": 30.253095626831055, | |
| "lon": -97.73426055908203 | |
| }, | |
| { | |
| "lat": 30.23642921447754, | |
| "lon": -97.71798706054688 | |
| }, | |
| { | |
| "lat": 30.58774185180664, | |
| "lon": -97.85665130615234 | |
| }, | |
| { | |
| "lat": 30.414602279663086, | |
| "lon": -97.66484832763672 | |
| }, | |
| { | |
| "lat": 30.176755905151367, | |
| "lon": -97.80440521240234 | |
| }, | |
| { | |
| "lat": 30.167020797729492, | |
| "lon": -97.78878784179688 | |
| }, | |
| { | |
| "lat": 30.395490646362305, | |
| "lon": -97.72032928466797 | |
| }, | |
| { | |
| "lat": 30.419002532958984, | |
| "lon": -97.66633605957031 | |
| }, | |
| { | |
| "lat": 30.32839012145996, | |
| "lon": -97.6892318725586 | |
| }, | |
| { | |
| "lat": 30.218088150024414, | |
| "lon": -97.69062042236328 | |
| }, | |
| { | |
| "lat": 30.23480796813965, | |
| "lon": -97.69790649414062 | |
| }, | |
| { | |
| "lat": 30.30333709716797, | |
| "lon": -97.66075897216797 | |
| }, | |
| { | |
| "lat": 30.30891990661621, | |
| "lon": -97.72897338867188 | |
| }, | |
| { | |
| "lat": 30.18995475769043, | |
| "lon": -97.76750946044922 | |
| }, | |
| { | |
| "lat": 30.354185104370117, | |
| "lon": -97.73213958740234 | |
| }, | |
| { | |
| "lat": 30.269485473632812, | |
| "lon": -97.74065399169922 | |
| }, | |
| { | |
| "lat": 30.28375816345215, | |
| "lon": -97.74176788330078 | |
| }, | |
| { | |
| "lat": 30.418479919433594, | |
| "lon": -97.6686782836914 | |
| }, | |
| { | |
| "lat": 30.579437255859375, | |
| "lon": -97.85313415527344 | |
| }, | |
| { | |
| "lat": 30.420734405517578, | |
| "lon": -97.71623992919922 | |
| }, | |
| { | |
| "lat": 30.312604904174805, | |
| "lon": -97.73118591308594 | |
| }, | |
| { | |
| "lat": 30.26937484741211, | |
| "lon": -97.74857330322266 | |
| }, | |
| { | |
| "lat": 30.225210189819336, | |
| "lon": -97.70411682128906 | |
| }, | |
| { | |
| "lat": 30.224027633666992, | |
| "lon": -97.76646423339844 | |
| }, | |
| { | |
| "lat": 30.229143142700195, | |
| "lon": -97.80000305175781 | |
| }, | |
| { | |
| "lat": 30.293216705322266, | |
| "lon": -97.72542572021484 | |
| }, | |
| { | |
| "lat": 30.58513069152832, | |
| "lon": -97.85566711425781 | |
| }, | |
| { | |
| "lat": 30.39175033569336, | |
| "lon": -97.7216567993164 | |
| }, | |
| { | |
| "lat": 30.270254135131836, | |
| "lon": -97.74591064453125 | |
| }, | |
| { | |
| "lat": 30.356962203979492, | |
| "lon": -97.73685455322266 | |
| }, | |
| { | |
| "lat": 30.37877082824707, | |
| "lon": -97.68824768066406 | |
| }, | |
| { | |
| "lat": 30.305097579956055, | |
| "lon": -97.68087005615234 | |
| }, | |
| { | |
| "lat": 30.227657318115234, | |
| "lon": -97.70753479003906 | |
| }, | |
| { | |
| "lat": 30.163307189941406, | |
| "lon": -97.79135131835938 | |
| }, | |
| { | |
| "lat": 30.421367645263672, | |
| "lon": -97.75418090820312 | |
| }, | |
| { | |
| "lat": 30.264726638793945, | |
| "lon": -97.75696563720703 | |
| }, | |
| { | |
| "lat": 30.289615631103516, | |
| "lon": -97.73995971679688 | |
| }, | |
| { | |
| "lat": 30.241296768188477, | |
| "lon": -97.75259399414062 | |
| }, | |
| { | |
| "lat": 30.283344268798828, | |
| "lon": -97.73410034179688 | |
| }, | |
| { | |
| "lat": 30.345714569091797, | |
| "lon": -97.75186920166016 | |
| }, | |
| { | |
| "lat": 30.31332015991211, | |
| "lon": -97.73137664794922 | |
| }, | |
| { | |
| "lat": 30.38283920288086, | |
| "lon": -97.68596649169922 | |
| }, | |
| { | |
| "lat": 30.280677795410156, | |
| "lon": -97.73362731933594 | |
| }, | |
| { | |
| "lat": 30.340791702270508, | |
| "lon": -97.6905288696289 | |
| }, | |
| { | |
| "lat": 30.217344284057617, | |
| "lon": -97.76731872558594 | |
| }, | |
| { | |
| "lat": 30.23601722717285, | |
| "lon": -97.70490264892578 | |
| }, | |
| { | |
| "lat": 30.414546966552734, | |
| "lon": -97.6644058227539 | |
| }, | |
| { | |
| "lat": 30.179670333862305, | |
| "lon": -97.83353424072266 | |
| }, | |
| { | |
| "lat": 30.284059524536133, | |
| "lon": -97.73397827148438 | |
| }, | |
| { | |
| "lat": 30.28537940979004, | |
| "lon": -97.73052215576172 | |
| }, | |
| { | |
| "lat": 30.16707420349121, | |
| "lon": -97.7897720336914 | |
| }, | |
| { | |
| "lat": 30.290164947509766, | |
| "lon": -97.74138641357422 | |
| }, | |
| { | |
| "lat": 30.28348159790039, | |
| "lon": -97.74198913574219 | |
| }, | |
| { | |
| "lat": 30.23381805419922, | |
| "lon": -97.72241973876953 | |
| }, | |
| { | |
| "lat": 30.2993221282959, | |
| "lon": -97.64647674560547 | |
| }, | |
| { | |
| "lat": 30.29239273071289, | |
| "lon": -97.74132537841797 | |
| }, | |
| { | |
| "lat": 30.25801658630371, | |
| "lon": -97.70478057861328 | |
| }, | |
| { | |
| "lat": 30.42024040222168, | |
| "lon": -97.66642761230469 | |
| }, | |
| { | |
| "lat": 30.223587036132812, | |
| "lon": -97.76358032226562 | |
| }, | |
| { | |
| "lat": 30.22496223449707, | |
| "lon": -97.70325469970703 | |
| }, | |
| { | |
| "lat": 30.255983352661133, | |
| "lon": -97.68489074707031 | |
| }, | |
| { | |
| "lat": 30.191577911376953, | |
| "lon": -97.76909637451172 | |
| }, | |
| { | |
| "lat": 30.314777374267578, | |
| "lon": -97.68106079101562 | |
| }, | |
| { | |
| "lat": 30.253480911254883, | |
| "lon": -97.7570571899414 | |
| }, | |
| { | |
| "lat": 30.176809310913086, | |
| "lon": -97.8340072631836 | |
| }, | |
| { | |
| "lat": 30.427692413330078, | |
| "lon": -97.75721740722656 | |
| }, | |
| { | |
| "lat": 30.396095275878906, | |
| "lon": -97.73362731933594 | |
| }, | |
| { | |
| "lat": 30.299129486083984, | |
| "lon": -97.64603424072266 | |
| }, | |
| { | |
| "lat": 30.27399444580078, | |
| "lon": -97.75262451171875 | |
| }, | |
| { | |
| "lat": 30.2233943939209, | |
| "lon": -97.76681518554688 | |
| }, | |
| { | |
| "lat": 30.256725311279297, | |
| "lon": -97.68245697021484 | |
| }, | |
| { | |
| "lat": 30.579822540283203, | |
| "lon": -97.85332489013672 | |
| }, | |
| { | |
| "lat": 30.16745948791504, | |
| "lon": -97.7885971069336 | |
| }, | |
| { | |
| "lat": 30.33422088623047, | |
| "lon": -97.68524169921875 | |
| }, | |
| { | |
| "lat": 30.358173370361328, | |
| "lon": -97.73546600341797 | |
| }, | |
| { | |
| "lat": 30.239839553833008, | |
| "lon": -97.71884155273438 | |
| }, | |
| { | |
| "lat": 30.268522262573242, | |
| "lon": -97.74658203125 | |
| }, | |
| { | |
| "lat": 30.36380958557129, | |
| "lon": -97.69825744628906 | |
| }, | |
| { | |
| "lat": 30.395076751708984, | |
| "lon": -97.72052001953125 | |
| }, | |
| { | |
| "lat": 30.579574584960938, | |
| "lon": -97.85291290283203 | |
| }, | |
| { | |
| "lat": 30.275150299072266, | |
| "lon": -97.73751831054688 | |
| }, | |
| { | |
| "lat": 30.35883331298828, | |
| "lon": -97.6948013305664 | |
| }, | |
| { | |
| "lat": 30.350088119506836, | |
| "lon": -97.71199798583984 | |
| }, | |
| { | |
| "lat": 30.225128173828125, | |
| "lon": -97.70392608642578 | |
| }, | |
| { | |
| "lat": 30.231645584106445, | |
| "lon": -97.7175064086914 | |
| }, | |
| { | |
| "lat": 30.295555114746094, | |
| "lon": -97.74274444580078 | |
| }, | |
| { | |
| "lat": 30.350143432617188, | |
| "lon": -97.71190643310547 | |
| }, | |
| { | |
| "lat": 30.282052993774414, | |
| "lon": -97.73340606689453 | |
| }, | |
| { | |
| "lat": 30.264726638793945, | |
| "lon": -97.7467041015625 | |
| }, | |
| { | |
| "lat": 30.227190017700195, | |
| "lon": -97.727294921875 | |
| }, | |
| { | |
| "lat": 30.191577911376953, | |
| "lon": -97.77416229248047 | |
| }, | |
| { | |
| "lat": 30.26987075805664, | |
| "lon": -97.73321533203125 | |
| }, | |
| { | |
| "lat": 30.375415802001953, | |
| "lon": -97.7229232788086 | |
| }, | |
| { | |
| "lat": 30.447355270385742, | |
| "lon": -97.8040542602539 | |
| }, | |
| { | |
| "lat": 30.285764694213867, | |
| "lon": -97.73356628417969 | |
| }, | |
| { | |
| "lat": 30.40277671813965, | |
| "lon": -97.71744537353516 | |
| }, | |
| { | |
| "lat": 30.28642463684082, | |
| "lon": -97.7170639038086 | |
| }, | |
| { | |
| "lat": 30.284940719604492, | |
| "lon": -97.73375701904297 | |
| }, | |
| { | |
| "lat": 30.194080352783203, | |
| "lon": -97.8847427368164 | |
| }, | |
| { | |
| "lat": 30.312467575073242, | |
| "lon": -97.7309341430664 | |
| }, | |
| { | |
| "lat": 30.428682327270508, | |
| "lon": -97.75924682617188 | |
| }, | |
| { | |
| "lat": 30.353551864624023, | |
| "lon": -97.72539520263672 | |
| }, | |
| { | |
| "lat": 30.349536895751953, | |
| "lon": -97.71285247802734 | |
| }, | |
| { | |
| "lat": 30.42378807067871, | |
| "lon": -97.75668334960938 | |
| }, | |
| { | |
| "lat": 30.340269088745117, | |
| "lon": -97.69119262695312 | |
| }, | |
| { | |
| "lat": 30.354185104370117, | |
| "lon": -97.7320785522461 | |
| }, | |
| { | |
| "lat": 30.42777442932129, | |
| "lon": -97.76004028320312 | |
| }, | |
| { | |
| "lat": 30.356138229370117, | |
| "lon": -97.68017578125 | |
| }, | |
| { | |
| "lat": 30.238492965698242, | |
| "lon": -97.71912384033203 | |
| }, | |
| { | |
| "lat": 30.32492446899414, | |
| "lon": -97.7270736694336 | |
| }, | |
| { | |
| "lat": 30.309223175048828, | |
| "lon": -97.66136169433594 | |
| }, | |
| { | |
| "lat": 30.269649505615234, | |
| "lon": -97.74502563476562 | |
| }, | |
| { | |
| "lat": 30.353443145751953, | |
| "lon": -97.73255157470703 | |
| }, | |
| { | |
| "lat": 30.33672332763672, | |
| "lon": -97.72887420654297 | |
| }, | |
| { | |
| "lat": 30.231700897216797, | |
| "lon": -97.71763610839844 | |
| }, | |
| { | |
| "lat": 30.226144790649414, | |
| "lon": -97.70588684082031 | |
| }, | |
| { | |
| "lat": 30.285160064697266, | |
| "lon": -97.73112487792969 | |
| }, | |
| { | |
| "lat": 30.355037689208984, | |
| "lon": -97.75218200683594 | |
| }, | |
| { | |
| "lat": 30.36493682861328, | |
| "lon": -97.7283706665039 | |
| }, | |
| { | |
| "lat": 30.2304630279541, | |
| "lon": -97.80088806152344 | |
| }, | |
| { | |
| "lat": 30.237089157104492, | |
| "lon": -97.83898162841797 | |
| }, | |
| { | |
| "lat": 30.28194236755371, | |
| "lon": -97.74205017089844 | |
| }, | |
| { | |
| "lat": 30.352039337158203, | |
| "lon": -97.6779556274414 | |
| }, | |
| { | |
| "lat": 30.34376335144043, | |
| "lon": -97.71507263183594 | |
| }, | |
| { | |
| "lat": 30.2592830657959, | |
| "lon": -97.74952697753906 | |
| }, | |
| { | |
| "lat": 30.40726089477539, | |
| "lon": -97.66339111328125 | |
| }, | |
| { | |
| "lat": 30.23282814025879, | |
| "lon": -97.7056655883789 | |
| }, | |
| { | |
| "lat": 30.192264556884766, | |
| "lon": -97.7652587890625 | |
| }, | |
| { | |
| "lat": 30.251638412475586, | |
| "lon": -97.76481628417969 | |
| }, | |
| { | |
| "lat": 30.289175033569336, | |
| "lon": -97.73371887207031 | |
| }, | |
| { | |
| "lat": 30.422054290771484, | |
| "lon": -97.75481414794922 | |
| }, | |
| { | |
| "lat": 30.232221603393555, | |
| "lon": -97.7200698852539 | |
| }, | |
| { | |
| "lat": 30.27526092529297, | |
| "lon": -97.73084259033203 | |
| }, | |
| { | |
| "lat": 30.28337287902832, | |
| "lon": -97.7220687866211 | |
| }, | |
| { | |
| "lat": 30.37272071838379, | |
| "lon": -97.72672271728516 | |
| }, | |
| { | |
| "lat": 30.31488800048828, | |
| "lon": -97.75395965576172 | |
| }, | |
| { | |
| "lat": 30.283729553222656, | |
| "lon": -97.7414779663086 | |
| }, | |
| { | |
| "lat": 30.576549530029297, | |
| "lon": -97.85167694091797 | |
| }, | |
| { | |
| "lat": 30.167020797729492, | |
| "lon": -97.78834533691406 | |
| }, | |
| { | |
| "lat": 30.256366729736328, | |
| "lon": -97.7015151977539 | |
| }, | |
| { | |
| "lat": 30.231700897216797, | |
| "lon": -97.73600006103516 | |
| }, | |
| { | |
| "lat": 30.17359161376953, | |
| "lon": -97.8010482788086 | |
| }, | |
| { | |
| "lat": 30.253177642822266, | |
| "lon": -97.73429107666016 | |
| }, | |
| { | |
| "lat": 30.27042007446289, | |
| "lon": -97.6895751953125 | |
| }, | |
| { | |
| "lat": 30.586036682128906, | |
| "lon": -97.85563659667969 | |
| }, | |
| { | |
| "lat": 30.180686950683594, | |
| "lon": -97.75047302246094 | |
| }, | |
| { | |
| "lat": 30.19001007080078, | |
| "lon": -97.77029418945312 | |
| }, | |
| { | |
| "lat": 30.167102813720703, | |
| "lon": -97.79119873046875 | |
| }, | |
| { | |
| "lat": 30.24044418334961, | |
| "lon": -97.78660583496094 | |
| }, | |
| { | |
| "lat": 30.282575607299805, | |
| "lon": -97.7408447265625 | |
| }, | |
| { | |
| "lat": 30.199003219604492, | |
| "lon": -97.77662658691406 | |
| }, | |
| { | |
| "lat": 30.581912994384766, | |
| "lon": -97.854248046875 | |
| }, | |
| { | |
| "lat": 30.28141975402832, | |
| "lon": -97.74125671386719 | |
| }, | |
| { | |
| "lat": 30.2548828125, | |
| "lon": -97.73027038574219 | |
| }, | |
| { | |
| "lat": 30.237611770629883, | |
| "lon": -97.71731567382812 | |
| }, | |
| { | |
| "lat": 30.178295135498047, | |
| "lon": -97.79673767089844 | |
| }, | |
| { | |
| "lat": 30.357210159301758, | |
| "lon": -97.73346710205078 | |
| }, | |
| { | |
| "lat": 30.280622482299805, | |
| "lon": -97.73375701904297 | |
| }, | |
| { | |
| "lat": 30.285764694213867, | |
| "lon": -97.77871704101562 | |
| }, | |
| { | |
| "lat": 30.278615951538086, | |
| "lon": -97.72884368896484 | |
| }, | |
| { | |
| "lat": 30.38987922668457, | |
| "lon": -97.70240020751953 | |
| }, | |
| { | |
| "lat": 30.190780639648438, | |
| "lon": -97.77127838134766 | |
| }, | |
| { | |
| "lat": 30.23387336730957, | |
| "lon": -97.839111328125 | |
| }, | |
| { | |
| "lat": 30.236650466918945, | |
| "lon": -97.70173645019531 | |
| }, | |
| { | |
| "lat": 30.15703773498535, | |
| "lon": -97.74366760253906 | |
| }, | |
| { | |
| "lat": 30.308122634887695, | |
| "lon": -97.71168518066406 | |
| }, | |
| { | |
| "lat": 30.291154861450195, | |
| "lon": -97.74128723144531 | |
| }, | |
| { | |
| "lat": 30.285215377807617, | |
| "lon": -97.73308563232422 | |
| }, | |
| { | |
| "lat": 30.428682327270508, | |
| "lon": -97.75930786132812 | |
| }, | |
| { | |
| "lat": 30.295555114746094, | |
| "lon": -97.7426528930664 | |
| }, | |
| { | |
| "lat": 30.40926742553711, | |
| "lon": -97.66326141357422 | |
| }, | |
| { | |
| "lat": 30.26491928100586, | |
| "lon": -97.73907470703125 | |
| }, | |
| { | |
| "lat": 30.2424259185791, | |
| "lon": -97.89661407470703 | |
| }, | |
| { | |
| "lat": 30.24677085876465, | |
| "lon": -97.77742004394531 | |
| }, | |
| { | |
| "lat": 30.343486785888672, | |
| "lon": -97.71522521972656 | |
| }, | |
| { | |
| "lat": 30.16743278503418, | |
| "lon": -97.7885971069336 | |
| }, | |
| { | |
| "lat": 30.2974796295166, | |
| "lon": -97.64099884033203 | |
| }, | |
| { | |
| "lat": 30.214622497558594, | |
| "lon": -97.66256713867188 | |
| }, | |
| { | |
| "lat": 30.22584342956543, | |
| "lon": -97.76921844482422 | |
| }, | |
| { | |
| "lat": 30.299213409423828, | |
| "lon": -97.74037170410156 | |
| }, | |
| { | |
| "lat": 30.19243049621582, | |
| "lon": -97.7652587890625 | |
| }, | |
| { | |
| "lat": 30.291072845458984, | |
| "lon": -97.7413558959961 | |
| }, | |
| { | |
| "lat": 30.34786033630371, | |
| "lon": -97.71336364746094 | |
| }, | |
| { | |
| "lat": 30.270063400268555, | |
| "lon": -97.7497787475586 | |
| }, | |
| { | |
| "lat": 30.31681251525879, | |
| "lon": -97.73197937011719 | |
| }, | |
| { | |
| "lat": 30.180330276489258, | |
| "lon": -97.76114654541016 | |
| }, | |
| { | |
| "lat": 30.273609161376953, | |
| "lon": -97.69087982177734 | |
| }, | |
| { | |
| "lat": 30.349454879760742, | |
| "lon": -97.71145629882812 | |
| }, | |
| { | |
| "lat": 30.23395538330078, | |
| "lon": -97.8637466430664 | |
| }, | |
| { | |
| "lat": 30.277019500732422, | |
| "lon": -97.74211120605469 | |
| }, | |
| { | |
| "lat": 30.34725570678711, | |
| "lon": -97.71234893798828 | |
| }, | |
| { | |
| "lat": 30.27096939086914, | |
| "lon": -97.74433135986328 | |
| }, | |
| { | |
| "lat": 30.223861694335938, | |
| "lon": -97.70845031738281 | |
| }, | |
| { | |
| "lat": 30.267284393310547, | |
| "lon": -97.73688507080078 | |
| }, | |
| { | |
| "lat": 30.328720092773438, | |
| "lon": -97.73979949951172 | |
| }, | |
| { | |
| "lat": 30.286176681518555, | |
| "lon": -97.66947174072266 | |
| }, | |
| { | |
| "lat": 30.292144775390625, | |
| "lon": -97.74125671386719 | |
| }, | |
| { | |
| "lat": 30.41578483581543, | |
| "lon": -97.6669692993164 | |
| }, | |
| { | |
| "lat": 30.258787155151367, | |
| "lon": -97.69129180908203 | |
| }, | |
| { | |
| "lat": 30.18341064453125, | |
| "lon": -97.76861572265625 | |
| }, | |
| { | |
| "lat": 30.293272018432617, | |
| "lon": -97.74176788330078 | |
| }, | |
| { | |
| "lat": 30.34893226623535, | |
| "lon": -97.71276092529297 | |
| }, | |
| { | |
| "lat": 30.193639755249023, | |
| "lon": -97.74898529052734 | |
| }, | |
| { | |
| "lat": 30.294235229492188, | |
| "lon": -97.7423324584961 | |
| }, | |
| { | |
| "lat": 30.268522262573242, | |
| "lon": -97.7452163696289 | |
| }, | |
| { | |
| "lat": 30.284252166748047, | |
| "lon": -97.6600341796875 | |
| }, | |
| { | |
| "lat": 30.283510208129883, | |
| "lon": -97.74081420898438 | |
| }, | |
| { | |
| "lat": 30.254304885864258, | |
| "lon": -97.71348571777344 | |
| }, | |
| { | |
| "lat": 30.23543930053711, | |
| "lon": -97.72476196289062 | |
| }, | |
| { | |
| "lat": 30.292007446289062, | |
| "lon": -97.74268341064453 | |
| }, | |
| { | |
| "lat": 30.282575607299805, | |
| "lon": -97.73368835449219 | |
| }, | |
| { | |
| "lat": 30.30292510986328, | |
| "lon": -97.73812103271484 | |
| }, | |
| { | |
| "lat": 30.37288475036621, | |
| "lon": -97.74920654296875 | |
| }, | |
| { | |
| "lat": 30.37478256225586, | |
| "lon": -97.71161651611328 | |
| }, | |
| { | |
| "lat": 30.363754272460938, | |
| "lon": -97.71585845947266 | |
| }, | |
| { | |
| "lat": 30.222789764404297, | |
| "lon": -97.76282501220703 | |
| }, | |
| { | |
| "lat": 30.202028274536133, | |
| "lon": -97.77574157714844 | |
| }, | |
| { | |
| "lat": 30.579326629638672, | |
| "lon": -97.85285186767578 | |
| }, | |
| { | |
| "lat": 30.190752029418945, | |
| "lon": -97.77118682861328 | |
| }, | |
| { | |
| "lat": 30.283647537231445, | |
| "lon": -97.69635772705078 | |
| }, | |
| { | |
| "lat": 30.363616943359375, | |
| "lon": -97.69683074951172 | |
| }, | |
| { | |
| "lat": 30.23692512512207, | |
| "lon": -97.720703125 | |
| }, | |
| { | |
| "lat": 30.418231964111328, | |
| "lon": -97.66829681396484 | |
| }, | |
| { | |
| "lat": 30.3582820892334, | |
| "lon": -97.75126647949219 | |
| }, | |
| { | |
| "lat": 30.2315616607666, | |
| "lon": -97.73346710205078 | |
| }, | |
| { | |
| "lat": 30.200817108154297, | |
| "lon": -97.7856216430664 | |
| }, | |
| { | |
| "lat": 30.35129737854004, | |
| "lon": -97.75452423095703 | |
| }, | |
| { | |
| "lat": 30.213659286499023, | |
| "lon": -97.71155548095703 | |
| }, | |
| { | |
| "lat": 30.283042907714844, | |
| "lon": -97.700439453125 | |
| }, | |
| { | |
| "lat": 30.233158111572266, | |
| "lon": -97.7320785522461 | |
| }, | |
| { | |
| "lat": 30.426454544067383, | |
| "lon": -97.67621612548828 | |
| }, | |
| { | |
| "lat": 30.177223205566406, | |
| "lon": -97.83397674560547 | |
| }, | |
| { | |
| "lat": 30.192346572875977, | |
| "lon": -97.74911499023438 | |
| }, | |
| { | |
| "lat": 30.340023040771484, | |
| "lon": -97.68878936767578 | |
| }, | |
| { | |
| "lat": 30.232112884521484, | |
| "lon": -97.71712493896484 | |
| }, | |
| { | |
| "lat": 30.2773494720459, | |
| "lon": -97.70072174072266 | |
| }, | |
| { | |
| "lat": 30.237062454223633, | |
| "lon": -97.83834838867188 | |
| }, | |
| { | |
| "lat": 30.37480926513672, | |
| "lon": -97.72317504882812 | |
| }, | |
| { | |
| "lat": 30.339885711669922, | |
| "lon": -97.6884994506836 | |
| }, | |
| { | |
| "lat": 30.264013290405273, | |
| "lon": -97.7359390258789 | |
| }, | |
| { | |
| "lat": 30.268577575683594, | |
| "lon": -97.744140625 | |
| }, | |
| { | |
| "lat": 30.256999969482422, | |
| "lon": -97.74664306640625 | |
| }, | |
| { | |
| "lat": 30.23142433166504, | |
| "lon": -97.70613861083984 | |
| }, | |
| { | |
| "lat": 30.23700714111328, | |
| "lon": -97.8397445678711 | |
| }, | |
| { | |
| "lat": 30.309112548828125, | |
| "lon": -97.72931671142578 | |
| }, | |
| { | |
| "lat": 30.289697647094727, | |
| "lon": -97.73676300048828 | |
| }, | |
| { | |
| "lat": 30.395572662353516, | |
| "lon": -97.84392547607422 | |
| }, | |
| { | |
| "lat": 30.19352912902832, | |
| "lon": -97.76681518554688 | |
| }, | |
| { | |
| "lat": 30.402612686157227, | |
| "lon": -97.71931457519531 | |
| }, | |
| { | |
| "lat": 30.234752655029297, | |
| "lon": -97.79569244384766 | |
| }, | |
| { | |
| "lat": 30.424585342407227, | |
| "lon": -97.71320343017578 | |
| }, | |
| { | |
| "lat": 30.333614349365234, | |
| "lon": -97.68565368652344 | |
| }, | |
| { | |
| "lat": 30.27330780029297, | |
| "lon": -97.7431869506836 | |
| }, | |
| { | |
| "lat": 30.57968521118164, | |
| "lon": -97.85326385498047 | |
| }, | |
| { | |
| "lat": 30.359519958496094, | |
| "lon": -97.7380599975586 | |
| }, | |
| { | |
| "lat": 30.39334487915039, | |
| "lon": -97.7435073852539 | |
| }, | |
| { | |
| "lat": 30.284143447875977, | |
| "lon": -97.70497131347656 | |
| }, | |
| { | |
| "lat": 30.581279754638672, | |
| "lon": -97.85392761230469 | |
| }, | |
| { | |
| "lat": 30.257522583007812, | |
| "lon": -97.7472152709961 | |
| }, | |
| { | |
| "lat": 30.583534240722656, | |
| "lon": -97.85497283935547 | |
| }, | |
| { | |
| "lat": 30.26497459411621, | |
| "lon": -97.69597625732422 | |
| }, | |
| { | |
| "lat": 30.285104751586914, | |
| "lon": -97.73147583007812 | |
| }, | |
| { | |
| "lat": 30.162647247314453, | |
| "lon": -97.78996276855469 | |
| }, | |
| { | |
| "lat": 30.16245460510254, | |
| "lon": -97.78907775878906 | |
| }, | |
| { | |
| "lat": 30.170045852661133, | |
| "lon": -97.78460693359375 | |
| }, | |
| { | |
| "lat": 30.221773147583008, | |
| "lon": -97.76313781738281 | |
| }, | |
| { | |
| "lat": 30.376184463500977, | |
| "lon": -97.72254180908203 | |
| }, | |
| { | |
| "lat": 30.23139762878418, | |
| "lon": -97.88343811035156 | |
| }, | |
| { | |
| "lat": 30.439956665039062, | |
| "lon": -97.70132446289062 | |
| }, | |
| { | |
| "lat": 30.308040618896484, | |
| "lon": -97.72713470458984 | |
| }, | |
| { | |
| "lat": 30.242095947265625, | |
| "lon": -97.7175064086914 | |
| }, | |
| { | |
| "lat": 30.414630889892578, | |
| "lon": -97.66605377197266 | |
| }, | |
| { | |
| "lat": 30.578805923461914, | |
| "lon": -97.85263061523438 | |
| }, | |
| { | |
| "lat": 30.357210159301758, | |
| "lon": -97.73733520507812 | |
| }, | |
| { | |
| "lat": 30.37590980529785, | |
| "lon": -97.72283172607422 | |
| }, | |
| { | |
| "lat": 30.402694702148438, | |
| "lon": -97.71880340576172 | |
| }, | |
| { | |
| "lat": 30.294483184814453, | |
| "lon": -97.6893539428711 | |
| }, | |
| { | |
| "lat": 30.31788444519043, | |
| "lon": -97.7313461303711 | |
| }, | |
| { | |
| "lat": 30.269126892089844, | |
| "lon": -97.74632263183594 | |
| }, | |
| { | |
| "lat": 30.32935333251953, | |
| "lon": -97.71288299560547 | |
| }, | |
| { | |
| "lat": 30.27383041381836, | |
| "lon": -97.75997161865234 | |
| }, | |
| { | |
| "lat": 30.263076782226562, | |
| "lon": -97.69718170166016 | |
| }, | |
| { | |
| "lat": 30.25688934326172, | |
| "lon": -97.7030029296875 | |
| }, | |
| { | |
| "lat": 30.31285285949707, | |
| "lon": -97.6650390625 | |
| }, | |
| { | |
| "lat": 30.320690155029297, | |
| "lon": -97.71614837646484 | |
| }, | |
| { | |
| "lat": 30.252681732177734, | |
| "lon": -97.73533630371094 | |
| }, | |
| { | |
| "lat": 30.18890953063965, | |
| "lon": -97.74530792236328 | |
| }, | |
| { | |
| "lat": 30.282575607299805, | |
| "lon": -97.73368835449219 | |
| }, | |
| { | |
| "lat": 30.369117736816406, | |
| "lon": -97.7147216796875 | |
| }, | |
| { | |
| "lat": 30.258127212524414, | |
| "lon": -97.70503234863281 | |
| }, | |
| { | |
| "lat": 30.23788833618164, | |
| "lon": -97.78872680664062 | |
| }, | |
| { | |
| "lat": 30.254056930541992, | |
| "lon": -97.68612670898438 | |
| }, | |
| { | |
| "lat": 30.578832626342773, | |
| "lon": -97.85250091552734 | |
| }, | |
| { | |
| "lat": 30.284500122070312, | |
| "lon": -97.6909408569336 | |
| }, | |
| { | |
| "lat": 30.22298240661621, | |
| "lon": -97.76301574707031 | |
| }, | |
| { | |
| "lat": 30.400081634521484, | |
| "lon": -97.72029876708984 | |
| }, | |
| { | |
| "lat": 30.204776763916016, | |
| "lon": -97.71513366699219 | |
| }, | |
| { | |
| "lat": 30.167129516601562, | |
| "lon": -97.7885971069336 | |
| }, | |
| { | |
| "lat": 30.218692779541016, | |
| "lon": -97.7550048828125 | |
| }, | |
| { | |
| "lat": 30.167129516601562, | |
| "lon": -97.78863525390625 | |
| }, | |
| { | |
| "lat": 30.35085678100586, | |
| "lon": -97.67630767822266 | |
| }, | |
| { | |
| "lat": 30.28375816345215, | |
| "lon": -97.74100494384766 | |
| }, | |
| { | |
| "lat": 30.26445198059082, | |
| "lon": -97.73726654052734 | |
| }, | |
| { | |
| "lat": 30.23893165588379, | |
| "lon": -97.78274536132812 | |
| }, | |
| { | |
| "lat": 30.311065673828125, | |
| "lon": -97.73169708251953 | |
| }, | |
| { | |
| "lat": 30.426069259643555, | |
| "lon": -97.75817108154297 | |
| }, | |
| { | |
| "lat": 30.375057220458984, | |
| "lon": -97.72257232666016 | |
| }, | |
| { | |
| "lat": 30.23736572265625, | |
| "lon": -97.71731567382812 | |
| }, | |
| { | |
| "lat": 30.267257690429688, | |
| "lon": -97.7473373413086 | |
| }, | |
| { | |
| "lat": 30.273527145385742, | |
| "lon": -97.69837951660156 | |
| }, | |
| { | |
| "lat": 30.2598876953125, | |
| "lon": -97.70952606201172 | |
| }, | |
| { | |
| "lat": 30.344697952270508, | |
| "lon": -97.71440124511719 | |
| }, | |
| { | |
| "lat": 30.36438751220703, | |
| "lon": -97.69955444335938 | |
| }, | |
| { | |
| "lat": 30.48186683654785, | |
| "lon": -97.78961181640625 | |
| }, | |
| { | |
| "lat": 30.241132736206055, | |
| "lon": -97.89138793945312 | |
| }, | |
| { | |
| "lat": 30.271739959716797, | |
| "lon": -97.69078063964844 | |
| }, | |
| { | |
| "lat": 30.408140182495117, | |
| "lon": -97.6969223022461 | |
| }, | |
| { | |
| "lat": 30.27641487121582, | |
| "lon": -97.73710632324219 | |
| }, | |
| { | |
| "lat": 30.34939956665039, | |
| "lon": -97.71288299560547 | |
| }, | |
| { | |
| "lat": 30.166828155517578, | |
| "lon": -97.7872085571289 | |
| }, | |
| { | |
| "lat": 30.23736572265625, | |
| "lon": -97.71358489990234 | |
| }, | |
| { | |
| "lat": 30.304794311523438, | |
| "lon": -97.6817855834961 | |
| }, | |
| { | |
| "lat": 30.232580184936523, | |
| "lon": -97.70572662353516 | |
| }, | |
| { | |
| "lat": 30.416362762451172, | |
| "lon": -97.718994140625 | |
| }, | |
| { | |
| "lat": 30.23434066772461, | |
| "lon": -97.69746398925781 | |
| }, | |
| { | |
| "lat": 30.285297393798828, | |
| "lon": -97.66320037841797 | |
| }, | |
| { | |
| "lat": 30.280319213867188, | |
| "lon": -97.73416137695312 | |
| }, | |
| { | |
| "lat": 30.25248908996582, | |
| "lon": -97.68720245361328 | |
| }, | |
| { | |
| "lat": 30.321157455444336, | |
| "lon": -97.71896362304688 | |
| }, | |
| { | |
| "lat": 30.223201751708984, | |
| "lon": -97.76615142822266 | |
| }, | |
| { | |
| "lat": 30.292034149169922, | |
| "lon": -97.7410659790039 | |
| }, | |
| { | |
| "lat": 30.293630599975586, | |
| "lon": -97.633056640625 | |
| }, | |
| { | |
| "lat": 30.22798728942871, | |
| "lon": -97.727294921875 | |
| }, | |
| { | |
| "lat": 30.282739639282227, | |
| "lon": -97.72713470458984 | |
| }, | |
| { | |
| "lat": 30.42169761657715, | |
| "lon": -97.75446319580078 | |
| }, | |
| { | |
| "lat": 30.189184188842773, | |
| "lon": -97.76760864257812 | |
| }, | |
| { | |
| "lat": 30.28339958190918, | |
| "lon": -97.6282730102539 | |
| }, | |
| { | |
| "lat": 30.23997688293457, | |
| "lon": -97.7271957397461 | |
| }, | |
| { | |
| "lat": 30.394363403320312, | |
| "lon": -97.84382629394531 | |
| }, | |
| { | |
| "lat": 30.265056610107422, | |
| "lon": -97.73945617675781 | |
| }, | |
| { | |
| "lat": 30.24341583251953, | |
| "lon": -97.72960662841797 | |
| } | |
| ]; | |
| L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpbG10dnA3NzY3OTZ0dmtwejN2ZnUycjYifQ.1W5oTOnWXQ9R1w8u3Oo1yA'; | |
| var map = window.map = new L.mapbox.map('map', 'mapbox.streets', { | |
| center: [30.263213, -97.7197243], | |
| zoom: 15, | |
| attributionControl: false, | |
| zoomControl: false, | |
| }); | |
| map.on('zoomanim click dblclick contextmenu focus blur preclick load unload viewreset movestart move moveend dragstart drag dragend zoomstart zoomend zoomlevelschange resize autopanstart layeradd layerremove baselayerchange overlayadd overlayremove locationfound locationerror popupopen popupclose', function(e) { console.log(e.type) }); | |
| var $map = document.querySelector('#map'); | |
| function draw() { | |
| vehicles.forEach(function(vehicle) { | |
| vehicle.marker.setLatLng([vehicle.lat, vehicle.lon]); | |
| }); | |
| } | |
| function disableTransition() { | |
| $map.classList.remove('transition'); | |
| } | |
| function enableTransition() { | |
| $map.classList.add('transition'); | |
| } | |
| map.whenReady(function() { | |
| requestAnimationFrame(draw); | |
| vehicles.forEach(function (vehicle) { | |
| vehicle.marker = L.marker([vehicle.lat, vehicle.lon], { | |
| icon: L.divIcon({ | |
| html: '<div>642</div>', | |
| className: 'vehicle', | |
| iconSize: [28, 28], | |
| }), | |
| }); | |
| vehicle.marker.addTo(map); | |
| }); | |
| }); | |
| map.on('resize', function() { disableTransition(); requestAnimationFrame(draw); }); | |
| var mapBusy = false; | |
| function setMapBusy() { | |
| mapBusy = true; | |
| } | |
| function setMapReady() { | |
| mapBusy = false; | |
| } | |
| map.on('dragstart', setMapBusy); | |
| map.on('dragend', setMapReady); | |
| map.on('movestart', setMapBusy); | |
| map.on('moveend', setMapReady); | |
| map.on('zoomstart', setMapBusy); | |
| map.on('zoomend', setMapReady); | |
| var animationScheduled = false; | |
| setInterval(function() { | |
| if (animationScheduled) { | |
| console.log('animation already scheduled') | |
| return; | |
| } | |
| animationScheduled = true; | |
| vehicles.forEach(function(vehicle) { | |
| vehicle.lat = vehicle.lat + Math.random() * 0.001; | |
| vehicle.lon = vehicle.lon + Math.random() * 0.001; | |
| }); | |
| function doItInner() { | |
| if (mapBusy) { | |
| console.log('map is busy, waiting'); | |
| return setTimeout(doIt, 50); | |
| } | |
| console.log('doing it') | |
| enableTransition(); | |
| draw(); | |
| setTimeout(function() { | |
| disableTransition(); | |
| animationScheduled = false; | |
| }, 300); | |
| } | |
| function doIt() { | |
| requestAnimationFrame(doItInner); | |
| } | |
| doIt(); | |
| }, 3000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment