highlight selected feature #1359

jschleic · 2023-10-05T19:40:23Z

I'd like to suggest some more interactive highlighting of paths. What do you think about:

Bildschirmaufzeichnung.vom.2023-10-05.21-19-23.webm

A very simple implementation uses the popup events to increase opacity and weight.
On maps with multiple lines one can see much easier, where the line starts and ends.
This implementation also highlights the lines of polygons.

Do you think, such a feature is feasible?
Should parameters be configurable?

when opening a popup increase opacity and weight. In maps with multiple lines one can see much easier, where the line starts and ends.

yohanboniface · 2023-10-05T21:25:36Z

Nice proposal, thanks! 👍

I don't think we need this to be configurable at this stage.

I wonder if we can release this without having an highlight for markers to (remember that the "popup" can be a side panel, o no directly associated to the related feature), and in this case how to deal with those, maybe touching the shadow ? I guess the answer will be different for each type of marker (may be done in CSS, after adding a class in JS).

For polygons, maybe also increase fill opacity ? In some situations polygons may have no border.

cc @Aurelie-Jallut @davidbgk

cf #334

Aurelie-Jallut · 2023-10-06T08:58:22Z

In consultation I want to differentiate the point / zone / line activated.e

enlarge markers
Add contour to line
Add contour to polygon (and possibly increase opacity)

yohanboniface · 2023-10-06T09:04:05Z

In consultation I want to differentiate the point / zone / line activated.e

That's the point of this proposal :)

enlarge markers

That's an option, agreed

Add contour to line

Are you then excluding the current proposal, which enlarge the line when selected ?

Aurelie-Jallut · 2023-10-06T09:08:35Z

I was under the impression that only the opacity changed, but yes, it's a good idea to make the line bigger, which would mean putting an outline in the same color.

jschleic · 2023-10-06T20:29:58Z

Thank you very much for the quick feedback!

I don't see how an outline in a different color around a path could be implemented. Except adding the same path again behind the first one.

Regarding markers: Does the following mock-up go into the direction you were thinking of @Aurelie-Jallut ?

Bildschirmaufzeichnung.vom.2023-10-06.22-28-10.webm

I will continue on this as time allows...

yohanboniface · 2023-10-06T20:43:26Z

I don't see how an outline in a different color around a path could be implemented. Except adding the same path again behind the first one.

Increasing weight is fine!

Regarding markers: Does the following mock-up go into the direction you were thinking of @Aurelie-Jallut ?

Sounds good to me! But usually markers have full opacity, so I think we'll need increasing the shape for all, or maybe playing with the shadow (bigger / changing color / moving it away from the marker so it appears like raised…)?

Thanks again for your work, much appreciated :)

add .umap-icon-active class for currently selected marker icon. CSS styles override the marker styles to display * in the foreground * with full opacity * with larger sizes where possible (ball and circle)

to also highlight path and markers when using the side panel. Therefore we duplicate the event code from the base class.

sqrt gives larger increase for low opacities like 0.2 while preserving some (tiny) shine-through for large values like 0.8 and is limited to the desired range of (0,1]

umap/static/umap/js/umap.features.js

davidbgk · 2023-10-10T20:14:06Z

Sounds good to me! But usually markers have full opacity, so I think we'll need increasing the shape for all, or maybe playing with the shadow (bigger / changing color / moving it away from the marker so it appears like raised…)?

Maybe we could reduce the opacity of all other paths/points when only one is selected/hovered to make it stand out?

yohanboniface · 2023-10-10T20:22:31Z

Maybe we could reduce the opacity of all other paths/points when only one is selected/hovered to make it stand out?

This can be a lot of paths/points, not sure we want this extra computation (and DOM change because of the redraw) :/

@yohanboniface

thanks for the review to @yohanboniface

jschleic · 2023-10-19T13:12:04Z

One issue is still open:

After adding a marker in edit mode and switching back to display mode the marker highlight doesn't work any longer. The highlight callback is called and the css class umap-icon-active is added in the debugger but not in DOM?! Any ideas @yohanboniface ?

options.icon pointer is invalid after hide() show() cycle.

jschleic · 2023-10-19T19:01:01Z

After adding a marker in edit mode and switching back to display mode the marker highlight doesn't work any longer.

The culprit seems to be this.map.removeLayer(this.layer) triggered during save():

umap/umap/static/umap/js/umap.layer.js

Line 1525 in 219b3e1

this.redraw() // Needed for reordering features

A manual hide() show() cycle in the layer box has the same effect.

Thus I have to keep the highlight callback in the marker class (cf. 88746d5)

therefore setting opacity of the example path to 0.6

yohanboniface · 2023-10-20T12:08:25Z

Thanks a lot! I'm travelling now, I'll have a look during the week-end :)

yohanboniface · 2023-10-22T08:39:41Z

So, I've had a look and I'm fine with the logic :)

I'm not totally convinced by the rendering part. I'm making a summary of what's actually implemented in the PR, so maybe @Aurelie-Jallut can have an overview and help us on the finishing part :)

Path:

Sounds good to me!

Screencast.from.2023-10-21.12-20-05.webm

Polygon:

Sounds good to me!

Screencast.from.2023-10-21.12-20-28.webm

Circle:

Sounds good to me!

Screencast.from.2023-10-21.12-20-46.webm

Default:

Shadow becomes white, which does not work on this white background.

Screencast.from.2023-10-21.12-23-33.webm

I've tried to play with multiple shadow, but anything I can do is damn ugly, eg.:

Screencast.from.2023-10-22.10-37-05.webm

Drop:

Same white shadow issue.

Screencast.from.2023-10-21.12-22-35.webm

Pin:

The ball grows but it becomes a bit square. If we get to a good working shadow highlight for Default and Drop, maybe we could use the same here, and there will be no need for increasing the ball size ?

Screencast.from.2023-10-21.12-21-47.webm

fixup 836c17f

jschleic · 2023-10-22T18:57:30Z

Square'ish Pin radius fixed, thanks!

What about following the "larger"-strategy for Drop and Default as well? That would look like:

Bildschirmaufzeichnung.vom.2023-10-22.20-42-32.webm

For Default and Drop markers I would suggest to change to svg path from the composite container+arrow anyways. Semi-opaque markers look composite with circle+arrow. An svg would then allow an easier outline border around the marker as @Aurelie-Jallut suggested in #1359 (comment) - but that's imho a separate PR.

Another option is to decrease the default marker opacity. To make highlighted markers with opacity: 1 stand out. That would of course only work for new maps.

P.S. Are there possibly old maps out there without any opacity set (neither in the map options nor the path)?? The test case data has such null polygon opacity resulting in an invisible polygon on click with this PR applied - is that an issue we should add an if(opacity)?

yohanboniface · 2023-10-25T08:57:38Z

What about following the "larger"-strategy for Drop and Default as well?

Makes sense! Let me check with Aurelie before putting more energy. Hopefully this Friday (we had a big event last week, that explains our time for synchronizing and giving you useful feedback, and I'm sorry for that).

For Default and Drop markers I would suggest to change to svg path from the composite container+arrow anyways.

Why not, but a few questions:

could we add a shadow on a path ?
could we easily integrate the pictogram/letter ?
what about rendering performance (this HTML/CSS version has quite poor performance, and we should makes this better at some point, hence my question :) )

P.S. Are there possibly old maps out there without any opacity set

Honestly I'm not sure about this point, so I'd say let's be more defensive just in case :)

Thanks again for your work!

yohanboniface · 2023-10-27T13:02:38Z

@jschleic I just discussed with Aurélie and she suggests we should use same pattern for all, which is increasing the shape, so:

path: increase the weight and opacity, as you did
polygon: same
circle: same
pin: increase the ball and the shadow (but without changing the colour)
drop: increase the shape, and shadow, and opacity when it's not already 1
default: same

Does that make sense for you ? Do you still have time and energy to continue the work ? I think we are really close the final point, but feel free!

Thanks again :)

jschleic · 2023-10-27T13:48:46Z

Sounds good! I will finish that next week.

yohanboniface · 2023-10-31T18:46:39Z

to change to svg path from the composite container+arrow anyways.

Just found this, so pasting it here for later use: http://iatkin.github.io/leaflet-svgicon/

* drop and div marker increased to 36px size * adjust drop arrow accordingly * black box-shadow with increased spread

'null' is not a sensible default

jschleic · 2023-11-01T16:25:26Z

umap/static/umap/js/umap.core.js

@@ -161,7 +161,7 @@ L.Util.detectFileType = (f) => {
 }

 L.Util.usableOption = (options, option) =>
-  options[option] !== undefined && options[option] !== ''


I had to exclude null here, to make getDynamicOption() return a default number. I tested with the test case data from _pre.js. Is there any other special meaning for null, that should be usable?

Yes, in all ternary fields, like https://github.com/umap-project/umap/blob/master/umap/static/umap/js/umap.forms.js#L796-L802

Right - thanks! Then I think null opacity as used in the testcase is not an actually valid setting used in real maps??! See 34bb2d6 for another try to eliminate that special case.

yohanboniface · 2023-11-04T07:00:06Z

Another discussion about using SVG markers that may be of interest: Leaflet/Leaflet#8766

partly revert 952385 - since ´null´ is actually used in ternary fields. Remove null opacity from the testcase. It should be either unset or a numeric value.

yohanboniface · 2023-11-15T15:06:31Z

Very cool work, thanks a lot! 🚀

This can happen in a situation where: - a layer as zoom limits - we click on a feature, which opens a popup - then zoom over the layer's limit (with scroll or keyboard, not keyboard, in order to not close the popup) - then click in anywhere in the map, which will close the popup Since the highlight of features on click (cf #1359), we redraw them on popupclose, which explains the bug described above. fix #1575

dkbg · 2024-02-29T20:42:21Z

Thanks for implementing the feature. One issue I've noticed is that it can often be difficult to differentiate between highlighted and non-highlighted markers. I came here searching for whether this had been implemented, I thought that the version of uMap I was using didn't have the feature, not realising that the highlighting feature was there, just not at all obvious.

Here's a screenshot for reference. One of these markers is highlighted, but it isn't obvious which one.

jschleic · 2024-03-16T21:38:52Z

@dkbg Thanks for your feedback!

As discussed above, adding a colored countour, would imho require implementation of svg markers. That would be a rather big efford to re-implement all the marker classes. Any help welcome :-)

For now you could try to reduce the default icon opacity to something like 0.6 - that makes the active marker stand out like in the video above: #1359 (comment)

clwacker · 2024-03-17T09:33:52Z

Thanks for the tip.
But changing the opacity has little effect when you choose circles to represent the points on the map.

highlight selected path

7696203

when opening a popup increase opacity and weight. In maps with multiple lines one can see much easier, where the line starts and ends.

jschleic added 2 commits October 10, 2023 10:29

highlight markers

3594bc2

add .umap-icon-active class for currently selected marker icon. CSS styles override the marker styles to display * in the foreground * with full opacity * with larger sizes where possible (ball and circle)

fire events from Popup Panel

836c17f

to also highlight path and markers when using the side panel. Therefore we duplicate the event code from the base class.

jschleic marked this pull request as draft October 10, 2023 08:34

highlight: increase fillOpacity for polygons

9ef0951

sqrt gives larger increase for low opacities like 0.2 while preserving some (tiny) shine-through for large values like 0.8 and is limited to the desired range of (0,1]

yohanboniface reviewed Oct 10, 2023

View reviewed changes

umap/static/umap/js/umap.features.js Outdated Show resolved Hide resolved

jschleic added 2 commits October 17, 2023 20:55

simply call _redraw to reset style

65ba1cd

thanks for the review to @yohanboniface

add testcase for marker highlight

5778c4f

move higlight() into Marker class

88746d5

options.icon pointer is invalid after hide() show() cycle.

jschleic added 2 commits October 19, 2023 21:08

add test case for 88746d5

7d6830c

add test case for path higlight

b149a69

therefore setting opacity of the example path to 0.6

jschleic marked this pull request as ready for review October 19, 2023 19:34

jschleic added 2 commits October 22, 2023 19:49

pin marker: fix ball 'square'ish

86b27ce

prettier.js

9b22cb4

fixup 836c17f

jschleic added 2 commits November 1, 2023 14:32

incorporate review feedback for markers

af969eb

* drop and div marker increased to 36px size * adjust drop arrow accordingly * black box-shadow with increased spread

default fill-opacity for polygons

952385b

'null' is not a sensible default

jschleic commented Nov 1, 2023

View reviewed changes

fix null opacity

34bb2d6

partly revert 952385 - since ´null´ is actually used in ternary fields. Remove null opacity from the testcase. It should be either unset or a numeric value.

yohanboniface changed the title ~~highlight selected path~~ highlight selected feature Nov 15, 2023

Merge branch 'master' into highlight-style-for-selected-lines

91ea6ac

yohanboniface merged commit 4b8b0b9 into umap-project:master Nov 15, 2023

yohanboniface mentioned this pull request Nov 27, 2023

[wishlist] highlight active marker / polygon #334

Closed

yohanboniface mentioned this pull request Feb 4, 2024

fix: do not try to reset tooltip of feature not on map #1576

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

highlight selected feature #1359

highlight selected feature #1359

jschleic commented Oct 5, 2023

yohanboniface commented Oct 5, 2023

Aurelie-Jallut commented Oct 6, 2023

yohanboniface commented Oct 6, 2023

Aurelie-Jallut commented Oct 6, 2023

jschleic commented Oct 6, 2023

yohanboniface commented Oct 6, 2023

davidbgk commented Oct 10, 2023

yohanboniface commented Oct 10, 2023 •

edited

jschleic commented Oct 19, 2023

jschleic commented Oct 19, 2023 •

edited

yohanboniface commented Oct 20, 2023

yohanboniface commented Oct 22, 2023

jschleic commented Oct 22, 2023

yohanboniface commented Oct 25, 2023

yohanboniface commented Oct 27, 2023

jschleic commented Oct 27, 2023 via email

yohanboniface commented Oct 31, 2023

jschleic Nov 1, 2023 •

edited

yohanboniface Nov 3, 2023

jschleic Nov 14, 2023 •

edited

yohanboniface commented Nov 4, 2023

yohanboniface commented Nov 15, 2023

dkbg commented Feb 29, 2024

jschleic commented Mar 16, 2024

clwacker commented Mar 17, 2024

highlight selected feature #1359

highlight selected feature #1359

Conversation

jschleic commented Oct 5, 2023

yohanboniface commented Oct 5, 2023

Aurelie-Jallut commented Oct 6, 2023

yohanboniface commented Oct 6, 2023

Aurelie-Jallut commented Oct 6, 2023

jschleic commented Oct 6, 2023

yohanboniface commented Oct 6, 2023

davidbgk commented Oct 10, 2023

yohanboniface commented Oct 10, 2023 • edited

jschleic commented Oct 19, 2023

jschleic commented Oct 19, 2023 • edited

yohanboniface commented Oct 20, 2023

yohanboniface commented Oct 22, 2023

jschleic commented Oct 22, 2023

yohanboniface commented Oct 25, 2023

yohanboniface commented Oct 27, 2023

jschleic commented Oct 27, 2023 via email

yohanboniface commented Oct 31, 2023

jschleic Nov 1, 2023 • edited

Choose a reason for hiding this comment

yohanboniface Nov 3, 2023

Choose a reason for hiding this comment

jschleic Nov 14, 2023 • edited

Choose a reason for hiding this comment

yohanboniface commented Nov 4, 2023

yohanboniface commented Nov 15, 2023

dkbg commented Feb 29, 2024

jschleic commented Mar 16, 2024

clwacker commented Mar 17, 2024

yohanboniface commented Oct 10, 2023 •

edited

jschleic commented Oct 19, 2023 •

edited

jschleic Nov 1, 2023 •

edited

jschleic Nov 14, 2023 •

edited