How to Stack Layers on a Web Map

How to Stack Layers on a Web Map

Welcome to Part 4 of Mango's video tutorial series on sourcing and preparing map ready data.

The series will help you to source third party geospatial data for your mapping projects, clean and prepare them for upload to an online GIS mapping platform, and visualizing your data on interactive web maps. 

This video focuses on the benefits of stacking layers and layer groups on your web maps to aid understanding of the visualizations, allow users to toggle layers on and off, and increase load performance of your maps.

If this is your first time viewing this series, we recommend you start with Video 1: Why Maps are Superior to Spreadsheets.

To complete these tutorials, you'll need to download QGIS, and sign up for a free 30-day trial of Mango.

 

Watch the next video: 

How to Map a Spreadsheet Containing Regions or Areas

Watch other videos in this series:

Exclusive freebie! The Beginners Guide to GIS eBook. 108 pages, completely free.
Grab your copy today.

VIDEO TRANSCRIPT

Hello and welcome back!

In the previous video in the series we showed you how to take the data set where you joined your spreadsheet and we showed you how to clean up that dataset, we showed you how to remove any unwanted columns, and we also showed you how to remove any features from the dataset that you're not interested in, and we then uploaded that clean data set to Mango.

Now we have that data in Mango, we're going to build upon it, and I'm going to show you how you can clean things up in Mango and how you can add additional layers to your map in order to show the various visualizations that were available in the demo that I showed you earlier in the series.

So you remember earlier in the series when we click on the feature we get a nice clean info window like this, and we also have supplemental layers such as population and household income.

So let's go back to the Mango administration panel and let's see how we can build upon this map.

Now, the first thing that we want to do is let's change some of the styling for this first layer. So to do that we're going to go into layers then we're going to go to the settings for the sales layer.

Now what I'd like to do is I would like to add some transparency to the film so that we can clearly see the background map. So I'm going to change the opacity to 70 percent, and what I'm also going to do is I'm going to configure the pop-up that's displayed when we click on a county.

Now the basic pop up setting which is default is just going to list all of the attributes and their values.

I think what we'd like to do is we'd like to clean that up a little so what we're going to do first is we're going to have a look at the formatting, so the GEOID that's important for us when we're doing administrative tasks such as joins but isn't really important to the end user so we're going to we're going to hide that feature.

The second thing that we're going to look at is the name so let's capitalize that. Now in the formatting you can have auto detects which means Mango will decide for you what value it is what type of value is whether it's text or a date or a number value.

The next one we have is sales, and then we have population, and we have median household income.

Now medium whole household income is a dollar value so I'm going to select dollars, and then the formatting inside Mango will show that as a dollar value.

OK the next step is I want to edit; we're going to use a custom pop up. A custom pop-up allows us to completely modify how the pop-up will look.

We can we can use an editor in order to change the formatting and we can also do things like include charts, videos, images, and links.

We're going to keep it simple for this one for the name we're just going to use the county name, and then what we're going to do is we're going to display this data in a table. So we go to insert table; we are going to have three rows and 2 columns. Insert, and we can have the first row called sales, and we're going to insert the sales value.

So when you see in curly braces like this it just means it inserts a variable and we can see a preview of what it will look like here.

The second one will be population and we'll insert the population value in that cell, and then the last one will be median household income, and once again we'll insert that as an attribute, and we don't need these ones down here anymore let's just move that back up and as we can see now we have the name of the county in the top and then we have a nice clean table.

So let's press save, and save again. As we can see, we now have transparency on the sales layer, so we can see the underlying base map, and also if we click on one of the features here we have Bexar County and now we can see the attribute to formatted as a nice table.

So the next thing we're going to do is we're going to show the additional layers of the average household income, and also the population data.

So to do that we click on layers we click add layer. Now we don't need to upload the dataset again - we can just use the dataset that we've already previously uploaded.

So using the same dataset, we want to give it a different name so we're going to make another layer for population, so we'll just call that a population, and then for the style we also want to use a quantity legend, and for the class breaks we're going to use the population value, and for the color ramp we obviously want to use a different color so that it doesn't clash with the red ramp that were using for the sales data.

So let's choose blue. We’ll give the outline a dark grey color again, and one other thing that we want to do we've already configured the pop-up for the sales data. Now when we have multiple layers stacked up on top of each other, when we click on the map it will open a pop-up for each one of those layers.

Now as the sales data, the population data, and the income data all contain the same attribute data, we don't need a pop up for each one, so we're going to configure no pop up and, then we're going to press Save.

Now as you can see we now have the population data, but the problem is we can't turn off the population data to see the sales data. So what we need to do is we need to use a layer group.

So we go to layers, and we press add layer group. Now a layer group is a group of one or more layers that can be turned on or off in the legend, so we're going to drag the population layer up into that layer group, and then we'll see that the map automatically gets updated, and now we have the sales data and the population data in different layer groups so they can be turned off separately in the legend.

So now we just need to add the average household income data so once again we go into layer settings we press add layer, we choose the sales data again, and this time let's call this layer median household income.

For the style, it’s going to be a quantity legend again. We're going to use the income column, and we're going to choose a color ramp that we haven't used already let's go with a green. I'm going to change the outline to a dark grey so it's consistent with the other layers, and once again I'm going to disable the pop up for this layer. So now I press save.

Now as you can see once again it’s put them in the same layer group, so we're going to add one more layer group and we're going to move that medium household income layer into its own layer group.  

Now as you can see we now have the median household income so now our map is starting to take shape and it's looking similar to the demo map that we showed to you at the beginning of this video series.

The one thing that we've got left to add is adding the points of our dealership locations and also adding the query tool, and we'll be doing that in the next video.




Share this!
Chris Brown is the founder and CEO of Mango (simple online web GIS for everyone).