1 00:00:01,170 --> 00:00:02,590 Now we can show a map. 2 00:00:02,650 --> 00:00:07,800 Let's figure out how we can actually draw a line of sorts on this map that has some actual meaning. 3 00:00:07,810 --> 00:00:11,810 So from the React Native maps library I'm going to add in a second import here. 4 00:00:11,920 --> 00:00:14,720 It's going to add in a comma a set of curly braces. 5 00:00:14,800 --> 00:00:21,780 We're going to pull in something called a poly line this polish line is a react component that we can 6 00:00:21,780 --> 00:00:23,670 show inside of our map view. 7 00:00:23,820 --> 00:00:29,980 If we show a polish line component inside of a map we will see a line drawn on the actual map itself. 8 00:00:30,030 --> 00:00:36,950 So going to find my map view I'm going to turn it from a self closing element into a expanded element. 9 00:00:36,960 --> 00:00:43,110 So going to say slash map view inside of a closing tag like so and it'll pass in to the map view tag 10 00:00:43,110 --> 00:00:48,170 itself a poverty line when we show a poly line component we have to pass in. 11 00:00:48,170 --> 00:00:50,850 In addition some number of coordinates. 12 00:00:51,020 --> 00:00:56,120 That's essentially going to be a series of points in the actual world that indicate a line that we want 13 00:00:56,120 --> 00:00:57,630 to draw on here. 14 00:00:57,680 --> 00:01:02,840 So it's going to be an array of objects where every object is going to have a latitude property and 15 00:01:02,840 --> 00:01:07,820 a longitude property the polish line will then take that array of objects and reflect it as an actual 16 00:01:07,820 --> 00:01:09,130 line. 17 00:01:09,140 --> 00:01:14,000 So right now we don't have any real data but we can try to just make some kind of like fake array of 18 00:01:14,000 --> 00:01:16,580 points to show inside of our poly line. 19 00:01:16,730 --> 00:01:21,260 So to do something to put a little bit of temporary code right above my return statement I'm going to 20 00:01:21,260 --> 00:01:23,110 say let points. 21 00:01:23,150 --> 00:01:27,310 It's gonna be an empty array and then going to set up a very simple for loop. 22 00:01:27,310 --> 00:01:39,960 So I'll say for let I equals zero I less than about 20 I plus plus and then inside of here we'll do 23 00:01:40,020 --> 00:01:40,790 points. 24 00:01:40,800 --> 00:01:47,260 Dot push I'm going to pass in an object and this object is going to have an imaginary point that we're 25 00:01:47,260 --> 00:01:53,820 going to try to draw on the map so I'm going to give it a latitude and we'll use the same starting latitude 26 00:01:53,820 --> 00:01:54,870 we have down right there. 27 00:01:54,870 --> 00:02:02,160 So I do it 37 3 3 2 3 3 and we're just going to add in some little increment for every iteration through 28 00:02:02,160 --> 00:02:02,950 our for loop. 29 00:02:03,210 --> 00:02:10,340 So I'll do that amount plus I times zero point zero zero one. 30 00:02:10,350 --> 00:02:13,980 We'll try that out to get get started and I'll do a longitude as well. 31 00:02:14,040 --> 00:02:18,720 So my initial longitude will be negative 122 0 3 1 2 1. 32 00:02:18,720 --> 00:02:25,860 So same thing we have down here plus I time zero point zero zero one OK. 33 00:02:25,910 --> 00:02:30,470 That's gonna give us our array of points with some number of points inside there. 34 00:02:30,470 --> 00:02:36,030 So this really should just be a very simple straight line so now we can pass that array of coordinates 35 00:02:36,030 --> 00:02:41,890 or points into our poly line under a prop called coordinates into coordinates. 36 00:02:41,900 --> 00:02:44,760 Going to pass in that array that we just generated. 37 00:02:44,760 --> 00:02:47,670 So for coordinates I'll pass in points. 38 00:02:47,710 --> 00:02:49,250 Let's now try to save this. 39 00:02:49,510 --> 00:02:54,280 Go back over to our map and we can see our line is created okay. 40 00:02:54,280 --> 00:02:55,750 So that definitely works. 41 00:02:55,750 --> 00:03:01,530 Now of course we just added on zero point zero zero one more or less to every single point. 42 00:03:01,540 --> 00:03:05,850 So we end up with a perfectly straight line as what you see right here. 43 00:03:06,010 --> 00:03:10,960 If we wanted to we could easily add in a little bit of variation to this thing so we could say something 44 00:03:10,960 --> 00:03:18,170 like If I modulo two is equal to zero. 45 00:03:18,270 --> 00:03:26,700 In other words if I is an equal even number let's put in that value else let's push in a slightly different 46 00:03:26,700 --> 00:03:27,000 value. 47 00:03:27,000 --> 00:03:31,620 So how about in this case we subtract a latitude of that amount. 48 00:03:31,860 --> 00:03:36,240 And in addition rather than just doing 0 0 1 let's say you like 0 0 2. 49 00:03:36,240 --> 00:03:38,710 So we'll give us more of like a jagged line. 50 00:03:38,930 --> 00:03:41,200 It's all save that's we'll go back over and try to create. 51 00:03:41,280 --> 00:03:45,110 And now we can really see a very interesting path gets drawn out. 52 00:03:45,180 --> 00:03:52,050 So we initially subtract 0 0 2 then we go up and then down up down up down and so on. 53 00:03:52,090 --> 00:03:57,390 So as you can see we can very easily draw a series of points as a line on our map. 54 00:03:57,390 --> 00:04:02,480 So this is essentially how we're going to end up with our real application over here so obviously drawing 55 00:04:02,480 --> 00:04:04,420 a line really not the worst thing in the world. 56 00:04:04,430 --> 00:04:11,390 All we have to do is provide a series of latitude and longitude points to this polish line component. 57 00:04:12,050 --> 00:04:15,620 So the real challenge behind our application is not the map stuff. 58 00:04:15,710 --> 00:04:19,850 It's actually really going to be how we record the user's location. 59 00:04:19,850 --> 00:04:20,100 All right. 60 00:04:20,100 --> 00:04:23,620 So now we've got a reasonable idea of how to work with our map component. 61 00:04:23,630 --> 00:04:24,720 Let's take a pause right here. 62 00:04:24,740 --> 00:04:28,730 When we come back the next video we're going to start to discuss how we can track the user's location 63 00:04:29,050 --> 00:04:34,010 somehow record it and how we're going to distribute that information inside of our track create screen 64 00:04:34,610 --> 00:04:36,800 so quick pause and I'll see you in just a minute.