Icon Alignment Off #39

Closed
chrishough opened this Issue Dec 18, 2015 · 10 comments

Projects

None yet

3 participants

@chrishough

screen shot 2015-12-17 at 7 33 48 pm

I have encountered an odd issue with icon alignment. I can adjust it here:

// Implement draw
MarkerLabel.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.get('position'));
    var div = this.div;

    this.div.innerHTML = this.get('text').toString();

    div.style.zIndex = this.get('zIndex'); // Allow label to overlay marker
    div.style.position = 'absolute';
    div.style.display = 'block';
    div.style.left = (position.x - (div.offsetWidth / 2)) + 'px';
    div.style.top = (position.y - div.offsetHeight) + 'px';

};

but I know that is not right. Thoughts?

@fvgs
Contributor
fvgs commented Dec 18, 2015

Are you using version 3.0.1? Does this always occur? If not, can you identify any correlation between the bug occurring and the caching of the map-icons font?

@chrishough

I am using master which looks like 3.0.0. Has 3.0.1 been published?

@chrishough

Also, yes, it always occurs, however, I can not seem to find what is causing it.

@chrishough

screen shot 2015-12-17 at 8 48 26 pm

screen shot 2015-12-17 at 8 48 39 pm

Safari and Firefox are both pretty bad...
@fvgs
Contributor
fvgs commented Dec 18, 2015

Based on the information provided so far, these symptoms match the bug I recently addressed in #35. If it's always occurring, that indicates the map-icons font is not being cached by your browser (this doesn't really matter).

This bug should be fixed as of 3.0.1. The current tagged release is 3.0.0, so if you're using bower, you should make sure to install the master branch.

@chrishough

I installed master, however, I checked out your PR and did not see what was changed. In fact I copied the diff and I am still seeing the issue. What did you change to fix it?

@chrishough

In order to fix this I added the following hidden preloader before the map call:

<div class="font_preload" style="opacity: 0"><span style="font-family: map-icons;"></span></div>

Noted here: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts

@chrishough chrishough closed this Dec 18, 2015
@fvgs fvgs added a commit to fvgs/map-icons that referenced this issue Dec 18, 2015
@fvgs fvgs Fix regression of bug offsetting marker icon labels #39 db7632d
@fvgs
Contributor
fvgs commented Dec 18, 2015

I looked into this and the bug had regressed for me as well. The original fix was to add a width property to the .map-icon-label class as seen in #36. The fix now was to add an additional display: block property to the same class so the width would take effect. I also increased the width, though that change was in the interest of future-proofing.

The best explanation I have for the regression is that the Google Maps API recently changed so that marker labels would no longer be block elements.

@chrishough With this fix, you shouldn't need to force-preload the font.

@chrishough

That worked! Thanks @fvargas

@b0jan
b0jan commented Mar 16, 2016

For me the fix was to add absolute position property to .map-icon-label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment