Advertisement
iqnaul

jsqvmap label position

Sep 13th, 2018
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.77 KB | None | 0 0
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <title>JQVMap - USA Map</title>
  6. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  7.  
  8. <!-- Mobile Specific Meta Tags -->
  9. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12.  
  13. <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
  14.  
  15. <style>
  16. html, body {
  17. padding: 0;
  18. margin: 0;
  19. width: 100%;
  20. height: 100%;
  21. }
  22. #vmap {
  23. width: 100%;
  24. height: 100%;
  25. background-color: red;
  26. -webkit-tap-highlight-color: rgba(0,0,0,0);
  27. }
  28.  
  29. /* Setup basic CSS for Label */
  30. .jqvmap-pin {
  31. font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
  32. cursor: default;
  33. pointer-events: none;
  34. }
  35.  
  36. /* Hide Whichever Labels you want */
  37.  
  38. #jqvmap1_ri_pin, #jqvmap1_dc_pin, #jqvmap1_de_pin, #jqvmap1_md_pin {
  39. display: none;
  40. }
  41.  
  42. /* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
  43.  
  44. #jqvmap1_ak_pin {
  45. margin-top: -2%;
  46. }
  47. #jqvmap1_ca_pin {
  48. margin-left: -2%;
  49. }
  50. #jqvmap1_ct_pin {
  51. margin-top: -0.25%;
  52. margin-left: -0.25%;
  53. }
  54. #jqvmap1_fl_pin {
  55. margin-left: 5%;
  56. }
  57. #jqvmap1_id_pin {
  58. margin-top: 3%;
  59. margin-left: -1%;
  60. }
  61. #jqvmap1_ky_pin {
  62. margin-left: 2%;
  63. }
  64. #jqvmap1_la_pin {
  65. margin-left: -2%;
  66. }
  67. #jqvmap1_mi_pin {
  68. margin-top: 4%;
  69. margin-left: 3%;
  70. }
  71. #jqvmap1_ma_pin {
  72. margin-top: -0.25%;
  73. }
  74. #jqvmap1_mn_pin {
  75. margin-top: 2%;
  76. margin-left: -2%;
  77. }
  78. #jqvmap1_nh_pin {
  79. margin-top: 1%;
  80. margin-left: -0.25%;
  81. }
  82. #jqvmap1_nj_pin {
  83. margin-top: 1%;
  84. }
  85. #jqvmap1_ok_pin {
  86. margin-left: 2%;
  87. }
  88. #jqvmap1_va_pin {
  89. margin-left: 2%;
  90. }
  91. #jqvmap1_wv_pin {
  92. margin-left: -1%;
  93. margin-top: 1%;
  94. }
  95.  
  96. /* Add responsibe support to resize labels for difference screen sizes */
  97.  
  98. @media only screen and (min-width: 320px) {
  99. .jqvmap-pin {
  100. font-size: 6px;
  101. }
  102. }
  103.  
  104. @media only screen and (min-width: 480px) {
  105. .jqvmap-pin {
  106. font-size: 8px;
  107. }
  108. }
  109.  
  110. @media only screen and (min-width: 640px) {
  111. .jqvmap-pin {
  112. font-size: 10px;
  113. }
  114. }
  115.  
  116. @media only screen and (min-width: 800px) {
  117. .jqvmap-pin {
  118. font-size: 12px;
  119. }
  120. }
  121.  
  122. @media only screen and (min-width: 1024px) {
  123. .jqvmap-pin {
  124. font-size: 14px;
  125. }
  126. }
  127. </style>
  128.  
  129. <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  130. <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
  131. <script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
  132.  
  133. <script>
  134. jQuery(document).ready(function () {
  135. jQuery('#vmap').vectorMap({
  136. map: 'usa_en',
  137. borderWidth: 0.25,
  138. showLabels: true
  139. });
  140. });
  141. </script>
  142. </head>
  143. <body>
  144. <div id="vmap"></div>
  145. </body>
  146. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement