[MUSIC] Now we will be talking about web mapping. And how do you display these beautiful maps on the web? We will be basically considering two libraries, Mplleaflet and Folium. So what is web mapping essentially? To share the results with others, it's usually better to have an interactive map. What we have seen till this point, is you are able to create beautiful maps within the Jupyter environment. But that is something which you can see, you can share your code with others and they can run it, and they can create the same map. But what if you want to have a map which is already created and you just want to show the output of the map to others? And share it with everyone. There are two particular libraries mplleaflet and folium which come in very handy. Mplleaflet easily converts matplotlib plot using leaflet web apps. Folium is used to display data, also in leaflet web app. So both of these libraries using leaflet web apps. How difficult is this? Let's do a simple plot. We already saw how to plot some simple data using matplotlib. Here we are just plotting some plots with line blue, and we are plotting it a star. So we are basically plotting a line, which is blue line, which has star markers and in red color. So how do we convert this to a web map? This is a very trivial example, but just by adding a simple line, saying mplleaflet.display. This takes that map which you had and puts it in a geospatial map, this takes the plot you have and puts it into a geospatial map. So your plot was very simple. They're going from 0,0 to 9,9 the numbers just x and y coordinates that gets interpreted as latitude and longitude. So you have a very simple line going from 0,0 latitude to 9,9 latitude and that's what you see there. So just by adding a simple line mplleaflet.display, you are converting the data, the plot into a map. So let's take some other examples. So we have a Chicago Community Dataset. So I want to read the data set. I'm using something called geopandas library to read the data set. We will look more into geopandas library in a later lecture, but essentially is think about this one line as we are reading the data into a data frame. And then, the first line is reading the data into a data frame. Then we are seeing what our columns are there or in that data. So you see all the columns you have in that data. Which is community area and so on. So all these are basically columns, which are part of that geospatial data set. The data set is a geo JSON file, which means it has both tabular data and geographic data, which is the coordinate system coordinate data. So with these two lines you have read in the geo JSON file. And you have it in a data variable called df. And you have seen the column associated with it. Next, let's see how you plot, you can just plot. Let's say I'm wanting to plot the first 50 communities in Chicago. In this case I am saying df.head(50), which gives me the first 50 communities. And I am plotting it and I am saying use the color map called tab10, which is a very simple color map, which has just 10 colors and it is a randomly assigning colors to each of these areas. So that's a very simple way of plotting our data using matplotlib. Now, let's say if we want to create put this data onto a map, how do we do it since it was geo JSON. The data itself has some coordinate system. And as you can see from the plot below, you see the x and y values are actually the longitude and latitude being displayed. So how do we put it on the map? Very simple mplleaflet.display and then we are saying what to display and what is the CRS which is the coordinate reference system. What is the projection system? So data frames for coordinate system is also being shown. So now you have a base map coming from leaflet, and on top of this our data map is being displayed. The next thing you might want to do with after you create a map, is you want to save the map. You want to share it with others. How do we do that? Again, it's a very simple command. Mpl.show, and what do you want to show, is that figure which is the extra taxes and what reference system it's in the same what you did for plotting it. And then you are saying what path you want to save it as. So you're saving it as a chicago.html. So that saves it in your Jupyter environment, in your current working directory as a file called chicago.html. Now this is a simple HTML file, which you can put in any web server. And this will show the map that you just created. Now that we have seen simple example of how to do plotting with Mplleaflet we will look into a little bit more examples using folium. Folium basically builds on the strength of Python ecosystem to do data wrangling, meaning to transform data. And it uses the mapping strength of leaflet.js library. Folium has been used to create some very stunning, interactive maps, we'll see some simple example. Let's say you want to create a map of the University of Illinois at Urbana Champaign and the court there. Here's a very simple example of how to do it. You imported the library which we wanted, and then the folium library which we wanted, and then we said folium.map and then you created the location, you gave the location and you gave a zoom level. So that's the x y coordinate for the latitude longitude, and the zoom level you want to display.so. The center point of that latitude longitude, which you passed it would be the center point of the map. And the zoom level will show how much detail you want to see or how much region you want to see. In this case, clearly, by just this single line of code, you are able to get a map of the court of the University of Illinois at Urbana Champaign. How do we want to save the data, export to HTML. Again, this is very simple. All you need to do is in this case, M is the folium library which we created, and then dot save, we save it and say this is folium-quad.html. So this will save the map we just created into a file called folium-quad.html, which is stored in your present working directory on Jupyter. You can export it and put it on a web server and you can share it with everyone. You can create simple styles for example, we are specifying a style here, which basically creates a different style of map in folium. And you can add then add markers, as well as tool tips. So for example, if you want to add a marker of the natural history building, where the department of geography and geoscience is located, you can do that and create a tool tip there. So when someone clicks on it, you will see the details. And similarly, we are adding another tool for you for the aligner union, which is right next door. We are also able to style these markers. For example, if we want to create markers of different style using information kind of marker, using a cloud kind of marker, there are various kinds of markers which you can have. You can create markers, you can create tool tips you can control the size of the markers, you can control the style of the markers. You can also add simple shapes to the map in this example, what we have is we are able to add some circles to the map. You are able to define a map of the Urbana Champaign area and then we are drawing two circles there. We are also able to customize maps and add simple shapes to it. In this example we are adding two shapes, one around downtown champaign and one around the quad area, each with a different size. And when you click on that you will have a tool tip pop up, which says what it is. You can see the simple quad lines which were used to create right on your screen. And each of them has different radius and different colors also associated with them that you can easily see. Lastly, we can also create some location pop up. So, by adding a simple line of code there, which says, how do you get this line of code right here. Which tells you when you hover over a location, you're able to get the latitude and longitude associated with that particular location. So in this case, we are creating a basic folium map, and then adding a single line, which tells it to display the latitude and longitude at any particular location. You can also allow people to add markers, to there, say adding waypoints. This is a very simple example, we have defined a map. And then we have added one waypoint. And then whenever a user clicks on a map, it creates a marker called waypoint. And with that as a tooltip as well. Thank you.
