Our chart looks pretty good but we can definitely use a little bit of CSSA to clean it up.
In particular it looks like each individual chart is not quite centered.
In addition they all appear to be slightly different sizes.
So I think that we should go and add a little bit of CSSA to the project and get these charts to look
just a little bit more uniform inside my code editor.
I'm going to find the style directory and open up the style CSSA file.
This file is already wired up to an index.
Each HTML document so you can add in any CSSA here that we would like and it will automatically be applied
to our document.
So let's have a little bit of CSSA to clean up all the charts that we have.
We'll first start off by adding a selector for the t t and t h elements.
We're going to do this to make sure that we can center all the different chards on the screen or at
least in each individual cell.
So adding a rule for vertical align middle.
I'm going to mark that as important and also add in text align center and was marked that as important.
And then 2 other quick rule rules while we are here first the input at the very top of the screen.
It's really sandwiched up there right.
Like it's really pushing up against the address bar.
I think you look a little bit nicer if we had just a little bit of space between the address bar and
the search bar.
So to accomplish that we'll add in an input group with a margin of 20 picks on top and bottom and zero
picks on the left and right hand sides.
Finally to address the fact that the actual charts appear to be slightly different in size.
We'll fix the size of the charts by adding in Fiji with a height of one hundred and fifty picks like
so.
OK let's refresh our document now and see how we're doing.
OK.
Looser spar definitely looks much more reasonable if we add a city are fantastic.
So all the text in here is nicely centered and each chart appears to be identically sized.
So it's looking pretty good.
Now I definitely like how the app is turning out overall and we can add in multiple cities.
So how about Sacramento and Tampa New York.
Cool.
Looks good but I kind of feel like we could amp this up just a little bit more.
Maybe we can do just a little bit more than what we have right now.
So here's what I propose.
How about instead of showing the name of the city on each row on the very left hand side.
Let's instead show a tiny Google Maps window.
So the user can get a little bit more interactive feel to it.
So we'll put a very real Google Maps embedded map right here on the first column of every single row.
So the user will see hey OK I recognize like this is the correct New York City that I expected to search
for or Tampa or Sacramento.
Definitely relevant once we start searching for you know London which as we saw is not quite based out
of London overseas that you might see that.
OK.
So let's get started by using Google Maps to amp up our chart just a little bit here.
Now we're going to make a separate component.
How's the actual map that we'll be showing here.
So we're going to take a lesson that we've learned right off the bat and make a separate reusable component
with this map.
We probably don't need to be touching redux at all.
So we're going to make it as a component not a container so it will not expect to have any concept of
state or at least application state.
We're just going to pass in some props from the parent component and have the component decide how to
make a map appear on the screen.
So inside of my components directory I'm going to make a new file called Google map.
Yes.
And inside of your we'll make our component that will show a map on the screen in some fashion.
We'll start off by importing react and component from react at the top and we'll create a Google map
component.
And then export out the bottom.
OK.
Looks good.
Now I want to tell you a little bit about Google Maps the stern project that we've are working with
here.
If you open up the index.
Each team file you'll notice that there is a script tag in here that is importing the Google Maps API
javascript file.
So this project we're working with is already wired up for making use of Google Maps.
We don't have to do any additional installing of modules or anything like that to make use of Google
Maps.
So at any point in time we can just start referring to Google Maps.
That's kind of like the the main space of Google Maps in the using the javascript API.
So if I go back over my terminal I can say Google Maps and here's this fancy object that allows us to
create a new Google map.
Now this is something that's both nice and not quite so nice.
We'll tell you why it's not quite so nice.
So far on the scores we've come used to making separate re-act components for everything we did right.
We've made like tables and charts and images all these different kinds of elements by making individual
components and then rendering those components on the screen by using a render method inside of a component.
This time around however we're using a third party library that has the idea already of how to render
a map onto the screen.
So in other words we're about to make use of this library that has absolutely no idea how to integrate
into a map or integrate into a re-act type application.
So as we go through this implementation here we're going to be putting a little bit of code on the screen
that's going to look a little bit crazy but Aemilia after we throw it all up we'll talk about exactly
what's going on with it.
OK so there's only about six or seven lines here that we're going to enter in.
They're going to look a little bit weird but we're going to put them down and then come back and emu
and discuss what's going on.
First I'm going to create my render method and inside of here I'm going to return a single element and
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.
This makes use of the ref system in re-act the ref system allows us to get a reference.
So that's what ref is for it's short for reference a direct reference to an age element that has been
rendered to the page.
So after this component has been rendered to the screen I can get a direct reference to the div that
was created right here by referring to this refs map.
So anywhere else in this component I can say this start Rebstock map and it would give me a direct reference
to this actual age teamer element and you'll see why that's important.
And just a second.
So here's the other chunk of code that I said was going to be a little bit weird.
We're going to say component did mount and then inside of here we'll say new Google Maps dot map.
The first element or mean the first argument we're going to pass in will be this dot Rebstock map and
then the second argument is going to be an object or going to pass in two properties here.
The first is zoom of 12 and then a center which is going to have a lot of this dot prop's laughed.
And they long LNG of this props thought long like so.
OK so a little bit of weird code here.
Let's take a quick break and then come back and talk exactly about what is going on with this statement
right here.