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