Skip to content

Instantly share code, notes, and snippets.

@mfazekas

mfazekas/BugReportExample.js

Created June 8, 2020 15:52
Show Gist options
  • Save mfazekas/ba94f984b7b6fa6c9971417333816fa2 to your computer and use it in GitHub Desktop.
Save mfazekas/ba94f984b7b6fa6c9971417333816fa2 to your computer and use it in GitHub Desktop.
Download ZIP
Bug report example for point annotation loop crash
Raw
BugReportExample.js
import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import {Platform, SafeAreaView, StyleSheet, View} from 'react-native';
import {point, lineString as makeLineString} from '@turf/helpers';
//import Svg, {Path} from 'react-native-svg';
// const MAPBOX_GL_ACCESS_TOKEN = 'CHANGE_ME';
const ROUTE_POINTS = [
{
"id":1,
"lat":46.1327714,
"lng":3.452876,
"accuracy":13.5,
"speed":0.03430812060832977,
"timestamp":1591108619000,
"scrollIndex":1,
"instruction":"start",
"type":"start"
},
{
"id":2,
"lat":46.1327668,
"lng":3.4528768,
"accuracy":5.635000228881836,
"speed":0.7764677405357361,
"timestamp":1591108631066,
"instruction":null,
"type":"mute"
},
{
"id":3,
"lat":46.1327616,
"lng":3.4528768,
"accuracy":6.861999988555908,
"speed":0.9473251700401306,
"timestamp":1591108632209,
"instruction":null,
"type":"mute"
},
{
"id":4,
"lat":46.1327556,
"lng":3.4528832,
"accuracy":8.04800033569336,
"speed":1.1568708419799805,
"timestamp":1591108633000,
"instruction":null,
"type":"mute"
},
{
"id":5,
"lat":46.1327465,
"lng":3.4528994,
"accuracy":9.08899974822998,
"speed":1.2244271039962769,
"timestamp":1591108634776,
"instruction":null,
"type":"mute"
},
{
"id":6,
"lat":46.1327408,
"lng":3.4529104,
"accuracy":9.942000389099121,
"speed":1.1493090391159058,
"timestamp":1591108635896,
"instruction":null,
"type":"mute"
},
{
"id":7,
"lat":46.132736,
"lng":3.45292,
"accuracy":10.184000015258789,
"speed":0.042311012744903564,
"timestamp":1591108637000,
"instruction":null,
"type":"mute"
},
{
"id":8,
"lat":46.1327348,
"lng":3.4529241,
"accuracy":10.734999656677246,
"speed":0.24676699936389923,
"timestamp":1591108638460,
"instruction":null,
"type":"mute"
},
{
"id":9,
"lat":46.1327298,
"lng":3.452931,
"accuracy":11.451000213623047,
"speed":0.6499834060668945,
"timestamp":1591108639499,
"instruction":null,
"type":"mute"
},
{
"id":10,
"lat":46.1327224,
"lng":3.452941,
"accuracy":12.354000091552734,
"speed":0.8580278158187866,
"timestamp":1591108640522,
"instruction":null,
"type":"mute"
},
{
"id":11,
"lat":46.1327128,
"lng":3.4529539,
"accuracy":13.098999977111816,
"speed":0.9072217345237732,
"timestamp":1591108641541,
"instruction":null,
"type":"mute"
},
{
"id":12,
"lat":46.1326994,
"lng":3.4529686,
"accuracy":13.652999877929688,
"speed":0.9321717023849487,
"timestamp":1591108642602,
"instruction":null,
"type":"mute"
},
{
"id":13,
"lat":46.132683,
"lng":3.4529836,
"accuracy":13.789999961853027,
"speed":0.9788467288017273,
"timestamp":1591108643647,
"instruction":null,
"type":"mute"
},
{
"id":14,
"lat":46.1326693,
"lng":3.453001,
"accuracy":13.65999984741211,
"speed":1.0599993467330933,
"timestamp":1591108644681,
"instruction":null,
"type":"mute"
},
{
"id":15,
"lat":46.1326522,
"lng":3.4530282,
"accuracy":13.125,
"speed":1.1374852657318115,
"timestamp":1591108646219,
"instruction":null,
"type":"mute"
},
{
"id":16,
"lat":46.1326405,
"lng":3.4530512,
"accuracy":12.37399959564209,
"speed":1.1661618947982788,
"timestamp":1591108647290,
"instruction":null,
"type":"mute"
},
{
"id":17,
"lat":46.1326285,
"lng":3.453079,
"accuracy":11.465999603271484,
"speed":1.1673872470855713,
"timestamp":1591108648742,
"instruction":null,
"type":"mute"
},
{
"id":18,
"lat":46.1326218,
"lng":3.4530973,
"accuracy":11.062000274658203,
"speed":1.160884141921997,
"timestamp":1591108649806,
"instruction":null,
"type":"mute"
},
{
"id":19,
"lat":46.1326162,
"lng":3.4531145,
"accuracy":10.654999732971191,
"speed":1.15677011013031,
"timestamp":1591108650823,
"instruction":null,
"type":"mute"
},
{
"id":20,
"lat":46.1326065,
"lng":3.4531374,
"accuracy":10.562000274658203,
"speed":1.1561408042907715,
"timestamp":1591108652329,
"instruction":null,
"type":"mute"
},
{
"id":21,
"lat":46.1325961,
"lng":3.4531558,
"accuracy":10.345000267028809,
"speed":1.159841537475586,
"timestamp":1591108653344,
"instruction":null,
"type":"mute"
},
{
"id":22,
"lat":46.1325853,
"lng":3.4531691,
"accuracy":10.199999809265137,
"speed":1.1648876667022705,
"timestamp":1591108654347,
"instruction":null,
"type":"mute"
},
{
"id":23,
"lat":46.1325765,
"lng":3.4531822,
"accuracy":10.045999526977539,
"speed":1.1691510677337646,
"timestamp":1591108655377,
"instruction":null,
"type":"mute"
},
{
"id":24,
"lat":46.1325648,
"lng":3.4532022,
"accuracy":9.776000022888184,
"speed":1.1753294467926025,
"timestamp":1591108656956,
"instruction":null,
"type":"mute"
},
{
"id":25,
"lat":46.1325562,
"lng":3.4532202,
"accuracy":9.659000396728516,
"speed":1.1787805557250977,
"timestamp":1591108658000,
"instruction":null,
"type":"mute"
},
{
"id":26,
"lat":46.132549,
"lng":3.4532364,
"accuracy":9.623000144958496,
"speed":1.1851682662963867,
"timestamp":1591108659000,
"instruction":null,
"type":"mute"
},
{
"id":27,
"lat":46.1325405,
"lng":3.4532533,
"accuracy":9.619000434875488,
"speed":1.1952227354049683,
"timestamp":1591108660000,
"instruction":null,
"type":"mute"
},
{
"id":28,
"lat":46.1325253,
"lng":3.4532781,
"accuracy":9.565999984741211,
"speed":1.2539831399917603,
"timestamp":1591108661882,
"instruction":null,
"type":"mute"
},
{
"id":29,
"lat":46.1325124,
"lng":3.4532939,
"accuracy":9.595000267028809,
"speed":1.2810018062591553,
"timestamp":1591108662948,
"instruction":null,
"type":"mute"
},
{
"id":30,
"lat":46.1324923,
"lng":3.4533089,
"accuracy":9.536999702453613,
"speed":1.3202420473098755,
"timestamp":1591108664000,
"instruction":null,
"type":"mute"
},
{
"id":31,
"lat":46.1324778,
"lng":3.4533228,
"accuracy":9.564000129699707,
"speed":1.3341060876846313,
"timestamp":1591108665000,
"instruction":null,
"type":"mute"
},
{
"id":32,
"lat":46.1324575,
"lng":3.4533461,
"accuracy":9.642000198364258,
"speed":1.3281965255737305,
"timestamp":1591108666926,
"instruction":null,
"type":"mute"
},
{
"id":33,
"lat":46.1324443,
"lng":3.4533608,
"accuracy":9.626999855041504,
"speed":1.3116868734359741,
"timestamp":1591108667927,
"instruction":null,
"type":"mute"
},
{
"id":34,
"lat":46.1324265,
"lng":3.4533809,
"accuracy":9.699000358581543,
"speed":1.2907674312591553,
"timestamp":1591108669000,
"instruction":null,
"type":"mute"
},
{
"id":35,
"lat":46.1324157,
"lng":3.4533945,
"accuracy":9.670000076293945,
"speed":1.2657891511917114,
"timestamp":1591108670000,
"instruction":null,
"type":"mute"
},
{
"id":36,
"lat":46.1324007,
"lng":3.4534146,
"accuracy":9.699000358581543,
"speed":1.2407797574996948,
"timestamp":1591108672016,
"instruction":null,
"type":"mute"
},
{
"id":37,
"lat":46.132386,
"lng":3.4534307,
"accuracy":9.920999526977539,
"speed":1.2449361085891724,
"timestamp":1591108673000,
"instruction":null,
"type":"mute"
},
{
"id":38,
"lat":46.132374,
"lng":3.4534394,
"accuracy":9.991000175476074,
"speed":1.229191541671753,
"timestamp":1591108674422,
"instruction":null,
"type":"mute"
},
{
"id":39,
"lat":46.1323575,
"lng":3.4534564,
"accuracy":10.156000137329102,
"speed":1.2319111824035645,
"timestamp":1591108675929,
"instruction":null,
"type":"mute"
},
{
"id":40,
"lat":46.1323473,
"lng":3.4534683,
"accuracy":10.295999526977539,
"speed":1.2301054000854492,
"timestamp":1591108676968,
"instruction":null,
"type":"mute"
},
{
"id":41,
"lat":46.1323382,
"lng":3.45348,
"accuracy":10.342000007629395,
"speed":1.2237175703048706,
"timestamp":1591108677984,
"instruction":null,
"type":"mute"
},
{
"id":42,
"lat":46.1323269,
"lng":3.4534996,
"accuracy":10.614999771118164,
"speed":1.2144081592559814,
"timestamp":1591108679463,
"instruction":null,
"type":"mute"
},
{
"id":43,
"lat":46.1323181,
"lng":3.4535147,
"accuracy":10.772000312805176,
"speed":1.2244654893875122,
"timestamp":1591108680542,
"instruction":null,
"type":"mute"
},
{
"id":44,
"lat":46.132305,
"lng":3.4535355,
"accuracy":11.055000305175781,
"speed":1.2391130924224854,
"timestamp":1591108682008,
"instruction":null,
"type":"mute"
},
{
"id":45,
"lat":46.132289,
"lng":3.4535512,
"accuracy":11.251999855041504,
"speed":1.2488669157028198,
"timestamp":1591108683000,
"instruction":null,
"type":"mute"
},
{
"id":46,
"lat":46.1322711,
"lng":3.4535583,
"accuracy":11.14799976348877,
"speed":1.2523823976516724,
"timestamp":1591108684466,
"instruction":null,
"type":"mute"
},
{
"id":47,
"lat":46.1322525,
"lng":3.4535752,
"accuracy":11.123000144958496,
"speed":1.2544689178466797,
"timestamp":1591108686005,
"instruction":null,
"type":"mute"
},
{
"id":48,
"lat":46.1322418,
"lng":3.4535889,
"accuracy":11.055000305175781,
"speed":1.2552380561828613,
"timestamp":1591108687104,
"instruction":null,
"type":"mute"
},
{
"id":49,
"lat":46.1322329,
"lng":3.4536022,
"accuracy":10.928000450134277,
"speed":1.2532227039337158,
"timestamp":1591108688189,
"instruction":null,
"type":"mute"
},
{
"id":50,
"lat":46.1322228,
"lng":3.4536153,
"accuracy":11.27299976348877,
"speed":1.2471836805343628,
"timestamp":1591108689000,
"instruction":null,
"type":"mute"
},
{
"id":51,
"lat":46.1322079,
"lng":3.4536338,
"accuracy":11.637999534606934,
"speed":1.2388569116592407,
"timestamp":1591108691017,
"instruction":null,
"type":"mute"
},
{
"id":52,
"lat":46.1321982,
"lng":3.4536475,
"accuracy":11.821000099182129,
"speed":1.2345046997070312,
"timestamp":1591108692078,
"instruction":null,
"type":"mute"
},
{
"id":53,
"lat":46.1321876,
"lng":3.4536602,
"accuracy":11.932000160217285,
"speed":1.23027765750885,
"timestamp":1591108693082,
"instruction":null,
"type":"mute"
},
{
"id":54,
"lat":46.1321692,
"lng":3.4536733,
"accuracy":11.930000305175781,
"speed":1.2261555194854736,
"timestamp":1591108694526,
"instruction":null,
"type":"mute"
},
{
"id":55,
"lat":46.1321579,
"lng":3.4536872,
"accuracy":11.871000289916992,
"speed":1.2251287698745728,
"timestamp":1591108695543,
"instruction":null,
"type":"mute"
},
{
"id":56,
"lat":46.1321435,
"lng":3.4537096,
"accuracy":11.581999778747559,
"speed":1.2157622575759888,
"timestamp":1591108697117,
"instruction":null,
"type":"mute"
},
{
"id":57,
"lat":46.132132,
"lng":3.4537325,
"accuracy":11.289999961853027,
"speed":1.2139892578125,
"timestamp":1591108698000,
"instruction":null,
"type":"mute"
},
{
"id":58,
"lat":46.132121,
"lng":3.4537526,
"accuracy":10.784000396728516,
"speed":1.2164543867111206,
"timestamp":1591108699561,
"instruction":null,
"type":"mute"
},
{
"id":59,
"lat":46.1321119,
"lng":3.4537659,
"accuracy":10.37399959564209,
"speed":1.230814814567566,
"timestamp":1591108700604,
"instruction":null,
"type":"mute"
},
{
"id":60,
"lat":46.1321002,
"lng":3.4537801,
"accuracy":9.958000183105469,
"speed":1.24850594997406,
"timestamp":1591108701665,
"instruction":null,
"type":"mute"
},
{
"id":61,
"lat":46.1320635,
"lng":3.4538178,
"accuracy":9.458000183105469,
"speed":1.20669686794281,
"timestamp":1591108706031,
"instruction":null,
"type":"mute"
},
{
"id":62,
"lat":46.1320639,
"lng":3.4538496,
"accuracy":8.543999671936035,
"speed":0.9587454199790955,
"timestamp":1591108707169,
"instruction":null,
"type":"mute"
},
{
"id":63,
"lat":46.1320751,
"lng":3.4538358,
"accuracy":8.35099983215332,
"speed":1.1290394067764282,
"timestamp":1591108708000,
"instruction":null,
"type":"mute"
},
{
"id":64,
"lat":46.1320749,
"lng":3.4538493,
"accuracy":8.434000015258789,
"speed":1.0767571926116943,
"timestamp":1591108709000,
"instruction":null,
"type":"mute"
},
{
"id":65,
"lat":46.1320727,
"lng":3.4538652,
"accuracy":8.49899959564209,
"speed":1.1649261713027954,
"timestamp":1591108710000,
"instruction":null,
"type":"mute"
},
{
"id":66,
"lat":46.132065,
"lng":3.4538861,
"accuracy":8.979999542236328,
"speed":1.172893762588501,
"timestamp":1591108711620,
"instruction":null,
"type":"mute"
},
{
"id":67,
"lat":46.1320536,
"lng":3.4539031,
"accuracy":9.130999565124512,
"speed":1.167229413986206,
"timestamp":1591108713082,
"instruction":null,
"type":"mute"
},
{
"id":68,
"lat":46.1320392,
"lng":3.45392,
"accuracy":9.49899959564209,
"speed":1.1487566232681274,
"timestamp":1591108714000,
"instruction":null,
"type":"mute"
},
{
"id":69,
"lat":46.1320291,
"lng":3.45394,
"accuracy":9.880000114440918,
"speed":1.1425069570541382,
"timestamp":1591108715703,
"instruction":null,
"type":"mute"
},
{
"id":70,
"lat":46.1320296,
"lng":3.45396,
"accuracy":10.168000221252441,
"speed":1.1978874206542969,
"timestamp":1591108717165,
"instruction":null,
"type":"mute"
},
{
"id":71,
"lat":46.1320302,
"lng":3.453974,
"accuracy":10.654999732971191,
"speed":1.2209663391113281,
"timestamp":1591108718255,
"instruction":null,
"type":"mute"
},
{
"id":72,
"lat":46.1320318,
"lng":3.4539889,
"accuracy":11.04699993133545,
"speed":1.2559868097305298,
"timestamp":1591108719302,
"instruction":null,
"type":"mute"
},
{
"id":73,
"lat":46.1320345,
"lng":3.4540102,
"accuracy":11.279000282287598,
"speed":1.3163591623306274,
"timestamp":1591108720000,
"instruction":null,
"type":"mute"
},
{
"id":74,
"lat":46.1320426,
"lng":3.4540418,
"accuracy":11.39799976348877,
"speed":1.3626245260238647,
"timestamp":1591108721799,
"instruction":null,
"type":"mute"
},
{
"id":75,
"lat":46.1320501,
"lng":3.4540621,
"accuracy":11.395000457763672,
"speed":1.374927282333374,
"timestamp":1591108722801,
"instruction":null,
"type":"mute"
},
{
"id":76,
"lat":46.1320584,
"lng":3.454083,
"accuracy":11.180999755859375,
"speed":1.3829365968704224,
"timestamp":1591108723824,
"instruction":null,
"type":"mute"
},
{
"id":77,
"lat":46.1320751,
"lng":3.4541141,
"accuracy":11.03499984741211,
"speed":1.3862296342849731,
"timestamp":1591108725000,
"instruction":null,
"type":"mute"
},
{
"id":78,
"lat":46.1320854,
"lng":3.4541303,
"accuracy":10.802000045776367,
"speed":1.383939504623413,
"timestamp":1591108726000,
"instruction":null,
"type":"mute"
},
{
"id":79,
"lat":46.1321008,
"lng":3.4541568,
"accuracy":10.581999778747559,
"speed":1.3891651630401611,
"timestamp":1591108727874,
"instruction":null,
"type":"mute"
},
{
"id":80,
"lat":46.1321115,
"lng":3.4541747,
"accuracy":10.487000465393066,
"speed":1.3949943780899048,
"timestamp":1591108728878,
"instruction":null,
"type":"mute"
},
{
"id":81,
"lat":46.1321249,
"lng":3.4541997,
"accuracy":10.42300033569336,
"speed":1.3969658613204956,
"timestamp":1591108730000,
"instruction":null,
"type":"mute"
},
{
"id":82,
"lat":46.1321373,
"lng":3.4542207,
"accuracy":10.428999900817871,
"speed":1.3919978141784668,
"timestamp":1591108731499,
"instruction":null,
"type":"mute"
},
{
"id":83,
"lat":46.1321481,
"lng":3.4542378,
"accuracy":10.279000282287598,
"speed":1.3835800886154175,
"timestamp":1591108732519,
"instruction":null,
"type":"mute"
},
{
"id":84,
"lat":46.1321617,
"lng":3.4542587,
"accuracy":10.163000106811523,
"speed":1.3699164390563965,
"timestamp":1591108733901,
"instruction":null,
"type":"mute"
},
{
"id":85,
"lat":46.1321709,
"lng":3.4542725,
"accuracy":10.079999923706055,
"speed":1.3604204654693604,
"timestamp":1591108734980,
"instruction":null,
"type":"mute"
},
{
"id":86,
"lat":46.1321836,
"lng":3.4542901,
"accuracy":10.024999618530273,
"speed":1.3303091526031494,
"timestamp":1591108736000,
"instruction":null,
"type":"mute"
},
{
"id":87,
"lat":46.1321954,
"lng":3.4542981,
"accuracy":10.04699993133545,
"speed":1.173783302307129,
"timestamp":1591108737756,
"instruction":null,
"type":"mute"
},
{
"id":88,
"lat":46.1322101,
"lng":3.4542916,
"accuracy":9.92199993133545,
"speed":1.00309419631958,
"timestamp":1591108739173,
"instruction":null,
"type":"mute"
},
{
"id":89,
"lat":46.1322192,
"lng":3.4542806,
"accuracy":9.805000305175781,
"speed":0.9518589973449707,
"timestamp":1591108740294,
"instruction":null,
"type":"mute"
},
{
"id":90,
"lat":46.1322261,
"lng":3.454264,
"accuracy":9.597000122070312,
"speed":0.9286876916885376,
"timestamp":1591108741000,
"instruction":null,
"type":"mute"
},
{
"id":91,
"lat":46.1322358,
"lng":3.4542432,
"accuracy":9.333999633789062,
"speed":0.9361223578453064,
"timestamp":1591108742637,
"instruction":null,
"type":"mute"
},
{
"id":92,
"lat":46.1322436,
"lng":3.4542263,
"accuracy":9.12399959564209,
"speed":0.9543770551681519,
"timestamp":1591108743679,
"instruction":null,
"type":"mute"
},
{
"id":93,
"lat":46.1322542,
"lng":3.4542075,
"accuracy":9.00100040435791,
"speed":0.9899656176567078,
"timestamp":1591108745083,
"instruction":null,
"type":"mute"
},
{
"id":94,
"lat":46.1322639,
"lng":3.4541902,
"accuracy":8.968999862670898,
"speed":1.0339843034744263,
"timestamp":1591108746153,
"instruction":null,
"type":"mute"
},
{
"id":95,
"lat":46.1322768,
"lng":3.4541708,
"accuracy":8.894000053405762,
"speed":1.0847324132919312,
"timestamp":1591108747000,
"instruction":null,
"type":"mute"
},
{
"id":96,
"lat":46.1322994,
"lng":3.454137,
"accuracy":8.899999618530273,
"speed":1.1147069931030273,
"timestamp":1591108749114,
"instruction":null,
"type":"mute"
},
{
"id":97,
"lat":46.132303,
"lng":3.4541277,
"accuracy":8.85099983215332,
"speed":1.1287177801132202,
"timestamp":1591108750151,
"instruction":null,
"type":"mute"
},
{
"id":98,
"lat":46.1323089,
"lng":3.4541165,
"accuracy":8.84000015258789,
"speed":1.1397417783737183,
"timestamp":1591108751163,
"instruction":null,
"type":"mute"
},
{
"id":99,
"lat":46.1323158,
"lng":3.4541028,
"accuracy":8.888999938964844,
"speed":1.1529812812805176,
"timestamp":1591108752000,
"instruction":null,
"type":"mute"
},
{
"id":100,
"lat":46.1323259,
"lng":3.4540847,
"accuracy":8.866999626159668,
"speed":1.180586576461792,
"timestamp":1591108753596,
"instruction":null,
"type":"mute"
},
{
"id":101,
"lat":46.1323438,
"lng":3.4540586,
"accuracy":9.050999641418457,
"speed":1.2229795455932617,
"timestamp":1591108755098,
"instruction":null,
"type":"mute"
},
{
"id":102,
"lat":46.1323576,
"lng":3.4540407,
"accuracy":9.211000442504883,
"speed":1.2557201385498047,
"timestamp":1591108756000,
"instruction":null,
"type":"mute"
},
{
"id":103,
"lat":46.132377,
"lng":3.4540196,
"accuracy":9.305000305175781,
"speed":1.2907239198684692,
"timestamp":1591108758039,
"instruction":null,
"type":"mute"
},
{
"id":104,
"lat":46.1323933,
"lng":3.454004,
"accuracy":9.378999710083008,
"speed":1.3154009580612183,
"timestamp":1591108759040,
"instruction":null,
"type":"mute"
},
{
"id":105,
"lat":46.13241,
"lng":3.4539883,
"accuracy":9.343999862670898,
"speed":1.3226760625839233,
"timestamp":1591108760000,
"instruction":null,
"type":"mute"
},
{
"id":106,
"lat":46.1324278,
"lng":3.4539692,
"accuracy":9.27400016784668,
"speed":1.320130467414856,
"timestamp":1591108762042,
"instruction":null,
"type":"mute"
},
{
"id":107,
"lat":46.132438,
"lng":3.4539574,
"accuracy":9.267000198364258,
"speed":1.3144667148590088,
"timestamp":1591108763064,
"instruction":null,
"type":"mute"
},
{
"id":108,
"lat":46.1324479,
"lng":3.4539463,
"accuracy":9.279000282287598,
"speed":1.3108240365982056,
"timestamp":1591108764136,
"instruction":null,
"type":"mute"
},
{
"id":109,
"lat":46.132458,
"lng":3.4539349,
"accuracy":9.348999977111816,
"speed":1.3128241300582886,
"timestamp":1591108765166,
"instruction":null,
"type":"mute"
},
{
"id":110,
"lat":46.1324765,
"lng":3.4539141,
"accuracy":9.456000328063965,
"speed":1.31324303150177,
"timestamp":1591108767138,
"instruction":null,
"type":"mute"
},
{
"id":111,
"lat":46.1324856,
"lng":3.4539033,
"accuracy":9.592000007629395,
"speed":1.3141392469406128,
"timestamp":1591108768237,
"instruction":null,
"type":"mute"
},
{
"id":112,
"lat":46.1325061,
"lng":3.4538887,
"accuracy":9.805999755859375,
"speed":1.3220828771591187,
"timestamp":1591108769738,
"instruction":null,
"type":"mute"
},
{
"id":113,
"lat":46.1325255,
"lng":3.4538747,
"accuracy":9.980999946594238,
"speed":1.3268816471099854,
"timestamp":1591108771310,
"instruction":null,
"type":"mute"
},
{
"id":114,
"lat":46.132548,
"lng":3.4538552,
"accuracy":10.333999633789062,
"speed":1.337458610534668,
"timestamp":1591108772858,
"instruction":null,
"type":"mute"
},
{
"id":115,
"lat":46.1325655,
"lng":3.4538388,
"accuracy":10.730999946594238,
"speed":1.3427220582962036,
"timestamp":1591108774337,
"instruction":null,
"type":"mute"
},
{
"id":116,
"lat":46.1325788,
"lng":3.4538212,
"accuracy":10.944000244140625,
"speed":1.3440743684768677,
"timestamp":1591108775000,
"instruction":null,
"type":"mute"
},
{
"id":117,
"lat":46.1325957,
"lng":3.4537983,
"accuracy":10.937999725341797,
"speed":1.338106393814087,
"timestamp":1591108776941,
"instruction":null,
"type":"mute"
},
{
"id":118,
"lat":46.132612,
"lng":3.4537758,
"accuracy":10.651000022888184,
"speed":1.329689383506775,
"timestamp":1591108778000,
"instruction":null,
"type":"mute"
},
{
"id":119,
"lat":46.1326226,
"lng":3.4537614,
"accuracy":10.394000053405762,
"speed":1.319697618484497,
"timestamp":1591108779000,
"instruction":null,
"type":"mute"
},
{
"id":120,
"lat":46.1326324,
"lng":3.4537451,
"accuracy":9.98799991607666,
"speed":1.3051365613937378,
"timestamp":1591108780502,
"instruction":null,
"type":"mute"
},
{
"id":121,
"lat":46.1326448,
"lng":3.4537261,
"accuracy":9.788999557495117,
"speed":1.2919527292251587,
"timestamp":1591108782044,
"instruction":null,
"type":"mute"
},
{
"id":122,
"lat":46.1326541,
"lng":3.4537104,
"accuracy":9.644000053405762,
"speed":1.2814151048660278,
"timestamp":1591108783000,
"instruction":null,
"type":"mute"
},
{
"id":123,
"lat":46.1326592,
"lng":3.4536997,
"accuracy":9.621999740600586,
"speed":1.2715847492218018,
"timestamp":1591108784000,
"instruction":null,
"type":"mute"
},
{
"id":124,
"lat":46.1326668,
"lng":3.4536866,
"accuracy":9.666000366210938,
"speed":1.2704280614852905,
"timestamp":1591108785621,
"instruction":null,
"type":"mute"
},
{
"id":125,
"lat":46.1326752,
"lng":3.4536759,
"accuracy":9.5600004196167,
"speed":1.2678818702697754,
"timestamp":1591108786678,
"instruction":null,
"type":"mute"
},
{
"id":126,
"lat":46.1326837,
"lng":3.4536664,
"accuracy":9.480999946594238,
"speed":1.2555938959121704,
"timestamp":1591108787721,
"instruction":null,
"type":"mute"
},
{
"id":127,
"lat":46.1326942,
"lng":3.4536609,
"accuracy":9.409000396728516,
"speed":1.2461040019989014,
"timestamp":1591108788804,
"instruction":null,
"type":"mute"
},
{
"id":128,
"lat":46.1327116,
"lng":3.4536589,
"accuracy":9.154999732971191,
"speed":1.2647135257720947,
"timestamp":1591108790220,
"instruction":null,
"type":"mute"
},
{
"id":129,
"lat":46.1327251,
"lng":3.4536565,
"accuracy":9.065999984741211,
"speed":1.282801628112793,
"timestamp":1591108791263,
"instruction":null,
"type":"mute"
},
{
"id":130,
"lat":46.1327392,
"lng":3.4536559,
"accuracy":8.942000389099121,
"speed":1.2941324710845947,
"timestamp":1591108792000,
"instruction":null,
"type":"mute"
},
{
"id":131,
"lat":46.1327533,
"lng":3.4536624,
"accuracy":8.82800006866455,
"speed":1.2992395162582397,
"timestamp":1591108793835,
"instruction":null,
"type":"mute"
},
{
"id":132,
"lat":46.1327713,
"lng":3.4536721,
"accuracy":8.87600040435791,
"speed":1.3252776861190796,
"timestamp":1591108795000,
"instruction":null,
"type":"mute"
},
{
"id":133,
"lat":46.1327847,
"lng":3.4536817,
"accuracy":8.894000053405762,
"speed":1.3486955165863037,
"timestamp":1591108796000,
"instruction":null,
"type":"mute"
},
{
"id":134,
"lat":46.1328023,
"lng":3.4536939,
"accuracy":8.979999542236328,
"speed":1.381088137626648,
"timestamp":1591108797883,
"instruction":null,
"type":"mute"
},
{
"id":135,
"lat":46.1328144,
"lng":3.4537117,
"accuracy":9.071999549865723,
"speed":1.3896369934082031,
"timestamp":1591108799000,
"instruction":null,
"type":"mute"
},
{
"id":136,
"lat":46.1328255,
"lng":3.4537279,
"accuracy":8.982999801635742,
"speed":1.3871030807495117,
"timestamp":1591108800913,
"instruction":null,
"type":"mute"
},
{
"id":137,
"lat":46.1328373,
"lng":3.4537379,
"accuracy":8.960000038146973,
"speed":1.3873021602630615,
"timestamp":1591108801937,
"instruction":null,
"type":"mute"
},
{
"id":138,
"lat":46.1328489,
"lng":3.4537464,
"accuracy":8.967000007629395,
"speed":1.3862745761871338,
"timestamp":1591108802939,
"instruction":null,
"type":"mute"
},
{
"id":139,
"lat":46.1328592,
"lng":3.4537512,
"accuracy":8.904000282287598,
"speed":1.3795610666275024,
"timestamp":1591108803941,
"instruction":null,
"type":"mute"
},
{
"id":140,
"lat":46.1328695,
"lng":3.4537541,
"accuracy":9.041000366210938,
"speed":1.3664902448654175,
"timestamp":1591108805025,
"instruction":null,
"type":"mute"
},
{
"id":141,
"lat":46.1328876,
"lng":3.4537577,
"accuracy":8.961999893188477,
"speed":1.3497716188430786,
"timestamp":1591108806525,
"instruction":null,
"type":"mute"
},
{
"id":142,
"lat":46.132906,
"lng":3.4537653,
"accuracy":8.9350004196167,
"speed":1.3447327613830566,
"timestamp":1591108807981,
"instruction":null,
"type":"mute"
},
{
"id":143,
"lat":46.1329159,
"lng":3.4537749,
"accuracy":8.980999946594238,
"speed":1.3402817249298096,
"timestamp":1591108808986,
"instruction":null,
"type":"mute"
},
{
"id":144,
"lat":46.132925,
"lng":3.4537877,
"accuracy":8.98900032043457,
"speed":1.3321208953857422,
"timestamp":1591108810157,
"instruction":null,
"type":"mute"
},
{
"id":145,
"lat":46.1329383,
"lng":3.453802,
"accuracy":9.12600040435791,
"speed":1.3252577781677246,
"timestamp":1591108811000,
"instruction":null,
"type":"mute"
},
{
"id":146,
"lat":46.1329528,
"lng":3.4538138,
"accuracy":9.135000228881836,
"speed":1.3177207708358765,
"timestamp":1591108812516,
"instruction":null,
"type":"mute"
},
{
"id":147,
"lat":46.1329714,
"lng":3.4538289,
"accuracy":9.170999526977539,
"speed":1.3087732791900635,
"timestamp":1591108814020,
"instruction":null,
"type":"mute"
},
{
"id":148,
"lat":46.1329905,
"lng":3.4538437,
"accuracy":9.298999786376953,
"speed":1.3049092292785645,
"timestamp":1591108815000,
"instruction":null,
"type":"mute"
},
{
"id":149,
"lat":46.133005,
"lng":3.453854,
"accuracy":9.416999816894531,
"speed":1.2989150285720825,
"timestamp":1591108816000,
"instruction":null,
"type":"mute"
},
{
"id":150,
"lat":46.1330221,
"lng":3.4538631,
"accuracy":9.53499984741211,
"speed":1.2619118690490723,
"timestamp":1591108817594,
"instruction":null,
"type":"mute"
},
{
"id":151,
"lat":46.1330363,
"lng":3.4538654,
"accuracy":9.550000190734863,
"speed":1.2041046619415283,
"timestamp":1591108818634,
"instruction":null,
"type":"mute"
},
{
"id":152,
"lat":46.1330524,
"lng":3.4538609,
"accuracy":9.454999923706055,
"speed":1.162434697151184,
"timestamp":1591108819715,
"instruction":null,
"type":"mute"
},
{
"id":153,
"lat":46.1330644,
"lng":3.4538483,
"accuracy":9.303000450134277,
"speed":1.1135625839233398,
"timestamp":1591108820758,
"instruction":null,
"type":"mute"
},
{
"id":154,
"lat":46.1330805,
"lng":3.4538268,
"accuracy":9.116000175476074,
"speed":1.1147613525390625,
"timestamp":1591108822283,
"instruction":null,
"type":"mute"
},
{
"id":155,
"lat":46.1330946,
"lng":3.4538002,
"accuracy":8.859000205993652,
"speed":1.1383916139602661,
"timestamp":1591108823640,
"instruction":null,
"type":"mute"
},
{
"id":156,
"lat":46.1331071,
"lng":3.4537794,
"accuracy":8.722000122070312,
"speed":1.1528863906860352,
"timestamp":1591108824721,
"instruction":null,
"type":"mute"
},
{
"id":157,
"lat":46.1331176,
"lng":3.4537585,
"accuracy":8.697999954223633,
"speed":1.1658793687820435,
"timestamp":1591108825843,
"instruction":null,
"type":"mute"
},
{
"id":158,
"lat":46.1331304,
"lng":3.4537334,
"accuracy":8.6850004196167,
"speed":1.1787012815475464,
"timestamp":1591108827337,
"instruction":null,
"type":"mute"
},
{
"id":159,
"lat":46.1331359,
"lng":3.4537198,
"accuracy":8.746999740600586,
"speed":1.1804065704345703,
"timestamp":1591108828000,
"instruction":null,
"type":"mute"
},
{
"id":160,
"lat":46.1331398,
"lng":3.4537013,
"accuracy":8.82699966430664,
"speed":1.1704826354980469,
"timestamp":1591108829895,
"instruction":null,
"type":"mute"
},
{
"id":161,
"lat":46.1331488,
"lng":3.4536857,
"accuracy":8.906999588012695,
"speed":1.1518480777740479,
"timestamp":1591108831000,
"instruction":null,
"type":"mute"
},
{
"id":162,
"lat":46.1331572,
"lng":3.4536656,
"accuracy":9.154999732971191,
"speed":1.075279951095581,
"timestamp":1591108832919,
"instruction":null,
"type":"mute"
},
{
"id":163,
"lat":46.133161,
"lng":3.4536456,
"accuracy":9.255999565124512,
"speed":1.0422956943511963,
"timestamp":1591108833938,
"instruction":null,
"type":"mute"
},
{
"id":164,
"lat":46.1331685,
"lng":3.4536268,
"accuracy":9.425999641418457,
"speed":1.045964241027832,
"timestamp":1591108835000,
"instruction":null,
"type":"mute"
},
{
"id":165,
"lat":46.133171,
"lng":3.453611,
"accuracy":9.446000099182129,
"speed":1.053769588470459,
"timestamp":1591108836000,
"instruction":null,
"type":"mute"
},
{
"id":166,
"lat":46.1331755,
"lng":3.4535835,
"accuracy":9.402000427246094,
"speed":1.0612647533416748,
"timestamp":1591108838034,
"instruction":null,
"type":"mute"
},
{
"id":167,
"lat":46.1331794,
"lng":3.4535647,
"accuracy":9.336000442504883,
"speed":1.0687099695205688,
"timestamp":1591108839055,
"instruction":null,
"type":"mute"
},
{
"id":168,
"lat":46.1331848,
"lng":3.453541,
"accuracy":9.342000007629395,
"speed":1.077978491783142,
"timestamp":1591108840000,
"instruction":null,
"type":"mute"
},
{
"id":169,
"lat":46.1331915,
"lng":3.4535104,
"accuracy":9.444000244140625,
"speed":1.0909767150878906,
"timestamp":1591108842177,
"instruction":null,
"type":"mute"
},
{
"id":170,
"lat":46.1331938,
"lng":3.4534837,
"accuracy":9.39900016784668,
"speed":1.1062899827957153,
"timestamp":1591108843639,
"instruction":null,
"type":"mute"
},
{
"id":171,
"lat":46.1332002,
"lng":3.4534651,
"accuracy":9.369000434875488,
"speed":1.117362141609192,
"timestamp":1591108844661,
"instruction":null,
"type":"mute"
},
{
"id":172,
"lat":46.1332111,
"lng":3.4534385,
"accuracy":9.51099967956543,
"speed":1.1341015100479126,
"timestamp":1591108846177,
"instruction":null,
"type":"mute"
},
{
"id":173,
"lat":46.1332166,
"lng":3.4534217,
"accuracy":9.664999961853027,
"speed":1.1449978351593018,
"timestamp":1591108847201,
"instruction":null,
"type":"mute"
},
{
"id":174,
"lat":46.1332203,
"lng":3.4534046,
"accuracy":9.91100025177002,
"speed":1.1552050113677979,
"timestamp":1591108848219,
"instruction":null,
"type":"mute"
},
{
"id":175,
"lat":46.1332225,
"lng":3.453388,
"accuracy":10.192000389099121,
"speed":1.1630982160568237,
"timestamp":1591108849242,
"instruction":null,
"type":"mute"
},
{
"id":176,
"lat":46.1332235,
"lng":3.4533707,
"accuracy":10.369000434875488,
"speed":1.1705495119094849,
"timestamp":1591108850280,
"instruction":null,
"type":"mute"
},
{
"id":177,
"lat":46.1332239,
"lng":3.4533498,
"accuracy":10.404000282287598,
"speed":1.183459758758545,
"timestamp":1591108851000,
"instruction":null,
"type":"mute"
},
{
"id":178,
"lat":46.1332254,
"lng":3.4533219,
"accuracy":10.14900016784668,
"speed":1.1911896467208862,
"timestamp":1591108853000,
"instruction":null,
"type":"mute"
},
{
"id":179,
"lat":46.1332341,
"lng":3.4533005,
"accuracy":9.734999656677246,
"speed":1.1943104267120361,
"timestamp":1591108854804,
"instruction":null,
"type":"mute"
},
{
"id":180,
"lat":46.1332405,
"lng":3.4532864,
"accuracy":9.5,
"speed":1.1935200691223145,
"timestamp":1591108855834,
"instruction":null,
"type":"mute"
},
{
"id":181,
"lat":46.1332459,
"lng":3.4532689,
"accuracy":9.388999938964844,
"speed":1.1915509700775146,
"timestamp":1591108856897,
"instruction":null,
"type":"mute"
},
{
"id":182,
"lat":46.1332501,
"lng":3.4532473,
"accuracy":9.472999572753906,
"speed":1.1830154657363892,
"timestamp":1591108858000,
"instruction":null,
"type":"mute"
},
{
"id":183,
"lat":46.1332558,
"lng":3.4532222,
"accuracy":9.925999641418457,
"speed":1.1652547121047974,
"timestamp":1591108859898,
"instruction":null,
"type":"mute"
},
{
"id":184,
"lat":46.1332582,
"lng":3.4532056,
"accuracy":10.178999900817871,
"speed":1.1589245796203613,
"timestamp":1591108860919,
"instruction":null,
"type":"mute"
},
{
"id":185,
"lat":46.1332572,
"lng":3.4531831,
"accuracy":10.236000061035156,
"speed":1.1570582389831543,
"timestamp":1591108862000,
"instruction":null,
"type":"mute"
},
{
"id":186,
"lat":46.1332565,
"lng":3.4531649,
"accuracy":10.244000434875488,
"speed":1.158679723739624,
"timestamp":1591108863439,
"instruction":null,
"type":"mute"
},
{
"id":187,
"lat":46.1332649,
"lng":3.4531437,
"accuracy":10.083999633789062,
"speed":1.1614118814468384,
"timestamp":1591108864963,
"instruction":null,
"type":"mute"
},
{
"id":188,
"lat":46.1332715,
"lng":3.4531265,
"accuracy":10.067999839782715,
"speed":1.1631548404693604,
"timestamp":1591108866045,
"instruction":null,
"type":"mute"
},
{
"id":189,
"lat":46.1332761,
"lng":3.453101,
"accuracy":10.208999633789062,
"speed":1.1568716764450073,
"timestamp":1591108867000,
"instruction":null,
"type":"mute"
},
{
"id":190,
"lat":46.1332766,
"lng":3.4530769,
"accuracy":10.444999694824219,
"speed":1.1618897914886475,
"timestamp":1591108868454,
"instruction":null,
"type":"mute"
},
{
"id":191,
"lat":46.133279,
"lng":3.4530445,
"accuracy":10.663999557495117,
"speed":1.1693594455718994,
"timestamp":1591108870016,
"instruction":null,
"type":"mute"
},
{
"id":192,
"lat":46.1332805,
"lng":3.453025,
"accuracy":10.701000213623047,
"speed":1.1725651025772095,
"timestamp":1591108871038,
"instruction":null,
"type":"mute"
},
{
"id":193,
"lat":46.1332843,
"lng":3.4530063,
"accuracy":10.821000099182129,
"speed":1.1757482290267944,
"timestamp":1591108872064,
"instruction":null,
"type":"mute"
},
{
"id":194,
"lat":46.1332891,
"lng":3.4529879,
"accuracy":10.88700008392334,
"speed":1.17933189868927,
"timestamp":1591108873103,
"instruction":null,
"type":"mute"
},
{
"id":195,
"lat":46.1332972,
"lng":3.4529664,
"accuracy":10.897000312805176,
"speed":1.1841094493865967,
"timestamp":1591108874121,
"instruction":null,
"type":"mute"
},
{
"id":196,
"lat":46.1333075,
"lng":3.4529427,
"accuracy":10.732999801635742,
"speed":1.1913394927978516,
"timestamp":1591108875123,
"instruction":null,
"type":"mute"
},
{
"id":197,
"lat":46.1333158,
"lng":3.4529228,
"accuracy":10.60200023651123,
"speed":1.1897509098052979,
"timestamp":1591108876185,
"instruction":null,
"type":"mute"
},
{
"id":198,
"lat":46.1333246,
"lng":3.4529037,
"accuracy":10.331000328063965,
"speed":1.187252163887024,
"timestamp":1591108877000,
"instruction":null,
"type":"mute"
},
{
"id":199,
"lat":46.1333313,
"lng":3.4528913,
"accuracy":10.039999961853027,
"speed":1.1826897859573364,
"timestamp":1591108878000,
"instruction":null,
"type":"mute"
},
{
"id":200,
"lat":46.1333404,
"lng":3.4528705,
"accuracy":9.770000457763672,
"speed":1.1704245805740356,
"timestamp":1591108879879,
"instruction":null,
"type":"mute"
},
{
"id":201,
"lat":46.1333478,
"lng":3.4528573,
"accuracy":9.63599967956543,
"speed":1.1693332195281982,
"timestamp":1591108880938,
"instruction":null,
"type":"mute"
},
{
"id":202,
"lat":46.133359,
"lng":3.4528385,
"accuracy":9.4399995803833,
"speed":1.1702367067337036,
"timestamp":1591108882000,
"instruction":null,
"type":"mute"
},
{
"id":203,
"lat":46.1333741,
"lng":3.4528172,
"accuracy":9.411999702453613,
"speed":1.1711119413375854,
"timestamp":1591108883770,
"instruction":null,
"type":"mute"
},
{
"id":204,
"lat":46.133392,
"lng":3.4527965,
"accuracy":9.33899974822998,
"speed":1.17317795753479,
"timestamp":1591108884972,
"instruction":null,
"type":"mute"
},
{
"id":205,
"lat":46.1334106,
"lng":3.4527754,
"accuracy":9.331999778747559,
"speed":1.1682895421981812,
"timestamp":1591108886474,
"instruction":null,
"type":"mute"
},
{
"id":206,
"lat":46.1334219,
"lng":3.4527536,
"accuracy":9.36299991607666,
"speed":1.1476631164550781,
"timestamp":1591108888038,
"instruction":null,
"type":"mute"
},
{
"id":207,
"lat":46.1334253,
"lng":3.4527331,
"accuracy":9.383000373840332,
"speed":1.0494383573532104,
"timestamp":1591108889000,
"instruction":null,
"type":"mute"
},
{
"id":208,
"lat":46.1334165,
"lng":3.452712,
"accuracy":9.335000038146973,
"speed":0.922479510307312,
"timestamp":1591108891000,
"instruction":null,
"type":"mute"
},
{
"id":209,
"lat":46.133412,
"lng":3.4527052,
"accuracy":9.220000267028809,
"speed":0.5069987177848816,
"timestamp":1591108892000,
"instruction":null,
"type":"mute"
},
{
"id":210,
"lat":46.1334071,
"lng":3.4527078,
"accuracy":8.876999855041504,
"speed":0.4547208845615387,
"timestamp":1591108894000,
"instruction":null,
"type":"mute"
},
{
"id":211,
"lat":46.1334084,
"lng":3.4527181,
"accuracy":8.196999549865723,
"speed":0.025635570287704468,
"timestamp":1591108896000,
"instruction":null,
"type":"mute"
},
{
"id":212,
"lat":46.1334092,
"lng":3.4527135,
"accuracy":8.406999588012695,
"speed":0.16817519068717957,
"timestamp":1591108897000,
"scrollIndex":2,
"instruction":"end",
"type":"end"
}
]
const ROUTE_DIRECTIONS = {
LEFT: 'Tourner à gauche',
RIGHT: 'Tourner à droite',
STRAIGHT: 'Continuer tout droit',
LINES: 'Les lignes',
START: 'Point de départ',
END: 'Point d\'arrivée'
};
class BugReportExample extends React.Component {
// initial local state
state = {
isReadyMapData: false,
startPosition: null,
endPosition: null,
wayPoints: null,
pinPoints: null
}
componentDidMount() {
this.configureMapboxGL();
this.configureMapForRoute();
}
configureMapboxGL = () => {
// MapboxGL.setAccessToken(MAPBOX_GL_ACCESS_TOKEN);
MapboxGL.setTelemetryEnabled(false);
}
configureMapForRoute = () => {
const startPoint = ROUTE_POINTS[0];
const endPoint = ROUTE_POINTS[ROUTE_POINTS.length - 1];
this.setState({
startPosition: [startPoint.lng, startPoint.lat],
endPosition: [endPoint.lng, endPoint.lat],
wayPoints: makeLineString(this._getLineString()), // makeLineString() function is provided by turf.js
pinPoints: this._getPinPoints(startPoint, endPoint),
isReadyMapData: true
});
}
_getLineString = () => {
let lineString = [];
ROUTE_POINTS.forEach(point => {
let {lat, lng} = point;
lineString.push([lng, lat]);
});
return lineString;
}
_getPinPoints = (startPoint, endPoint) => {
let pinpoints = [];
// create marker for the first journey point
if (startPoint) {
const {lat, lng} = startPoint;
pinpoints.push({
lat,
lng,
type: 'start',
color: '#7CFF71',
instruction: 'Départ',
});
}
// create marker for the last journey point
if (endPoint) {
const {lat, lng} = endPoint;
pinpoints.push({
lat,
lng,
type: 'end',
color: '#F66A6A',
instruction: 'Arrivée',
});
}
// this journey contains a list of different points with instructions
const instructions = ROUTE_POINTS.filter(point => point.type !== 'mute');
if (instructions.length) {
instructions.forEach((instruction) => {
if (instruction) {
// create marker for each instruction points found
pinpoints.push({
...instruction,
color: instruction.type === 'poi' ? '#FCFF4D' : '#FFFFFF'
});
}
});
}
return pinpoints;
}
_renderRouteLine = () => {
const {wayPoints} = this.state;
if (!wayPoints) return null;
return (
<MapboxGL.ShapeSource id='routeSource' shape={wayPoints}>
<MapboxGL.LineLayer
id='routeFill'
style={layerStyles.routeLine}
belowLayerID='originInnerCircle'
/>
</MapboxGL.ShapeSource>
);
};
// print pinpoints along the route line
// THE BUG SEEMS TO COME FROM THIS FUNCTION !!!!
_renderPinPoints = () => {
const {pinPoints} = this.state;
if (!pinPoints) return null;
return pinPoints.map((pinPoint, index) => {
if (pinPoint) {
let {instruction, lat, lng, color} = pinPoint;
let text = ROUTE_DIRECTIONS[instruction.toUpperCase()] || instruction;
return (
<MapboxGL.PointAnnotation
key={`coordinate_${index}_${Date.now()}`}
id={`coordinate_${index}`}
anchor={{ y: 1, x: 0.5 }}
pointerEvents='none'
coordinate={[lng, lat]}
title={text}
>
{/* print marker as SVG by using react-native-svg librarie */}
<View style={{width: 10, height:10, backgroundColor:'red'}} />
<MapboxGL.Callout title={text} />
</MapboxGL.PointAnnotation>
);
}
return null;
});
};
_renderOrigin = () => {
const {startPosition} = this.state;
if (!startPosition) return null;
// print this shape by using point() function which is provided by turf.js
return (
<MapboxGL.ShapeSource id='origin' shape={point(startPosition)}>
<MapboxGL.SymbolLayer id='originInnerCircle' minZoomLevel={1} />
</MapboxGL.ShapeSource>
);
};
_renderDestination = () => {
const {endPosition} = this.state;
if (!endPosition) return null;
// print this shape by using point() function which is provided by turf.js
return (
<MapboxGL.ShapeSource id='destination' shape={point(endPosition)}>
<MapboxGL.SymbolLayer id='destinationInnerCircle' minZoomLevel={1} />
</MapboxGL.ShapeSource>
);
};
render() {
const {isReadyMapData, startPosition} = this.state;
return (
<SafeAreaView style={styles.container}>
<View style={styles.mapWrapper}>
{isReadyMapData && (
<MapboxGL.MapView
style={styles.map}
styleURL={MapboxGL.StyleURL.Street}
compassEnabled={true}
compassViewPosition={1}>
{startPosition && (
<MapboxGL.Camera
zoomLevel={18}
centerCoordinate={startPosition}
heading={21}
/>
)}
<MapboxGL.UserLocation
showsUserHeadingIndicator={true}
visible={true}
/>
{this._renderOrigin()}
{this._renderRouteLine()}
{this._renderDestination()}
{this._renderPinPoints()}
</MapboxGL.MapView>
)}
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapWrapper: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Platform.OS === 'ios' ? 64 : 54,
backgroundColor: 'transparent',
},
map: {
...StyleSheet.absoluteFill,
},
});
const layerStyles = {
routeLine: {
lineColor: '#000',
lineCap: MapboxGL.LineJoin.Round,
lineWidth: 3,
lineOpacity: 0.84,
},
};
export default BugReportExample;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment