Marker and route styling
Closed this issue · 8 comments
Markers should be more elongated and/or pointed. The route lines should be thinner and more transparent.
In the old maps version it looked like this:
currently it looks like this:
I already made the path a bit thinner and transparent here: 799d7e2
I also changed the cursor to grabbing when we drag a marker in the same commit. We did the same for the old maps client and I think it makes it more clear where the position will be. Otherwise it is unclear if the position will be at the tip of the marker or at the 'finger' the cursor is pointing to.
Regarding the marker shapes, I did a quick try here: 72681af. I just copied the marker path to here: https://yqnn.github.io/svg-path-editor/ changed the shape (free hand) and adjusted the viewBox of the svg element (just guessing, no idea tbh). I also had to move the position of the text for the via points. But I think it already looks better :D Looking at this route
vs.
Looks better, indeed! Thank you.
A minor offset is noticable here (every time the red marker):
But at least the vertical offset is there for the old version too. So not related to this change.
Ah yes, this probably depends on the viewBox parameter. I'm not sure how to determine it from the svg path. But in any case it should affect the green marker just as it does affect the red one?!
But in any case it should affect the green marker just as it does affect the red one?!
Sorry, this was confusing. I always used the red marker to refer to a single color but the offset should be wrong for both, yes.
So the offset on the map is entirely determined by the svg viewBox? Or is there some offset in the code?
I think we set the 'position' of the marker to the center of the bottom line of the viewBox here:
So the question becomes whether the tip of the marker path is located at the center of the bottom line of the viewBox. If it isn't the marker will be 'moving' when we zoom in or out. I tried to fix it here: 4d9f450
👍 Let's merge this :)
Btw I copied the svg to https://www.svgviewer.dev/ where there is a 'Remove Padding' button that seems to trim the view box to the size of the path.