Pins Positioned Incorrectly

[senica]

Overview:

When the container map is not positioned at 0,0, the pins are wrongly placed on the map.
This also happens if there is content before the map on the page.

Acceptance Criteria:

Expected that pins to be centered on region

Steps to Duplicate ( required for detects ):

http://codepen.io/anon/pen/QEbWvQ
Use any of the examples, move the map anywhere else on the screen either by adding content before it or making absolutely positioned.

Relevant Documentation ( optional )

http://codepen.io/anon/pen/QEbWvQ

[manifestinteractive]

If you are changing the way CSS positioning is being used for the map, you simply need to update your CSS for the pins to reflect your CSS changes. The CSS we have is just for example usage, you are free, as you have done, to change the CSS however you see fit. It just means that you'll also need to make changes to address things that break with your CSS updates.

For your specific issue, simply adding the following CSS addresses the issue.

#vmap{
  /* This breaks it also */
  position: absolute;
  top: 100px;
  left: 40px;
}
.jqvmap-pin {
  position: fixed !important;
}

Forked codepen here: http://codepen.io/manifestinteractive/pen/mEJdxR

[manifestinteractive]

Checking out your PR now. Pins was something added by someone else, so it'd be nice to have this fixed for good. Had a few people report this, but CSS always worked as a solution. But I agree the code should be smart enough to position regardless of map container position.

[senica]

This issue is a larger internal positioning issue. Setting a fixed position on the pin would break it when you scroll the page. Then you have to handle that.

It seems better to just adjust the internal positioning to always be relative to the map itself. I haven't thoroughly tested this, but it seems to be working in my test case just fine. I've only tested on Chrome, btw.

[kalidema]

Please see the attached screenshot, I have the same problem.
Based on this screenshot I think, pins absolute position is not calculated based on the parent element size (width, height), but it refers to the body element. And the problem is that the parent element has relative position.

And also see if I remove header and sidebar.

[senica]

Check out the pull request: #239 maybe you can help test it out.

[mikalai-okun]

@manifestinteractive @senica
Did you guys resolve the issue?
I'm getting the same problems with the latest code
https://codepen.io/mikalai-okun/pen/ywZpoN

[senica]

Yes, I believe the pull request I submitted fixes the issue, but it's been a couple years since I've touched this. I believe this is the library being used here: https://www.everyschool.com/adopt-your-school/

[mikalai-okun]

I pulled the latest code from the repo and still see position issues, but wondering if there is anything to do with the map itself? I pulled another SVG and it a bit better, which is very strange to me, since position should not be dependant on svg.
I was able to make it look good by introducing adjustment coefficients, but its obviously very bad approach and not working on Zoom.

[senica]

Yeah, I remember it being a strange issue. That sucks. It doesn't look like anyone is maintaining this library anymore.

Maybe grab the code off that site from the link I sent, I know that works okay. Good luck!