reverse-projection.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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="../jquery-mousewheel.js"></script>
  9. <script src="../lib/jvectormap.js"></script>
  10. <script src="../lib/abstract-element.js"></script>
  11. <script src="../lib/abstract-canvas-element.js"></script>
  12. <script src="../lib/abstract-shape-element.js"></script>
  13. <script src="../lib/svg-element.js"></script>
  14. <script src="../lib/svg-group-element.js"></script>
  15. <script src="../lib/svg-canvas-element.js"></script>
  16. <script src="../lib/svg-shape-element.js"></script>
  17. <script src="../lib/svg-path-element.js"></script>
  18. <script src="../lib/svg-circle-element.js"></script>
  19. <script src="../lib/vml-element.js"></script>
  20. <script src="../lib/vml-group-element.js"></script>
  21. <script src="../lib/vml-canvas-element.js"></script>
  22. <script src="../lib/vml-shape-element.js"></script>
  23. <script src="../lib/vml-path-element.js"></script>
  24. <script src="../lib/vml-circle-element.js"></script>
  25. <script src="../lib/vector-canvas.js"></script>
  26. <script src="../lib/simple-scale.js"></script>
  27. <script src="../lib/numeric-scale.js"></script>
  28. <script src="../lib/ordinal-scale.js"></script>
  29. <script src="../lib/color-scale.js"></script>
  30. <script src="../lib/data-series.js"></script>
  31. <script src="../lib/proj.js"></script>
  32. <script src="../lib/world-map.js"></script>
  33. <script src="assets/jquery-jvectormap-us-lcc-en.js"></script>
  34. <script>
  35. $(function(){
  36. var map,
  37. markerIndex = 0,
  38. markersCoords = {};
  39. map = new jvm.WorldMap({
  40. map: 'us_lcc_en',
  41. markerStyle: {
  42. initial: {
  43. fill: 'red'
  44. }
  45. },
  46. container: $('#map'),
  47. onMarkerLabelShow: function(e, label, code){
  48. map.label.text(markersCoords[code].lat.toFixed(2)+' '+markersCoords[code].lng.toFixed(2));
  49. },
  50. onMarkerClick: function(e, code){
  51. map.removeMarkers([code]);
  52. map.label.hide();
  53. }
  54. });
  55. $('#map').click(function(e){
  56. var latLng = map.pointToLatLng(e.offsetX, e.offsetY),
  57. targetCls = $(e.target).attr('class');
  58. if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
  59. markersCoords[markerIndex] = latLng;
  60. map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
  61. markerIndex += 1;
  62. }
  63. });
  64. $('#map').bind('');
  65. });
  66. </script>
  67. </head>
  68. <body>
  69. <div id="map" style="width: 900px; height: 600px"></div>
  70. </body>
  71. </html>