OpenWaterFoundation / owf-app-infomapper-ng

Open Water Foundation InfoMapper web application for menu-driven maps and visualizations, using Angular
GNU General Public License v3.0
1 stars 2 forks source link

Highlight polygons similar to lines when moused over #257

Open smalers opened 4 years ago

smalers commented 4 years ago

It would be nice if polygon outlines highlighted in yellow when moused over, similar to line features. Some maps have a lot of polygons and it can be difficult to know what is being viewed. Once this is enabled, we can decide whether to keep it as the default. Then we can decide what to do with points.

smalers commented 4 years ago

Based on the initial implementation, I think we need to step back and evaluate this more. Here are some issues:

  1. It is distracting when the polygon highlight feature is on for some frame of reference polygons. For example, many of the Poudre maps include a layer for the Poudre Basin outline and when zoomed into the basin, this can be the "active" layer under the mouse much of the time. The goal is to always show a black basin outline, not be distracted with it highlighting in yellow all of the time.
  2. On maps where there is feature highlighting for rivers and basins, it is distracting when something is highlighting all the time. A user really has to focus on aiming over a river line or a basin because the highlighting flips back and forth with slight mouse movement. Remember also that mobile uses don't have fine mouse control. For example, see the Poudre Basin Information Basin Entities / Physical - Basins map. I am considering changing the Poudre Basin outline to a line feature rather than polygon, in which case the polygon highlight issue would be minimized, but then we lose some other potential benefits. I may try an experiment.
  3. Need to make sure that any highlighted feature is prominently shown, but when not highlighted, it returns to normal status in the layer, with rendering order according to the order in the legend.
  4. Maybe it is best to only highlight the outline given that a person might commonly position the mouse over a feature and want to see it mostly rendered in its normal way. Showing in the pale yellow makes it hard to see the extent of the polygon in some cases. Of course, this means getting the feature to show on top (but not remain on top when not highlighted).

Here are some ideas for the implementation:

  1. The defaults for whether a layer has highlighting turned on may need to be changed so that the behavior requires more formal configuration. For example, rather than highlight lines (or points, or any features) by default, require that a map configuration property be defined. In other words, we may need to make the default for all layers to NOT highlight and require that highlight be configured for a layer with a property.
  2. There is already a design in place for event handlers on hover and click. However, using this requires more configuration beyond setting one property and highlight is simple enough that requiring a full event handler may be overkill. We still need to implement custom attribute formatting on the hover and click popups, which may require defining event handlers. Or, we can use default event handlers that are automatically defined when a simpler property (like the next item) is defined.
  3. Maybe it would be best to have a simple property on the layer view such as highlightEnabled=true|false that when specified enables highlighting for the layer. We could go back and update map configurations to turn this on for stream features, which is the main layer using that feature at this time. Of course, then there is the question of how to further configure the hover, such as color/fillColor/opacity/fillOpacity/weight. Using hoverEnabled=true could default to yellow highlight as we have done. Does configuring the other properties require configuring an event handler with additional properties? Maybe we can get away with highlightEnabled for now to turn on a default hover event handler behavior?
  4. There may still be a requirement to have sticky selections at some point like in SNODAS where clicking on a feature selects it for additional tool operation. These could be a set of "select" properties such as color. Right now we don't have a requirement for this but I could see that being needed. Whereas the SNODAS tools application requires selecting a basin and then using the buttons in the control panel to view graphs, for InfoMapper we have implemented popup graph buttons, which is a more general design.
  5. Maybe allowing editing some of these properties at run time using a UI state setting makes sense. For example, configure polygon layers in maps to by default not highlight. Then select the tool to turn on highlighting to enable that at run time. Is the tool an icon near each layer view, or a tool on the left side of the legend? This needs to be tested more. If cookies are enabled, they could also track whether the tool is enabled.

I'm leaning toward defaulting a layer view's highlightEnabled property to false, and if set to true in a map configuration it would turn on the default yellow highlighting. Therefore I would need to update map configurations to set the highlightEnabled=true for stream reaches and other maps where I want that feature turned on. This is not too big of a deal. Setting the same property for a polygon layer would turn on highlighting similarly. For maps that have stream and basins, I would configure the streams to highlght but the polygons to not highlight - then we need a solution for users to click on something at runtime to turn on highlighting. Is it an icon next to the layer (like the info) or a tool on the far left of the legend that toggles the behavior on for all layers? This needs to be discussed and perhaps prototyped. We should be reviewing QGIS, ArcGIS online, and other tools. I would turn polygon highlighting on for some maps, such as counties so we could test that .

Nightsphere commented 4 years ago

The new push has been merged with master. A geoLayerView now has the option to add a highlightEnabled property, that when set to true will highlight a line with the color yellow, and a polygon with the fillColor yellow and fillOpacity 0.1.