Fixing marker placement #1695
Open
Fixing marker placement #1695
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Most of the marker placement has been a little off since the switch to leaflet. The spawn marker being the exception. I saw the spawn marker had an icon size and icon anchor defined, so I initially tried adding those attributes to the other icons. That didn't work becasue the spawn marker uses leaflet's icon type and the other markers use divIcon, so these attributes move around the div the icon image is parked in, not the icon image, and the results were still whack. Next I tried just making the other marker icons 'icons' instead of 'divIcons' since the icons seem to work. That was all good unless there were markers packed together. Then the results were still a bit off. So, I borrowed the style leaflet applies to the images when rendering 'icon's, and stuffed it into the image that's in the marker's divIcon. That got the icon right at the corner of the poi closest to the observer. I tried bumping the margin back a little more to get the image into the center of the block, but within the div, any margin less than -1 * icon_height just behaves like margin -1 * icon_height (at least that's how it is in firefox because html styling is voodoo). So, that's why there's an iconAnchor too -- it makes the bottom of the icon more middle-of-the-block. I put the popup anchor a bit above the top of the icon becasue when it opens on top of the icon it annoys me. Caveats: This code assumes icons are 32x37 like the ones overviewer ships with. Other sized icons (like the player avatar icons generated by https://overviewer.org/avatar/XYZ) are still a little off. I'm not sure if leaflet generates different style code for firefox and other browsers, so the style code I lifted could be firefox-specific leaflet generated stuff, and not safe pass on to non-firefox browsers. Random: All in all, this is another example of, after working for hours, the commit is like 10 lines, and I'm like, "wow, really, that's where half my day went..." The sad thing is, most of the POIs I was trying to update are still wrong becasue my world has changed since last running aronud collecting coordinates for them.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Most of the marker placement has been a little off since the switch to leaflet. The spawn marker being the exception.
I saw the spawn marker had an icon size and icon anchor defined, so I initially tried adding those attributes to the other icons. That didn't work becasue the spawn marker uses leaflet's icon type and the other markers use divIcon, so these attributes move around the div the icon image is parked in, not the icon image, and the results were still whack.
Next I tried just making the other marker icons 'icons' instead of 'divIcons' since the icons seem to work. That was all good unless there were markers packed together. Then the results were still a bit off.
So, I borrowed the style leaflet applies to the images when rendering 'icon's, and stuffed it into the image that's in the marker's divIcon. That got the icon right at the corner of the poi closest to the observer. I tried bumping the margin back a little more to get the image into the center of the block, but within the div, any margin less than -1 * icon_height just behaves like margin -1 * icon_height (at least that's how it is in firefox because html styling is voodoo). So, that's why there's an iconAnchor too -- it makes the bottom of the icon more middle-of-the-block.
I put the popup anchor a bit above the top of the icon becasue when it opens on top of the icon it annoys me.
Caveats:
This code assumes icons are 32x37 like the ones overviewer ships with. Other sized icons (like the player avatar icons generated by https://overviewer.org/avatar/XYZ) are still a little off.
I'm not sure if leaflet generates different style code for firefox and other browsers, so the style code I lifted could be firefox-specific leaflet generated stuff, and not safe pass on to non-firefox browsers.
Random:
All in all, this is another example of, after working for hours, the commit is like 10 lines, and I'm like, "wow, really, that's where half my day went..." The sad thing is, most of the POIs I was trying to update are still wrong becasue my world has changed since last running aronud collecting coordinates for them.