Water Temp Symbology updates

[jenniferRapp]

Updates to the Water Temperature map

• [x] Finalize size and color for water temp monitoring stations

• [x] add to legend label: "USGS monitoring station"

• [x] add to layer list "USGS temperature monitoring stations"

• [x] Increase zoom levels by 2 (or a reasonable zoom for dense urban areas)

• [x] update text for About this map.

[jenniferRapp]

@mwernimont About this map suggestion insert the second sentence into the existing text: It shows the latest available daily estimates of natural water temperature for approximately 58,000 stream reaches across the lower forty-eight states. The real-time temperature monitoring sites are visible at finer zoom levels, and clicking will open a graph of the past 7 days of temperature monitoring data along-side the modeled temperature estimates.

[mwernimont]

@jenniferRapp look right?

[jenniferRapp]

I would like to retain the text that followed the "58,000 stream reach' sentence too, just insert the one new sentence about the real-time monitoring sites... @mwernimont

[mwernimont]

Readded: Water temperature is one factor of overall water quality due to its impact on aquatic habitat. Streams naturally have different temperatures depending on how big they are, where they are located, and the time of year. However, there are also external forces such as thermoelectric power plants that may change a stream's temperature and impact aquatic life or the usability of the stream for other purposes.

PR merged here https://github.com/usgs-makerspace/wbeep-viz/pull/604

[mwernimont]

add to legend label: "USGS monitoring station"

add to layer list "USGS temperature monitoring stations"

Increase zoom levels by 2 (or a reasonable zoom for dense urban areas)

update text for About this map.

On test for review

[mhines-usgs]

bumped these few up to circle radius 5 (current wbeep-test is size 4)

original USGS green! :usgs-usgs: with white outline

'paint': {
                'circle-color':  '#006633',
                'circle-stroke-color': 'white',
                'circle-stroke-width': 1,
                'circle-opacity': 0.5,
                'circle-radius': 5
            },

same USGS green with dark green outline instead

'paint': {
                'circle-color':  '#006633',
                'circle-stroke-color': '#014421',
                'circle-stroke-width': 1,
                'circle-opacity': 0.5,
                'circle-radius': 5
            },

dark gray with black outlines

'paint': {
                'circle-color':  '#2B2D2F',
                'circle-stroke-color': 'black',
                'circle-stroke-width': 1,
                'circle-opacity': 0.5,
                'circle-radius': 5
            },

nationally gets a bit dark, though.

some examples with smaller point as we currently have (4)

lighter gray, might not be enough contrast, but i kind of wanted to try some colors that blend into the background more so they're not as dominant/distracting when they appear

        'paint': {
                'circle-color':  '#aaaaaa',
                'circle-stroke-color': '#7e7e7e',
                'circle-stroke-width': 1,
                'circle-opacity': 0.5,
                'circle-radius': 4
            },

similar using gray colors, but more opacity:

'paint': {
                'circle-color':  '#aaaaaa',
                'circle-stroke-color': '#aaaaaa',
                'circle-stroke-width': 1,
                'circle-opacity': 0.2,
                'circle-radius': 4
            },

tiny black dot?

'paint': {
                'circle-color':  '#000000',
                'circle-stroke-color': '#000000',
                'circle-stroke-width': 1,
                'circle-opacity': 1,
                'circle-radius': 2
            },

[mhines-usgs]

any thoughts on any of those? I really don't have much of a preference, but am thinking we might consider turning them on when the user is slightly more zoomed in now that we give them more zooms to go through. if you want to see any other color ideas, let me know. i tried brighter colors like orange and yellow and they are too crazy at the national level. we should steer clear of red or blue, which is why i originally went with green. gray of a different hue seems ok to me. very undecided.

[mwernimont]

Guess I'm torn, as we aren't really trying to highlight the sites as the main focus on this app right? Its more just of a hey look extra stuff! So I don't really want them blocking the stream color views, which makes me more preferable to the ones where they don't show up as much. Or I could be wrong on the understanding of what we are trying to accomplish and we need the sites to be bold and easily noticeable. Either way I like the original or the gray.

[mhines-usgs]

yeah, it's bonus material, so shouldn't be too dominant or distracting from the stream segments.

[jenniferRapp]

Sweet. Thanks for all the updates. I like the USGS Green circles. I like the size too. can I demo this for the oNHM team tonight? My second favorite is the solid black circle. Third would be triangles pointing downward that are not filled. I think that is what Water Quality Watch uses.

I like the zoom level.

I like that we can turn on and off.

[mhines-usgs]

@jenniferRapp -- sure, do you mean the original green or green with green outline? and size 5 or 4? I'll make the changes and get them out to test if you want to demo for feedback tonight! thanks.

[jenniferRapp]

Green with dark green outline. I think maybe keep them at 4. @mhines-usgs

[jenniferRapp]

@mwernimont When I move around the map, I only have the "hand" panning functionality. As I hover over a Monitoring Site the hand does not switch to a pointed finger or arrow. Is that something we can add in the App?

[mwernimont]

Sure can.

[mwernimont]

PR: https://github.com/usgs-makerspace/wbeep-viz/pull/608

[mwernimont]

on Test

[jenniferRapp]

The modelers really liked the addition of the stream temp monitoring sites. There was discussion about symbology. We ended on the solid black dot so that it doesn't take away from the rivers as much. I wonder if we need a white circle around the black dot to make them seem discrete? Molly really liked the tiny black dot example above.

@mhines-usgs @mwernimont

[mhines-usgs]

tiny black dot with white outline at a more national view all the way zoomed in

will push the change up to test shortly and we can iterate from here!

[jenniferRapp]

Thank you, @mhines-usgs The black dots look good at national and regional scales. They are quite small when we zoom in to the reach scale. They are difficult to click too. I think we might need to bump it up a little in size. I like the white outline. Tough, I liked the green better, but this does create a view that focuses on the river colors.... I think when zoomed in the dot should be wider than the stream.

[mhines-usgs]

ok, I can see about having the dot change size when further zoomed in.

[mhines-usgs]

The station sizes now grow slightly with each zoom level increase -- up on test tier to check out.

If you think they're still too hard to click on, I can bump them up another level.

[jenniferRapp]

I think these look great. Should try on Mobile though!

[mhines-usgs]

I did also push this out to beta, (https://labs-beta.waterdata.usgs.gov/estimated-availability/index.html#/water-temperature) if you can try from your phone and see what you think. it's tight overall with all the headers/warnings/banners .. not sure if we need to consider shrinking the size of the pop up on mobile.

[mwernimont]

Example of popups with a 240px and 300px max width on my phone

[mwernimont]

Then we could just have the popups bigger on desktop like normal. Feel like 240px would fit most mobile screens pretty easily.

[mhines-usgs]

I think that's a good idea

[jenniferRapp]

240 looks good.