1 00:00:00,450 --> 00:00:06,300 So it's time for us to make sure that when the users click each one of these quakes they were taken 2 00:00:06,300 --> 00:00:07,320 to a detailed page. 3 00:00:07,680 --> 00:00:09,170 While we should know how to do by now. 4 00:00:09,180 --> 00:00:12,170 So let's go back to our views. 5 00:00:12,180 --> 00:00:13,910 In fact we're going to go to our content view. 6 00:00:13,920 --> 00:00:15,420 This is where everything happens. 7 00:00:16,050 --> 00:00:19,110 So right there give more space there. 8 00:00:19,110 --> 00:00:22,250 So right here where everything is happening we're calling our cell row. 9 00:00:22,800 --> 00:00:26,560 Well what are we gonna do is we're going to include everything. 10 00:00:26,610 --> 00:00:27,990 Actually the whole list. 11 00:00:27,990 --> 00:00:33,630 We're gonna include it inside of a navigation view something navigation view. 12 00:00:33,630 --> 00:00:34,670 There it is. 13 00:00:34,710 --> 00:00:37,770 And I'm going to add it there. 14 00:00:37,810 --> 00:00:38,280 Let's see. 15 00:00:38,280 --> 00:00:39,890 Make sure there we go. 16 00:00:39,900 --> 00:00:44,160 So navigation view is all inside there so I'm going to save and run. 17 00:00:44,160 --> 00:00:49,200 We should see of course that now we have a little gap at the top. 18 00:00:49,200 --> 00:00:50,650 We should have at least said there we go. 19 00:00:50,650 --> 00:00:51,950 There's that gap there. 20 00:00:52,170 --> 00:00:59,370 Next inside of row here we're going to add the actual navigation link which allows us to move to the 21 00:00:59,370 --> 00:01:00,320 next screen. 22 00:01:00,330 --> 00:01:05,850 So navigation link such is going to and right about here. 23 00:01:05,850 --> 00:01:08,520 But I need to pass something I should know by now. 24 00:01:08,550 --> 00:01:12,250 So here going to pass a destination destination. 25 00:01:12,300 --> 00:01:19,140 For now I'm just gonna put a text and I'm going to say data that properties and I'm going to say hello 26 00:01:19,200 --> 00:01:19,740 for now. 27 00:01:19,830 --> 00:01:21,140 OK. 28 00:01:21,140 --> 00:01:27,120 Analysts make sure that we don't have any of that will need to pass any of these either. 29 00:01:27,140 --> 00:01:28,500 Very good. 30 00:01:28,500 --> 00:01:31,200 So I save and give it a run real quick. 31 00:01:31,230 --> 00:01:37,960 Should be able now to see something different here and while you can see we have our click. 32 00:01:37,960 --> 00:01:38,970 There we go back. 33 00:01:38,980 --> 00:01:39,270 Very good. 34 00:01:39,310 --> 00:01:43,500 So we can also add a title for our navigation here. 35 00:01:43,510 --> 00:01:51,700 So right in the enclosing of our navigation link we're going to say dot navigation bar title and it's 36 00:01:51,700 --> 00:01:53,130 going to be just a string. 37 00:01:53,150 --> 00:01:55,440 We'll just call these quakes. 38 00:01:55,480 --> 00:01:56,370 Very good. 39 00:01:56,410 --> 00:01:57,340 Going to run this 40 00:02:00,280 --> 00:02:02,580 case click on this one says hello. 41 00:02:02,590 --> 00:02:07,420 But you can see we have the quakes as a navigation bar title there. 42 00:02:07,420 --> 00:02:13,000 So you know by now that this is actually not the actual end goal here at the end goal is actually have 43 00:02:13,030 --> 00:02:13,830 a quake. 44 00:02:13,900 --> 00:02:14,950 Details page. 45 00:02:14,980 --> 00:02:21,790 So when I say quake details such and I'm gonna be passing data like that. 46 00:02:21,790 --> 00:02:23,070 So we haven't created this. 47 00:02:23,110 --> 00:02:28,270 Of course I'm gonna come down here and create it ourselves. 48 00:02:28,330 --> 00:02:30,150 Let's go back to our view here. 49 00:02:30,160 --> 00:02:34,170 I'm going to create a new file safety UI. 50 00:02:34,510 --> 00:02:38,000 Quick details like this and voila. 51 00:02:38,130 --> 00:02:38,970 So get rid of that. 52 00:02:38,970 --> 00:02:40,400 We don't need that. 53 00:02:40,720 --> 00:02:40,920 OK. 54 00:02:40,930 --> 00:02:41,590 So quakes. 55 00:02:41,590 --> 00:02:44,680 Details here what are we gonna be doing. 56 00:02:44,680 --> 00:02:46,140 Let's close this one down. 57 00:02:46,180 --> 00:02:47,620 First of all we need the data. 58 00:02:47,620 --> 00:02:53,840 Some would say var data is going to be features because we need to get to the information we want. 59 00:02:53,860 --> 00:02:58,030 So here inside for now what I'm going to do I'm just gonna go ahead and pass a text. 60 00:02:58,030 --> 00:03:02,510 So let's start with a V stack because that's what's required really. 61 00:03:02,710 --> 00:03:04,600 And that's a text. 62 00:03:04,990 --> 00:03:09,470 Let's say data that properties I want to place. 63 00:03:09,510 --> 00:03:09,920 Okay. 64 00:03:10,000 --> 00:03:12,100 That's what we need for now. 65 00:03:12,100 --> 00:03:18,610 Save this and give it a run we should be able to actually see the place that we are clicking. 66 00:03:18,610 --> 00:03:19,050 So let's see. 67 00:03:19,060 --> 00:03:20,530 This is San Antonio. 68 00:03:20,530 --> 00:03:22,230 Click and there go. 69 00:03:22,270 --> 00:03:26,850 San Antonio Puerto Rico and Chile. 70 00:03:26,890 --> 00:03:29,290 Very good. 71 00:03:29,470 --> 00:03:29,710 Good. 72 00:03:29,710 --> 00:03:31,750 So it's working perfectly. 73 00:03:32,020 --> 00:03:38,530 So our angle here is when we click each one of these earthquakes is we want to show a full fledged map 74 00:03:38,530 --> 00:03:43,810 here with a marker on the place or the region where this earthquake occurred. 75 00:03:43,810 --> 00:03:48,990 The reason why we're able to do that again is because if we go back to our payload here or Jason you'd 76 00:03:48,990 --> 00:03:54,370 notice that we have the geometry object which contains an array of coordinates and we can get those 77 00:03:54,370 --> 00:03:57,610 coordinates and show ID marker in our map. 78 00:03:57,630 --> 00:03:58,030 OK. 79 00:03:58,120 --> 00:04:00,840 So that is the ultimate goal we're going to be doing in the next video.