Get startedGet started for free

Overlay Groups

1. Overlay Groups

In the next set of exercises, we'll practice building up our maps in layers and will use a new concept, groups, to give our users the ability to control which college sectors are displayed on the map.

2. Grouping Colleges by Sector

Let's take a look back at our map of California colleges to explore the idea of groups. When we map all of the sectors at once, our map gets pretty crowded. One approach to correct this is to plot each sector as a separate layer. To start, we can map public colleges by creating a subset of the IPEDS data that includes only public colleges in California. You'll notice that we are now using the group argument in addCircleMarkers(). This is how we will refer to the layers later in our code.

3. Grouping Colleges by Sector

We can then extend this idea to add private colleges. Building that layer with its own set of data. We can replicate the same logic a third time to add for-profit colleges. Based on what we’ve done so far, what do you think this code produces? This may seem like a bummer, but it simply gets us back to where we started with all three sectors cluttering up the map.

4. Grouping Colleges by Sector

To capitalize on the work we put in to create the groups, we need add the addLayersControl() function to the end of our chain of leaflet function calls. Passing our three overlay groups to this function will add a menu to our map that allows users to toggle which sectors are displayed.

5. What We are Working Toward

In the next set of exercises, you will apply this approach to create a map of American colleges with three marker layers. Users will be able to toggle the sectors of colleges displayed on your map. Take some time in the exercise to explore your map and to test out how the layer controls work. You'll notice that the order in which you add marker layers to your map matters, as they are stacked one on top of another.

6. Let's practice!

Now it is your turn to make this map. Keep up the great work!

Create Your Free Account

or

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.