Integrate choropleth into landing page

[misaugstad]

The main things to do here are:

• Add it into the landing page in a way that looks really nice
• Make the map more obviously clickable, mentioned by @Manaswis in this comment.

This is the current state of the choropleth (legend touch up is still in order):

Any thoughts for how to make it look more clickable?

[jonfroehlich]

So, you do have the hover support, right? That is, you move your mouse over a region, and it becomes more outlined (or something). This will help indicate to user's that it is interactive and possibly clickable--though yes, this is too subtle. The more explicit and hopefully salient would be to fix with header and small content text. Something like (very drafty): Header: 'Select a Neighborhood' Sub-title: Project Sidealk automatically assigns you a neighborhood when click 'Start Mapping' but if you'd like to choose one of your own, click on a region below.

…

On Mon, Jun 19, 2017 at 1:26 PM, Mikey Saugstad ***@***.***> wrote: The main things to do here are: - Add it into the landing page in a way that looks really nice - Make the map more obviously clickable, mentioned by @Manaswis <https://github.com/manaswis> in this comment <#692 (comment)> . This is the current state of the choropleth (legend touch up is still in order): [image: choropleth-not-too-clickable] <https://user-images.githubusercontent.com/6518824/27297411-c07cce78-54f2-11e7-94b6-67a5200026d5.png> Any thoughts for how to make it look more clickable? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#697>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABi-9Qi8mb5zmFkJR6JG-5xWZzvfJxJJks5sFq8vgaJpZM4N-ihC> .

-- Jon Froehlich Assistant Professor Computer Science University of Maryland, College Park http://www.cs.umd.edu/~jonf/ @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter

[misaugstad]

Yep there is hover support; the outline becomes more pronounced, example:

An iteration on the text you put in...
Subt-title: "You are automatically assigned a neighborhood when you click 'Start Mapping', but you can also choose one by clicking on a region below!"

[jonfroehlich]

I like your iteration. Can we change outline color to pure black (or a much darker gray if we want to avoid pure black)? And maybe decrease pen width by ~2 pixels? Play around with it (I'll be able to give you better feedback when I can use the tool). Do you have a visual design idea for how to put this into landing page? Is the map going to span the whole width (and be responsive to browser window sizes)? We have to make sure that we disable scroll on map so user can use scrollwheel without a focus issue (always a problem with embedded maps on pages). For placement, my thought is just before the 'What is Project Sidewalk' module or just after the 'Your work is making a difference' module.

…

On Mon, Jun 19, 2017 at 1:52 PM, Mikey Saugstad ***@***.***> wrote: Yep there is hover support; the outline becomes more pronounced, example: [image: choropleth-hover] <https://user-images.githubusercontent.com/6518824/27298396-728e8e1e-54f6-11e7-800b-508c50f6ebac.png> An iteration on the text you put in... Subt-title: "You are automatically assigned a neighborhood when you click 'Start Mapping', but you can also choose one by clicking on a region below!" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#697 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABi-9emp6olKHgfiGL-upqbxFsVrL3S2ks5sFrVAgaJpZM4N-ihC> .

-- Jon Froehlich Assistant Professor Computer Science University of Maryland, College Park http://www.cs.umd.edu/~jonf/ @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter

[misaugstad]

Yeah it looks a lot better with black.

[misaugstad]

Is the map going to span the whole width (and be responsive to browser window sizes)?

No idea, never had to think about that sort of thing before 🙂 That sounds like a good idea to me I guess!

We have to make sure that we disable scroll on map so user can use scrollwheel without a focus issue (always a problem with embedded maps on pages).

Duly noted.

For placement, my thought is just before the 'What is Project Sidewalk' module or just after the 'Your work is making a difference' module.

I was thinking just before the "What is Project Sidewalk" as well. Since the preceding one it "How you can help", and it make sense to have the way for them to get in there and help directly after that!

[jonfroehlich]

OK, give this a shot. Can't wait to see it!

[misaugstad]

Alright here is full width, looking at 80% zoom, 100% zoom, and 125% zoom on my browser. The full heigh didn't fit past 90% zoom, which is why the 2nd two show two shots, one from top and one from bottom.

And then here is what it looks like at 100% zoom when you have clicked on a neighborhood.

[jonfroehlich]

Legend needs to be placed closer to choropleth. Maybe top left of DC. For size, will have to evaluate interactive version.

…

Sent from my iPhone

On Jun 19, 2017, at 4:24 PM, Mikey Saugstad ***@***.***> wrote: Alright here is full width, looking at 80% zoom, 100% zoom, and 125% zoom on my browser. The full heigh didn't fit pas 90% zoom, which is why the 2nd two show two shots, one from top and one from bottom. And then here is what it looks like at 100% zoom when you have clicked on a neighborhood. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[misaugstad]

Closed via #692