1
00:00:00,520 --> 00:00:05,610
Our chart looks pretty good but we can definitely use a little bit of CSSA to clean it up.

2
00:00:05,640 --> 00:00:10,360
In particular it looks like each individual chart is not quite centered.

3
00:00:10,390 --> 00:00:13,890
In addition they all appear to be slightly different sizes.

4
00:00:14,040 --> 00:00:19,110
So I think that we should go and add a little bit of CSSA to the project and get these charts to look

5
00:00:19,110 --> 00:00:23,020
just a little bit more uniform inside my code editor.

6
00:00:23,040 --> 00:00:28,360
I'm going to find the style directory and open up the style CSSA file.

7
00:00:28,440 --> 00:00:30,760
This file is already wired up to an index.

8
00:00:30,810 --> 00:00:36,150
Each HTML document so you can add in any CSSA here that we would like and it will automatically be applied

9
00:00:36,150 --> 00:00:37,600
to our document.

10
00:00:38,250 --> 00:00:42,150
So let's have a little bit of CSSA to clean up all the charts that we have.

11
00:00:42,150 --> 00:00:47,040
We'll first start off by adding a selector for the t t and t h elements.

12
00:00:47,100 --> 00:00:51,720
We're going to do this to make sure that we can center all the different chards on the screen or at

13
00:00:51,720 --> 00:00:54,180
least in each individual cell.

14
00:00:54,210 --> 00:00:59,470
So adding a rule for vertical align middle.

15
00:00:59,660 --> 00:01:09,790
I'm going to mark that as important and also add in text align center and was marked that as important.

16
00:01:10,390 --> 00:01:16,620
And then 2 other quick rule rules while we are here first the input at the very top of the screen.

17
00:01:16,630 --> 00:01:18,750
It's really sandwiched up there right.

18
00:01:18,760 --> 00:01:21,540
Like it's really pushing up against the address bar.

19
00:01:21,580 --> 00:01:25,870
I think you look a little bit nicer if we had just a little bit of space between the address bar and

20
00:01:25,870 --> 00:01:26,970
the search bar.

21
00:01:27,160 --> 00:01:36,100
So to accomplish that we'll add in an input group with a margin of 20 picks on top and bottom and zero

22
00:01:36,100 --> 00:01:38,560
picks on the left and right hand sides.

23
00:01:38,860 --> 00:01:44,400
Finally to address the fact that the actual charts appear to be slightly different in size.

24
00:01:44,560 --> 00:01:52,300
We'll fix the size of the charts by adding in Fiji with a height of one hundred and fifty picks like

25
00:01:52,300 --> 00:01:53,060
so.

26
00:01:53,490 --> 00:01:56,750
OK let's refresh our document now and see how we're doing.

27
00:01:57,270 --> 00:01:57,750
OK.

28
00:01:57,850 --> 00:02:02,980
Looser spar definitely looks much more reasonable if we add a city are fantastic.

29
00:02:02,980 --> 00:02:08,290
So all the text in here is nicely centered and each chart appears to be identically sized.

30
00:02:08,470 --> 00:02:10,380
So it's looking pretty good.

31
00:02:10,480 --> 00:02:15,260
Now I definitely like how the app is turning out overall and we can add in multiple cities.

32
00:02:15,280 --> 00:02:20,110
So how about Sacramento and Tampa New York.

33
00:02:20,110 --> 00:02:20,480
Cool.

34
00:02:20,500 --> 00:02:26,380
Looks good but I kind of feel like we could amp this up just a little bit more.

35
00:02:26,380 --> 00:02:30,260
Maybe we can do just a little bit more than what we have right now.

36
00:02:30,370 --> 00:02:32,650
So here's what I propose.

37
00:02:32,650 --> 00:02:38,590
How about instead of showing the name of the city on each row on the very left hand side.

38
00:02:38,830 --> 00:02:42,510
Let's instead show a tiny Google Maps window.

39
00:02:42,700 --> 00:02:46,600
So the user can get a little bit more interactive feel to it.

40
00:02:46,600 --> 00:02:53,740
So we'll put a very real Google Maps embedded map right here on the first column of every single row.

41
00:02:53,770 --> 00:02:59,980
So the user will see hey OK I recognize like this is the correct New York City that I expected to search

42
00:03:00,010 --> 00:03:02,020
for or Tampa or Sacramento.

43
00:03:02,170 --> 00:03:07,930
Definitely relevant once we start searching for you know London which as we saw is not quite based out

44
00:03:07,930 --> 00:03:12,480
of London overseas that you might see that.

45
00:03:13,180 --> 00:03:13,420
OK.

46
00:03:13,420 --> 00:03:19,210
So let's get started by using Google Maps to amp up our chart just a little bit here.

47
00:03:19,450 --> 00:03:22,030
Now we're going to make a separate component.

48
00:03:22,030 --> 00:03:24,960
How's the actual map that we'll be showing here.

49
00:03:25,000 --> 00:03:31,330
So we're going to take a lesson that we've learned right off the bat and make a separate reusable component

50
00:03:32,980 --> 00:03:33,610
with this map.

51
00:03:33,610 --> 00:03:35,910
We probably don't need to be touching redux at all.

52
00:03:35,920 --> 00:03:41,440
So we're going to make it as a component not a container so it will not expect to have any concept of

53
00:03:41,440 --> 00:03:44,260
state or at least application state.

54
00:03:44,260 --> 00:03:49,150
We're just going to pass in some props from the parent component and have the component decide how to

55
00:03:49,150 --> 00:03:51,320
make a map appear on the screen.

56
00:03:51,370 --> 00:03:57,250
So inside of my components directory I'm going to make a new file called Google map.

57
00:03:57,360 --> 00:03:57,930
Yes.

58
00:03:57,940 --> 00:04:03,940
And inside of your we'll make our component that will show a map on the screen in some fashion.

59
00:04:03,940 --> 00:04:13,360
We'll start off by importing react and component from react at the top and we'll create a Google map

60
00:04:13,720 --> 00:04:14,710
component.

61
00:04:21,050 --> 00:04:23,040
And then export out the bottom.

62
00:04:23,350 --> 00:04:23,730
OK.

63
00:04:23,820 --> 00:04:25,130
Looks good.

64
00:04:25,140 --> 00:04:31,020
Now I want to tell you a little bit about Google Maps the stern project that we've are working with

65
00:04:31,020 --> 00:04:31,550
here.

66
00:04:31,560 --> 00:04:32,830
If you open up the index.

67
00:04:32,880 --> 00:04:38,910
Each team file you'll notice that there is a script tag in here that is importing the Google Maps API

68
00:04:39,000 --> 00:04:40,440
javascript file.

69
00:04:40,680 --> 00:04:45,270
So this project we're working with is already wired up for making use of Google Maps.

70
00:04:45,270 --> 00:04:50,250
We don't have to do any additional installing of modules or anything like that to make use of Google

71
00:04:50,250 --> 00:04:51,300
Maps.

72
00:04:51,300 --> 00:04:55,230
So at any point in time we can just start referring to Google Maps.

73
00:04:55,230 --> 00:05:01,240
That's kind of like the the main space of Google Maps in the using the javascript API.

74
00:05:01,260 --> 00:05:07,440
So if I go back over my terminal I can say Google Maps and here's this fancy object that allows us to

75
00:05:07,440 --> 00:05:10,030
create a new Google map.

76
00:05:10,050 --> 00:05:14,790
Now this is something that's both nice and not quite so nice.

77
00:05:14,790 --> 00:05:17,110
We'll tell you why it's not quite so nice.

78
00:05:17,940 --> 00:05:24,000
So far on the scores we've come used to making separate re-act components for everything we did right.

79
00:05:24,000 --> 00:05:30,600
We've made like tables and charts and images all these different kinds of elements by making individual

80
00:05:30,600 --> 00:05:36,970
components and then rendering those components on the screen by using a render method inside of a component.

81
00:05:37,320 --> 00:05:44,490
This time around however we're using a third party library that has the idea already of how to render

82
00:05:44,490 --> 00:05:46,220
a map onto the screen.

83
00:05:46,440 --> 00:05:52,350
So in other words we're about to make use of this library that has absolutely no idea how to integrate

84
00:05:52,620 --> 00:05:58,420
into a map or integrate into a re-act type application.

85
00:05:58,440 --> 00:06:02,580
So as we go through this implementation here we're going to be putting a little bit of code on the screen

86
00:06:02,580 --> 00:06:07,380
that's going to look a little bit crazy but Aemilia after we throw it all up we'll talk about exactly

87
00:06:07,380 --> 00:06:08,490
what's going on with it.

88
00:06:08,550 --> 00:06:11,960
OK so there's only about six or seven lines here that we're going to enter in.

89
00:06:12,060 --> 00:06:15,950
They're going to look a little bit weird but we're going to put them down and then come back and emu

90
00:06:15,950 --> 00:06:18,580
and discuss what's going on.

91
00:06:18,660 --> 00:06:24,870
First I'm going to create my render method and inside of here I'm going to return a single element and

92
00:06:24,870 --> 00:06:32,300
I'm going to give it a prop I'm going to call ref and I'm going to assign it the string of map.

93
00:06:32,310 --> 00:06:38,640
This makes use of the ref system in re-act the ref system allows us to get a reference.

94
00:06:38,670 --> 00:06:44,670
So that's what ref is for it's short for reference a direct reference to an age element that has been

95
00:06:44,670 --> 00:06:46,420
rendered to the page.

96
00:06:46,440 --> 00:06:52,230
So after this component has been rendered to the screen I can get a direct reference to the div that

97
00:06:52,230 --> 00:06:58,250
was created right here by referring to this refs map.

98
00:06:58,470 --> 00:07:03,750
So anywhere else in this component I can say this start Rebstock map and it would give me a direct reference

99
00:07:03,750 --> 00:07:07,450
to this actual age teamer element and you'll see why that's important.

100
00:07:07,470 --> 00:07:08,900
And just a second.

101
00:07:08,940 --> 00:07:12,950
So here's the other chunk of code that I said was going to be a little bit weird.

102
00:07:12,990 --> 00:07:23,680
We're going to say component did mount and then inside of here we'll say new Google Maps dot map.

103
00:07:23,700 --> 00:07:29,930
The first element or mean the first argument we're going to pass in will be this dot Rebstock map and

104
00:07:29,930 --> 00:07:34,490
then the second argument is going to be an object or going to pass in two properties here.

105
00:07:34,500 --> 00:07:44,870
The first is zoom of 12 and then a center which is going to have a lot of this dot prop's laughed.

106
00:07:45,060 --> 00:07:51,460
And they long LNG of this props thought long like so.

107
00:07:51,580 --> 00:07:53,490
OK so a little bit of weird code here.

108
00:07:53,670 --> 00:07:58,320
Let's take a quick break and then come back and talk exactly about what is going on with this statement

109
00:07:58,320 --> 00:07:59,240
right here.