<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Maps</title>
<link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
<style>
ul {
padding: 0;
list-style: none;
}
</style>
<script src="assets/jquery-1.8.2.js"></script>
<script src="../jquery-jvectormap.js"></script>
<script src="../jquery-mousewheel.js"></script>
<script src="../lib/jvectormap.js"></script>
<script src="../lib/abstract-element.js"></script>
<script src="../lib/abstract-canvas-element.js"></script>
<script src="../lib/abstract-shape-element.js"></script>
<script src="../lib/svg-element.js"></script>
<script src="../lib/svg-group-element.js"></script>
<script src="../lib/svg-canvas-element.js"></script>
<script src="../lib/svg-shape-element.js"></script>
<script src="../lib/svg-path-element.js"></script>
<script src="../lib/svg-circle-element.js"></script>
<script src="../lib/vml-element.js"></script>
<script src="../lib/vml-group-element.js"></script>
<script src="../lib/vml-canvas-element.js"></script>
<script src="../lib/vml-shape-element.js"></script>
<script src="../lib/vml-path-element.js"></script>
<script src="../lib/vml-circle-element.js"></script>
<script src="../lib/vector-canvas.js"></script>
<script src="../lib/simple-scale.js"></script>
<script src="../lib/ordinal-scale.js"></script>
<script src="../lib/numeric-scale.js"></script>
<script src="../lib/color-scale.js"></script>
<script src="../lib/data-series.js"></script>
<script src="../lib/proj.js"></script>
<script src="../lib/world-map.js"></script>
<script src="assets/jquery-jvectormap-us-aea-en.js"></script>
<script>
$(function(){
var markers = [
[61.18, -149.53],
[21.18, -157.49],
{latLng: [40.66, -73.56], name: 'New York City', style: {r: 8, fill: 'yellow'}},
{latLng: [41.52, -87.37], style: {fill: 'red', r: 10}}
],
values1 = [1, 2, 3, 4],
values2 = [1, 2, 3, 4];
var map = new jvm.WorldMap({
container: $('.map'),
map: 'us_aea_en',
markers: markers,
series: {
markers: [{
attribute: 'fill',
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
values: values1
},{
attribute: 'r',
scale: [5, 20],
normalizeFunction: 'polynomial',
values: values2
}],
regions: [{
scale: {
red: '#ff0000',
blue: '#00ff00'
},
attribute: 'fill',
normalizeFunction: 'polynomial',
values: {
"US-KS": 'red',
"US-MO": 'red',
"US-IA": 'blue',
"US-NE": 'blue'
}
},{
values: {
"US-NY": 'blue',
"US-FL": 'blue'
},
attribute: 'fill'
}]
},
regionsSelectable: true,
markersSelectable: true,
markersSelectableOne: true,
selectedRegions: JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ),
selectedMarkers: JSON.parse( window.localStorage.getItem('jvectormap-selected-markers') || '[]' ),
onMarkerLabelShow: function(event, label, index){
label.html(label.html()+' (modified marker)');
},
onMarkerOver: function(event, index){
console.log('marker-over', index);
},
onMarkerOut: function(event, index){
console.log('marker-out', index);
},
onMarkerClick: function(event, index){
console.log('marker-click', index);
},
onMarkerSelected: function(event, index, isSelected, selectedMarkers){
console.log('marker-select', index, isSelected, selectedMarkers);
if (window.localStorage) {
window.localStorage.setItem(
'jvectormap-selected-markers',
JSON.stringify(selectedMarkers)
);
}
},
onRegionLabelShow: function(event, label, code){
label.html(label.html()+' (modified)');
},
onRegionOver: function(event, code){
console.log('region-over', code, map.getRegionName(code));
},
onRegionOut: function(event, code){
console.log('region-out', code);
},
onRegionClick: function(event, code){
console.log('region-click', code);
},
onRegionSelected: function(event, code, isSelected, selectedRegions){
console.log('region-select', code, isSelected, selectedRegions);
if (window.localStorage) {
window.localStorage.setItem(
'jvectormap-selected-regions',
JSON.stringify(selectedRegions)
);
}
},
onViewportChange: function(e, scale, transX, transY){
console.log('viewportChange', scale, transX, transY);
}
});
$('.list-markers :checkbox').change(function(){
var index = $(this).closest('li').attr('data-marker-index');
if ($(this).prop('checked')) {
map.addMarker( index, markers[index], [values1[index], values2[index]] );
} else {
map.removeMarkers( [index] );
}
});
$('.button-add-all').click(function(){
$('.list-markers :checkbox').prop('checked', true);
map.addMarkers(markers, [values1, values2]);
});
$('.button-remove-all').click(function(){
$('.list-markers :checkbox').prop('checked', false);
map.removeAllMarkers();
});
$('.button-clear-selected-regions').click(function(){
map.clearSelectedRegions();
});
$('.button-clear-selected-markers').click(function(){
map.clearSelectedMarkers();
});
$('.button-remove-map').click(function(){
map.remove();
});
$('.button-change-values').click(function(){
map.series.regions[1].clear();
map.series.regions[1].setValues({
"US-TX": "black",
"US-CA": "black"
});
});
$('.button-reset-map').click(function(){
map.reset();
});
});
</script>
</head>
<body>
<div class="map" style="width: 800px; height: 500px"></div>
<ul class="list-markers">
<li data-marker-index="0"><label><input checked type="checkbox"/> Marker 1</label></li>
<li data-marker-index="1"><label><input checked type="checkbox"/> Marker 2</label></li>
<li data-marker-index="2"><label><input checked type="checkbox"/> Marker 3</label></li>
<li data-marker-index="3"><label><input checked type="checkbox"/> Marker 4</label></li>
</ul>
<input type="button" value="Add all" class="button-add-all"/>
<input type="button" value="Remove all" class="button-remove-all"/>
<input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
<input type="button" value="Clear selected markers" class="button-clear-selected-markers"/>
<input type="button" value="Remove map" class="button-remove-map"/>
<input type="button" value="Change values" class="button-change-values"/>
<input type="button" value="Reset map" class="button-reset-map"/>
</body>
</html>