reverse-projection.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jVectorMap demo</title>
  5. <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
  6. <script src="assets/jquery-1.8.2.js"></script>
  7. <script src="../jquery-jvectormap.js"></script>
  8. <script src="../lib/jquery-mousewheel.js"></script>
  9. <script src="../src/jvectormap.js"></script>
  10. <script src="../src/abstract-element.js"></script>
  11. <script src="../src/abstract-canvas-element.js"></script>
  12. <script src="../src/abstract-shape-element.js"></script>
  13. <script src="../src/svg-element.js"></script>
  14. <script src="../src/svg-group-element.js"></script>
  15. <script src="../src/svg-canvas-element.js"></script>
  16. <script src="../src/svg-shape-element.js"></script>
  17. <script src="../src/svg-path-element.js"></script>
  18. <script src="../src/svg-circle-element.js"></script>
  19. <script src="../src/svg-image-element.js"></script>
  20. <script src="../src/svg-text-element.js"></script>
  21. <script src="../src/vml-element.js"></script>
  22. <script src="../src/vml-group-element.js"></script>
  23. <script src="../src/vml-canvas-element.js"></script>
  24. <script src="../src/vml-shape-element.js"></script>
  25. <script src="../src/vml-path-element.js"></script>
  26. <script src="../src/vml-circle-element.js"></script>
  27. <script src="../src/vml-image-element.js"></script>
  28. <script src="../src/map-object.js"></script>
  29. <script src="../src/region.js"></script>
  30. <script src="../src/marker.js"></script>
  31. <script src="../src/vector-canvas.js"></script>
  32. <script src="../src/simple-scale.js"></script>
  33. <script src="../src/ordinal-scale.js"></script>
  34. <script src="../src/numeric-scale.js"></script>
  35. <script src="../src/color-scale.js"></script>
  36. <script src="../src/legend.js"></script>
  37. <script src="../src/data-series.js"></script>
  38. <script src="../src/proj.js"></script>
  39. <script src="../src/map.js"></script>
  40. <script src="assets/jquery-jvectormap-us-lcc-en.js"></script>
  41. <script>
  42. $(function(){
  43. var map,
  44. markerIndex = 0,
  45. markersCoords = {};
  46. map = new jvm.Map({
  47. map: 'us_lcc_en',
  48. markerStyle: {
  49. initial: {
  50. fill: 'red'
  51. }
  52. },
  53. container: $('#map'),
  54. onMarkerTipShow: function(e, tip, code){
  55. map.tip.text(markersCoords[code].lat.toFixed(2)+' '+markersCoords[code].lng.toFixed(2));
  56. },
  57. onMarkerClick: function(e, code){
  58. map.removeMarkers([code]);
  59. map.tip.hide();
  60. }
  61. });
  62. $('#map').click(function(e){
  63. var x = e.pageX - map.container.offset().left,
  64. y = e.pageY - map.container.offset().top,
  65. latLng = map.pointToLatLng(x, y),
  66. targetCls = $(e.target).attr('class');
  67. if (latLng && (!targetCls || targetCls.indexOf('jvectormap-marker') === -1)) {
  68. markersCoords[markerIndex] = latLng;
  69. map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
  70. markerIndex += 1;
  71. }
  72. });
  73. $('#map').bind('');
  74. });
  75. </script>
  76. </head>
  77. <body>
  78. <div id="map" style="width: 900px; height: 600px"></div>
  79. </body>
  80. </html>