Creating legend for interactive layers
I'm looking to create an interactive map that allows the user to
select the layers of data that she wants to see. For example:
http://afghanistanelectiondata.org/election/2009/data
In this map, the user can select to see ethnic data as base data
(polygons) overlapped with point data. How do you create
interactivity with the layers and allow the user to select what she
wants to see?
Comments are currently closed for this discussion. You can start a new one.
Support Staff 2 Posted by Tom MacWright on 16 Sep, 2011 07:02 AM
You can specify both the interactive content of a layer and its legend (in HTML) within TileMill, and use these both either through a TileStream Hosting embed, or with the Wax library if you're coding the map yourself.
3 Posted by robint on 16 Sep, 2011 12:36 PM
With the documentation I've seen, it only explains how to do interactivity in terms of a scroll-over (like the "Geography Class" example in TileMill) or clicking on something on the map. I'd like to be able to add interactivity with the legend, to be able to select different layers to show. Or select different variables (i.e. population density, literacy rates, etc.).
I'm also relatively new to coding, which is why this is a little more difficult.
Support Staff 4 Posted by Will White on 16 Sep, 2011 01:44 PM
Hi there,
It sounds like what you're looking for is a layer switcher. We don't provide any layer switcher behaviors out of the box because it's relatively easy to create a custom one using HTML and JavaScript.
Here are some guiding steps:
map.setProvider()function in Modest Maps to change the active layer.You can read more about
map.setProvider()in the Modest Maps wiki.Will
5 Posted by robint on 19 Sep, 2011 06:27 PM
Thanks for the help - I'll let y'all know how it goes...
Will White closed this discussion on 25 Sep, 2011 07:18 PM.
robint re-opened this discussion on 06 Oct, 2011 08:09 PM
6 Posted by robint on 07 Oct, 2011 12:37 AM
I have some follow-up questions on this...
1) So in order to set up the layer switcher using HTML and JavaScript, I need to export each layer individually and load them into MapBox hosting separately? So if I have 5 layers, would that count as 5 different maps on MapBox hosting? (I suppose this question is also tied to hosting, but related)
2) Any other tips on setting up a layer switcher using HTML and JavaScript?
3) Is there any way to use Wax/Modest Maps not on a custom HTML page? I know a bit of coding and am learning more, but am not looking to create an HTML page from scratch. Thoughts?
Thanks for any advice on the above!
Support Staff 7 Posted by Will White on 08 Oct, 2011 05:08 PM
That's correct, but MapBox Hosting now allows all accounts to have unlimited maps. There are just limits on how much storage you use with your account.
A good example site to refer to is http://data.nai.org.af/. Each time you click on a year in the timeline, the map changes using
setProvider().You can use Wax & Modest Maps on any web page that allows you to add/edit HTML and JavaScript.
We have the embed builder on MapBox hosting, but it is tailored for a specific use that we found to be most common for people. It does not allow you to build a layer switcher, because that involves tighter integration with an application and thus ends up requiring custom code anyway.
Support Staff 8 Posted by Will White on 08 Oct, 2011 08:06 PM
Hi there,
I put together a very simple example of a layer switcher using Wax, Modest Maps, and jQuery:
http://bl.ocks.org/1272792
The code is commented. Hopefully that helps you get started. Let me know if you have any questions about it.
Will
9 Posted by robint on 09 Oct, 2011 11:27 PM
Thanks, Will! This should be really helpful.
10 Posted by Kaloayn Petrov on 10 Oct, 2011 01:08 AM
Hello,
Thanks for the example, definitely does what it needs to do. However, Is it possible to create a multi-select layer switcher with wax and modestmaps?
Kaloyan
Support Staff 11 Posted by Will White on 10 Oct, 2011 03:19 PM
Modest Maps only supports one layer at a time, so a muti-select layer switcher is not possible.
12 Posted by robint on 10 Oct, 2011 03:44 PM
So with the violence against journalists in Afghanistan example, how can you create the two sets of layer switchers - one that shows the years and one that shows different background information (Journalists, Media Outlets, etc.)?
Support Staff 13 Posted by Will White on 10 Oct, 2011 04:19 PM
The violence against journalists site is using some more advanced parts of the API. MapBox Hosting can composite multiple tilesets together before sending them to the browser based on the layer URL. The buttons are simply manipulating the layer URL.
Compare the URL of the tiles after clicking the buttons. Initially, the URL for a tile looks like this:
After clicking on the "Journalists" button, the URL looks like this:
Note that the
afg-journalistslayer was added to the URL. This is the URL after clicking on the "2008" button:Note that
jv-afg-totalchanged tojv-afg-2008, but theafg-journalistslayer is still there.All of these layers are stored on the internews MapBox Hosting account, but are being dynamically composited on the server to look like one flattened layer. Hope that helps.
Will
14 Posted by wboykinm on 10 Oct, 2011 06:03 PM
This is officially the most useful thread ever. I will have a layer switcher before day's end!
Thanks for sharing, Will!
Support Staff 15 Posted by Will White on 10 Oct, 2011 06:17 PM
Awesome, glad it's useful. It's also worth mentioning that the Violence Against Journalists site is using legacy API endpoints, so the URLs in my post above are using an old format. You should refer to the API documentation for information about using the newest version of the API.
Will White closed this discussion on 01 Nov, 2011 11:10 PM.