Web Mapping & Data Visualization by Google and Microsoft Mapping Tools: Create 3 Real World Projects | Damtew Engida | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Mapping & Data Visualization by Google and Microsoft Mapping Tools: Create 3 Real World Projects

teacher avatar Damtew Engida, Information Designer & Data Analyst

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

17 Lessons (52m)
    • 1. Web Map promo Video Final

    • 2. Dowloading and Cleaning

    • 3. Creating Geo Maps in Google Data Studio

    • 4. Styling in Google data studio

    • 5. Introduction Mymaps

    • 6. Downloading NYC traffic data

    • 7. Download NYC Shape file and KML

    • 8. Importing the NYC traffic accident data

    • 9. Creating choropleth maps in Google My Maps

    • 10. Styling and Visualization Maps in Google My Maps

    • 11. Introduction to Microsoft Power Map

    • 12. Organizing the traffic accident data

    • 13. Creating maps in Power Map

    • 14. Styling Visualization in Microsoft Power Map

    • 15. Create new website by Google sites

    • 16. Embeding Maps to Google Sites

    • 17. Organize Map Visualization in Google Sites

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Web mapping is everywhere. It is an interactive visualization of geographic information. There are many online codeless tools, like CartoBuilder, Mapbox Studio, ArcGIS online to create web maps. This course will help you create simple but powerful web maps by Google My Maps, Google data studio, and Microsoft power maps.

Google My Maps is the modern way to visualize geographic data. With My Maps, you can quickly and easily build a map visualization to keep people informed. You will create powerful data visualization with these creative tools. This course will show how to create web maps from start to finish. This short course will help how to import multiple datasets and overlay and merge them together. You'll also learn some useful tips and tricks to help you optimize your map.

We will create three real-world projects

1. Network City Traffic accident web map. We will create a caseload map analysis from raw data by Google My Maps. We see every step to create the map visualization from Start to Finish.

2. Updated COVID-19 Country Caseload map. We will design the updated map of COVID-19 by Google data studio mapping tools. I will show every step from cleaning the raw data to designing and styling the map.

3. US Population Visualization and Newyork City Traffic heat map. You learn how to create a heat map and boundary Visualization.

4. Embed and Share web maps. You will learn all the skills to create a free website, design and compose layouts. Moreover, you will learn how to embed web maps to your site and share them with others.

This course is code-less and beginner-friendly. I will show every step to create the map visualization from start to finish. The skill will help to create free web maps in no time.

Meet Your Teacher

Teacher Profile Image

Damtew Engida

Information Designer & Data Analyst


 Damtew focuses on uniquely crafted data visualizations and insightful analysis that both engage and enlighten others. For data visualization and analysis purposes, He mainly focuses on free mapping and analysis tools. 

He is very passionate to share and help people better understand and communicate their information using data visualizations, visual explanations, infographics, and Geo Mapping

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Web Map promo Video Final: Welcome to this way of mapping exercise. This is a cordless or per easy map visualization projects. There are lots of we're mapping tools available. In this course. We'll explore three free wave mapping in your visualization to us. We'll build simple way might be predicts by Google, My Maps, Google Data Studio, and Microsoft's Power Map towards no unnecessary tour here, we'll focus on creating the map visualization projects. So we'll start the first project biology in cleaning thought in detail and connect it with Google Data Studio. Then we'll create a materialization of country case logs by latest data of global COVID-19 and for white in the style our airport. But then with creates a second we're mapping project. We'll be building a droplets and heat map honors is by Google. My Maps will create new York City traffic accident map visualization project. We'll explore all three steps to Butte such maps. We'll be dollar loadings are walking detail. And we will use shapefile conversion to Kamil techniques. We will discover and set all the parameters necessary to create such beautiful maps by Google, My Maps. The last project is marked realization by Microsoft. The power maps will use household income by stdin and New York City traffic accident data to create such heatmap analysis. Finally, we'll create any website by Google site and embed all nod mob creatives who would organise to make a good presentation. And we will publish in share all our products online. So if you already did dive into building such simple but powerful online mapping exercise. 2. Dowloading and Cleaning: Hey, just tried to find the latest data warranted or meters has the latest data for this purpose. So the squire it to this side and download the latest data. We have. The latest table for the core V8 data. Let's select all the rows and columns and cockpit. Copied down to. So COPI is, and where this new Google Sheet, Google Sheets, we need to connect to these datas Tito saw, open up, say shit and creates new sheet. I'll put a blank sheets. So copy, paste here, is that data just copied? Okay, it doesn't matter, saw lists and I'll clean up this data bit. We don't need this column. Go ahead and delete. And there's three names is country. And he swine is total cases. And there's a strong, we don't need it. As a swan is a total days this fossil far. So let's see all continentality to we don't need all just for our mapping exercise. Delete this column. So these are the clean data. So it is ready for to be ported into Google Data Studio. 3. Creating Geo Maps in Google Data Studio: So now we have clean data sheets to COVID 19, coffee, 19. Latest update. Now let's open up Google Data Studio. Open this shirt. So you cite. Here we have the templates and previously created visualization. They start with a blank report. Select Google Sheets for the data connector. Google Sheets. We select that data which contain our data. Art. On day 2, report. Finally, D for charting. Try to map the data from, as Charles said, elect Joe. Trapped in, it sees a result. Here. It says in file each dimension. So let's fix that or dimension to news at good to datasource. Data source, end changer. The takes to Joe and Joe be by country. But the country. Now let's delete this and let's pull that up again. Now we have the map enlist change. The bit is changed a matrix, two cases, total cases. Yes, we have this beautiful map indicating the quizzes across country telling the same manner we can create for the disease as well. So to do that, just copy the case and can pass it, drag it a bit to the right. So let's simply change the metrics. To drag it speeds in, change the metrics two and days. So now we have a map, a map for the kids and not four days. So in the next lesson, we will try to style these two maps. 4. Styling in Google data studio: In the last lesson, we have created this beautiful maps. Now let's style it send or guys, it's a bit. Firstly, make the background black. So insert rectangle shape here. Drag it down to fit the canvas. So just saying it to bike of the artist. So now let's change the color of the background. Change it. But again, it's changed the background too dark. This is very gap the sizes one is good. And now also change as a background of some maps. Good background is diet in background. Make it want to stay lighter than the background. Drag it a bit in the same manner. Chained background of say smart. Eat a bit to fit to online, boss maps to laser range. This makes a porter lighter, a bit lighter. Drags these two down. All insert chart, simple chart just to make it, it'll be a form. So at least in such simple chart, column, bar chart, because the charges to align here is a map, a bit too. Down. And we'll go to style. It will change the background color. Change a background of the chart. Tend to be white. And also the charter is change. The code. C is fun, this is P24. And background be CS1 is one is one we used for our map background as we change the border. Color is white. Drag it down a bit. We'll insert a title. We need that space. So it's bit. Now let's serve as a rectangle. Rectangle, that text box. And a line. Title will be 19. 19. Latest. Data visualization. Select n. Craze. Font is very good. Center it is good. And C sine is to make it a similarity is the other graph. Yeah. We have finally created is beautiful map and is Grade enter one another. Yes. Great. Now let's go ahead and rename the title TB. Covid 19. Test. The test. Just update. So we can convert this visualization to p d f phi downloads. Okay, next part. Here is our visualization in PDF. So we have created these beautiful mob visualization in Google Data Studio. 5. Introduction Mymaps: Google is my mops help us to quickly and easily build a map visualization to keep people informed. Here's an example of Google's mind map created for the COVID-19 pandemic, buys a daily voice. And here is another great example of google mind-map catered for for donation distribution during the pandemic in Bangarra MRI, CT of India. Now it's your turn. This course will build new York City traffic accident, location, data and map visualization. Will see all the procedures needed to create such easy but very helpful mob visualization from scratch, start, finish. So let's dive in. 6. Downloading NYC traffic data: First this dialogue. So working data for our project to desert list search for New York City traffic accident data. Open up the S0, S1, and we have the traffic accident public data. We can export this data to Excel. Spreadsheets, can save it. I have already downloaded. And here is the data or AD for our demo. We have all these indicator we need for the visualization. We have the bar off, we have the Julia Geolocation, the number of people injured or dead, or other useful indicators. So let's first visualize the number of accidents or kurt in each borough. So to do that first, let's organize its guys. A detail by a people table. Saw leads to create a pivot table. Bringing the power of two the rows, and the number of accidents occurred in each power of two values. We can also add some number of the days. If we need to. We can formats a table a bit, can change the background. So this is a detail we're going to use for our map visualizations and zen next lectures. 7. Download NYC Shape file and KML: Tomorrow, the bar off traffic accident caseload. We need to say KML file of support of boundaries. Or we can get sick Emile data in two ways. Either we can directly downloads a KML file from the data catalog. Here is a k-mer file and the data catalog, so we can download it from the Z's, uh, resources. And the second, it is air came in five ways to downloads a ship fight of the bar off and convert it to a cameo. We can get there Bohr shift file from a CT planning of New York City. Salt. Let's download it. And we can convert it by Kamil converter. So now let's go to my Joe D converter to convert the Kim Il the shapefile to KML. My joy data converter. So go to convertor. Brings data. Yes, we download it. We downloaded previously. Saw these fun. Is it phi? Continue? Ltbi, skin male, convert it. And now we can download it as a result. So let's save it. In the next lecture, we'll map the poor off to Google My Maps. 8. Importing the NYC traffic accident data: Now let's open up Google Maps. Google Maps. Link. Scroll right down. It creates a new map. So now let's import the number of accident location in each bar off. We have already prepared the last one in traffic accident location data. This visualize this data in Google Maps import. And we can applaud from local or from Google Drive. Big landlord trend. Here is the data. Perhaps this and the location pointers are, will be immediately populated. So place of parameters. Go ahead and select Bar off here, all the points or the location for the accident. The limitation here, only 2 thousand rows are added. But we have more than 74 thousand accident locations. Air down, more than 34 thousand energies are some of the Tafel accidental locution or gerd in 2020 in New York City. The next lesson, we'll create a choropleth map. 9. Creating choropleth maps in Google My Maps: Last lecture, we have imported succeed and location points still Google Maps. And this lesson will crest support of accident case Lord, choropleth, maps. First listen port the New York City and pour off Kin Care Emil boundaries to go the moment. Let's import, Add layer, import and select bar of boundaries. So legs apart, Pinder, bounded KML upon loading. The second side, we have the port boundary Kamil. Here it is. So we have a 50 pound bar ofs. So first let's rename the power of name is old untitled. So introduce that. We will hit didset table attributes of each borough. Go ahead and eat and copy this. Baryon Manhattan first-line is in Manhattan. Siding. Drag it to pass it here and save. So in the same manner, rename all the other bar ofs these RNAs for its copy and paste and save it. The third one will be Brooklyn, copy and paste. Save. The last one is a force between queerness copy and paste it here. And the last one, BCE tetanized farm land. He did this anyway, finalized. So now this, bringing this data to LumApps, here is the data we already prepared rate. It is the bar off with the number of person injured. So let's internationally to see this desired open to debt data table. So duplicate one of the colon, rename these, go ahead and rename it. Like in Jewelry. Cases. Steps should be number and art. So we have the new column now, the jury cases. So we will enter, thus deta those caseload minority to the Google maps column you would just created earlier. So as first-line is a Manhattan 1876 cases. So in the same manner, we can enter the other cases as we all click the Layers. Now click the layers. In change the categories. Click it. Okay. Excel layers. This UV in jury cases. Two ranges. As you can see is a case logs are valid by the range of cases. The next lesson, we want to style our maps further. 10. Styling and Visualization Maps in Google My Maps: The last lecture, we have created a traffic accident. Case, load or corroborate it's Marble Bar off. And in this lecture, we'll try to style our map visualization. Firstly, name bar of boundaries to the train, to New York City, traffic, accident, injuries, locations, location, Save, save it and open the layer. Open the layer. And here we can change the color of the range, can make any color. We need it to be. So we can also change the range. Can change these from Sinai to 21, 1000. And the other as well. And we can also tiles icons, this check this they are in. We can change the color of the Eigen is choose these rate. And here we have changes. Color of the icons. And we can choose these accident. I can design hours. We can also import our custom icon. If you have any current. We can change that and click. Okay. Now we have a good looking map visualization. This is very simple but powerful map visualization. Scripts. 11. Introduction to Microsoft Power Map: To create a Jew special choropleth maps. There are many online and offline tools like ArcGIS, QGIS, Tableau. In others. We can also use Microsoft Power maps to correlate simple choropleth maps, time-series data. Lakes. His power mob to was introduced in 2013, and it only applies to 10 version of Microsoft Excel checkout as a port a dot office.com to see if you can enable the plug-in. We can utilize attributes like color, size to visualize multiple attributes twice SOP. And the next lessons, we'll try to create such mops. 12. Organizing the traffic accident data: To create them up in Microsoft Power mop, we need jaw location data. Here we have the New York City traffic accident data side. We used it for golden monopsony PMO. We have the latitude and longitude coordinates. So we can use such location data with x and y coordinates. We can also use as at location data like states and regions. Here we have the states with population and average household income. The statehood be detected as o location and we can make the data. So the next lesson, we'll use this data to create a choropleth map in Microsoft Power Map. 13. Creating maps in Power Map: So now let's try two power. To do that. Let's select this data and go to insert. And 3D. Map is creates new tool. And it's easy to roll window. We want the smoke to be flood is there. But let's make it. Flatmap is a play to capture. Screen is 2D chart ON delete gent. We can do this on this panel. The data option. We have a stacked column or an int and X1 is a cluster and a certain one bulb became caret also a heatmap. And the last one is visualization. By reaching its right to visualization fire region. Here are the regions that less populous of data. This feared. The first, the first volume is household income. So we have older states with the average household income. So on the next star try we will use a heat map. So this good to Gita is USA New York City traffic accident data. So it's the legs and the go-ahead to create a Power Map. First, this leads the previous demo or tour. So the legs it again that data go to Insert. And then 3D map. Now again, this time we'll use so meet debt. So I'm in main and let's use a heat map. Good. Heat map is here. So let's try to find the value of the data will ease injury. So here we have the heat MC, beautiful heatmap. So in the next lessons, we'll try to tie these mobs will change the colors and other values. 14. Styling Visualization in Microsoft Power Map: Styling and federalization is a simple line in Microsoft Power BI. Firstly, less rename. This can quite like US household income. And then go to Layer Option down data option. Here we have the color scale can make it lighter or darker. And we can also told change or pasty it for right, or darker areas of color. Oceanic can choose any color we want. It gives the late men here. We have wireless to show or hide from viewing. Times the same manner we can stay as a heat map. Also, less coils. This one, New York City trophy exceeded this team map. New or CT traffic accident decimal or he's map. And then we'll go to the layer option. Here we have color is a skill can make it dense and radius only influence. And also the opacity as an app. Tears are far visual application. We can make it by sum or average of the data. The injury. Again, show this toggle. Yeah. This is a very beautiful but powerful map visualization. 15. Create new website by Google sites: In this section, we'll create a new website by Google Fi and, or design compose olds and moms we created in the previous lessons. Creating a Google site is super easy. This go to Google site. And we need to sign and by our account create one. Let's create a blank sides. So this is our new site. In design view, we can customize some of the features like site name. It's rename. Our new site, can call it like simple way of mapping, demo down. So the deed subtitle can call e to lie. Simple, simple way. Maps created by Google and Microsoft. Microsoft free or Microsoft tools, is to decrease font size a little bit. For the time being. It's making its 18 or 24. 24 is good for this time. And left panel. The left panel, you can insert images, texts, different layouts in others down. We have these templates as their tools down, we can design and Ray Charles site. Here you can add a new page. And by the plus sign, there is also Thames Meno. We can change. Here. We have a few options, change our attempts if we need to solve a set. And then then next lesson, we'll compose our maps to the site. 16. Embeding Maps to Google Sites: So in the last lesson, we have created this simple graph sides. Now let's bring out moths. Thus, we have created by Google Maps, Google Data Studio into Microsoft Power. Mbps. Impeding is very straightforward. And we have this bit less ligand or prop. We can embed in two ways by the URL in or buys at embed code. Let's leave this and good to Google Data Studio and open up the data visualization we created last time. So open up the Data Studio is open up this visualization. So here's, it's our visualization maps in our charts. Here we have the short term, It's cancers is S1 and guts the total. And here we have the embed a report. So we can use either embed court hall in Baidu Arial. Let's use the URL for this demo and copy to clipboard and go to our new draft site and copy the link here. K is a preview. Link is working and we can interface. Here we have the visualization in our site. In the same manner. Less brings in new York city traffic model that we created last side, go to Google Maps and open up Google My Maps. And open up all these mobs. Here is it, is. It takes a few seconds. Here is our mops. Clicks a shirt buttons and enable the link sharing. If not enabled before. Now copy the link in good to our drafts site. And click the Embed tab again. Copy it here. Copy the link here. K is a preview. And click Insert. Here we have or map the new site. The next small piece or one we created by Microsoft Power Map. This time we are not embeddings that the ink will insert, eat and image. This was a New York City traffic injury heat map. So they just capture it. And we can save as an image. It's good to, again to our site. And here's image. Upload a mini site we set. Now Dr. Here is a heat map. So here are all maps. Can organize its data. The next lesson, we'll guys at the outset designed bit. 17. Organize Map Visualization in Google Sites: We have successfully insert on a whole new wave size. Now it's organized entity sign bit. First, let's change the font type to Lato. Font type to lato in this making it. And let's change the font size to 18 to be enough. And the spacing is very large. This go to Customize spacing. Semi is 0.4, is enough. I think supplies is drag it bids. Now, clubs. Good. Can change the heater, typed later. Then go to the first map here, part of the scaffold. So it's drag it down. And to gain side. Now it's looks very nice. So let's go ahead to the next mop. Good. So the next New York City traffic heat map. So it's drag to write first map. So it looks good and great. And also the last map, heat map is dragging to the left. So we can insert title if we needed to. Again, starts. And also we can change the color of the section from this section bound ground option that we don't want to change out. Now we have our sample site int. Last thing we'll do is to publish. It. Can get title. Again, purplish. So it's seeds. Here. This is our site with all the map visualization, which is beautiful presentation.