‫With our context now in place,
‫let's take a detour
‫and implement a map in the next few lecturers.
‫So many kinds of applications require a map
‫and so this is a really nice feature to implement here.
‫And we are going to implement this map
‫with the help of a third party package.
‫So let's open up a new terminal here.
‫So again, in our project folder
‫and then let's NPM install React Leaflet.
‫And then we also need to install basically the base library,
‫which is Leaflet.
‫So React Leaflet is like built on top of Leaflet
‫and so we need both of them installed.
‫So this is basically the biggest open source library
‫to implement maps.
‫And if you took my complete JavaScript course,
‫then we already used the same library there,
‫even though we didn't use it from NPM,
‫but just installed it in a different way.
‫But anyway, now we are ready to actually use this library.
‫So let's close all we don't need here anymore.
‫And let's open up the map component.
‫So right here, we already have this JSX
‫but we will actually get rid of all of this,
‫most of it at least.
‫Now, whenever we bring in a third party library like this,
‫it's a good idea to check out the documentation.
‫And so let's just quickly search for React Leaflet.
‫And so then here we get our documentation page
‫and here is some sample code that we're actually
‫going to copy and paste in a minute here.
‫But for now, let's go to the getting started tab.
‫And so yeah, here I'm actually interested
‫in the installation part just to show you what
‫we already did, which was to install Leaflet
‫and React Leaflet and yeah here is the part
‫that I was looking for because it says so
‫that we also must set up our project using the base library.
‫So basically this quick start document
‫of the Leaflet base library.
‫So again, the one that we're using is just built
‫on top of this one.
‫So what matters here is
‫that we install or that we include this CSS here.
‫Now I actually already did that.
‫So if we check out the index dot CSS file,
‫then notice how up here we import already
‫basically exactly this URL.
‫Now here the version number is a bit different
‫and we can change that
‫but we can also just leave it probably
‫because it's not going to make any difference.
‫But I wanted to show you this, 'cause in the future
‫if you want to use this library yourself
‫then you also need to do this part.
‫So also installing CSS.
‫And now let's actually take this sample code here
‫and bring it into our own application.
‫So place that right here into this div.
‫And so you see that basically what Leaflet React
‫does is to give us all of these predefined components
‫that we can then use in order to display the map itself
‫or some markers and even popups.
‫So let's now include all
‫of these libraries here or all of these components.
‫So map container
‫and then there we have our auto complete.
‫We need also the tile layer.
‫We also have the marker and the popup.
‫So marker and popup.
‫Okay, and now the only problem that we have is the position.
‫So we need to give this map container
‫which is a component that is actually responsible
‫for rendering the map itself, some starting position.
‫So let's create that here.
‫So const, and I'm gonna call it map position.
‫And actually this should be state
‫because later on when this map position changes
‫we want the map then to re-render.
‫So let's use a piece of state here.
‫And as a starting position, I will create an array.
‫And then let's say the latitude,
‫which is the first value is 40
‫and then the longitude, let's say zero.
‫So the map container here, the center prop,
‫expects an array of latitude and longitude.
‫And so that's why I'm defining the position here like that.
‫And then here, of course, we need to destructure that
‫into map position and set map position.
‫And so then here, let's replace this one.
‫And also here temporarily this marker.
‫So let's give it a save.
‫And let's see, and well, that didn't really go as expected.
‫Let's try to manually reload here,
‫but well there's no map to be seen.
‫So let's maybe quit our application here and restart.
‫So maybe we need that in order to get that package in,
‫but apparently not.
‫So still no map.
‫So let's try to inspect here.
‫So to see if anything was actually loaded.
‫So here's that map container.
‫And indeed there is something there.
‫So something new
‫that we definitely didn't put there ourselves.
‫So it is working, but as we can see up here,
‫so there the height of the element is actually zero.
‫And so that's why we cannot see the map.
‫And so the reason for that is that here I actually
‫forgot to include a class that they have already created.
‫So here in this CSS module.
‫So notice how here we have this map container,
‫which we are already using, and we also have this map.
‫And so this one, all it does is to set the height to 100%.
‫And so on this one here, we already have the class,
‫but now I also need to add it right here.
‫So class name is styles dot map.
‫And here, let's actually remove this event handler.
‫And well, there's still no map, but ah, here it is.
‫Nice, so that works beautifully.
‫So we can zoom out and move to different places.
‫As you see, it then takes a bit of time to load these tiles.
‫And speaking of the tiles
‫I actually want them to have a different style.
‫So notice how here the maps looks a little bit different
‫so I think it does look a lot nicer.
‫So a bit more in line with the colors of
‫the rest of the application.
‫And so for that we need to change the URL here of the tiles.
‫And one that I like is just very simple to change.
‫Just change this here to fr then slash hot and that's it.
‫So maybe we need to manually reload and there it is.
‫So these colors I think are a lot more organic.
‫Now what I also want to do here is
‫that I want to change the zoom when I scroll on my mouse.
‫So right now that doesn't happen.
‫So that doesn't work.
‫And that's because here
‫the scroll wheel zoom prop is set to false.
‫So let's just set that to true, come back here.
‫And for some reason we always need to reload,
‫but then then that works, nice.
‫Now for some reason we don't get a pop up there.
‫So let's load that once again.
‫And so yeah, you see that if we click here,
‫we actually get the text
‫that is right here inside the popup.
‫So this thing here is the marker
‫and what opens when we click is the popup.
‫So of course we don't want this one here
‫in the starting position,
‫but instead we will want one pop-up for each of our cities.
‫And so let's implement that in the next video.