Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pins or labels shifted to right and bottom on ukraine map #352

Open
igor-kremin opened this issue May 26, 2020 · 1 comment
Open

pins or labels shifted to right and bottom on ukraine map #352

igor-kremin opened this issue May 26, 2020 · 1 comment

Comments

@igor-kremin
Copy link

igor-kremin commented May 26, 2020

Lables shifted approximately to left 120px and bottom 55px
It can be reproduced with these settings.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.vmap.js"></script>
<script type="text/javascript" src="jquery.vmap.ukraine.js" charset="utf-8"></script>
<script>
jQuery(document).ready(function () {
jQuery('#vmap').css({width:window.innerWidth, height:window.innerHeight}).vectorMap({
map: 'ukraine_ua',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#fff',
borderColor: '#fff',
color:'#279fe0',
hoverColor: '#005bbb',
selectedColor: '#ffd500',
showLabels: true,
});
});
</script>

@igor-kremin
Copy link
Author

a little fix with shifted pins

I modified JQVMap.prototype.positionPins with
var shift_x = map.canvas.rootGroup.getBBox().x;
var shift_y = map.canvas.rootGroup.getBBox().y;
to middleX, and middleY

JQVMap.prototype.positionPins = function(){
  var map = this;
  var pins = this.container.find('.jqvmap-pin');
   var shift_x =  map.canvas.rootGroup.getBBox().x;
   var shift_y = map.canvas.rootGroup.getBBox().y;
  jQuery.each(pins, function(index, pinObj){
    pinObj = jQuery(pinObj);
    var countryId = map.getCountryId(pinObj.attr('for').toLowerCase());
    var countryObj = jQuery('#' + countryId);
    var bbox = countryObj[0].getBBox();
    var scale = map.scale;
    var rootCoords = map.canvas.rootGroup.getBoundingClientRect();
    var mapCoords = map.container[0].getBoundingClientRect();
    var coords = {
      left: rootCoords.left - mapCoords.left,
      top: rootCoords.top - mapCoords.top
    };
    var middleX = (bbox.x * scale) + ((bbox.width * scale) / 2) - shift_x * scale;
    var middleY = (bbox.y * scale) + ((bbox.height * scale) / 2) - shift_y * scale;
    pinObj.css({
      left: coords.left + middleX - (pinObj.width() / 2),
      top: coords.top + middleY - (pinObj.height() / 2)
    });
  });
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant