Change jVectorMap to JQVMap
This commit is contained in:
christianesperar
parent
dfe80aab38
commit
c103facfdb
|
|
@ -73,7 +73,8 @@
|
|||
"jszip": "Stuk/jszip#v2.6.0",
|
||||
"echarts": "^3.1.7",
|
||||
"malihu-custom-scrollbar-plugin": "^3.1.3",
|
||||
"animate.css": "^3.5.1"
|
||||
"animate.css": "^3.5.1",
|
||||
"jqvmap": "https://github.com/christianesperar/jqvmap.git#master"
|
||||
},
|
||||
"resolutions": {
|
||||
"jquery": "^2.2.3",
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
|
||||
<!-- bootstrap-progressbar -->
|
||||
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
|
||||
<!-- jVectorMap -->
|
||||
<link href="css/maps/jquery-jvectormap-2.0.3.css" rel="stylesheet"/>
|
||||
<!-- JQVMap -->
|
||||
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Custom Theme Style -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
|
|
@ -1006,8 +1006,10 @@
|
|||
<script src="js/flot/date.js"></script>
|
||||
<script src="js/flot/jquery.flot.spline.js"></script>
|
||||
<script src="js/flot/curvedLines.js"></script>
|
||||
<!-- jVectorMap -->
|
||||
<script src="js/maps/jquery-jvectormap-2.0.3.min.js"></script>
|
||||
<!-- JQVMap -->
|
||||
<script src="../vendors/jqvmap/dist/jquery.vmap.js"></script>
|
||||
<script src="../vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
|
||||
<script src="../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
|
||||
<!-- bootstrap-daterangepicker -->
|
||||
<script src="js/moment/moment.min.js"></script>
|
||||
<script src="js/datepicker/daterangepicker.js"></script>
|
||||
|
|
@ -1091,30 +1093,24 @@
|
|||
</script>
|
||||
<!-- /Flot -->
|
||||
|
||||
<!-- jVectorMap -->
|
||||
<script src="js/maps/jquery-jvectormap-world-mill-en.js"></script>
|
||||
<script src="js/maps/jquery-jvectormap-us-aea-en.js"></script>
|
||||
<script src="js/maps/gdp-data.js"></script>
|
||||
<!-- JQVMap -->
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#world-map-gdp').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
zoomOnScroll: false,
|
||||
series: {
|
||||
regions: [{
|
||||
values: gdpData,
|
||||
scale: ['#E6F2F0', '#149B7E'],
|
||||
normalizeFunction: 'polynomial'
|
||||
}]
|
||||
},
|
||||
onRegionTipShow: function(e, el, code) {
|
||||
el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
|
||||
}
|
||||
map: 'world_en',
|
||||
backgroundColor: null,
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#E6F2F0', '#149B7E'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- /jVectorMap -->
|
||||
<!-- /JQVMap -->
|
||||
|
||||
<!-- Skycons -->
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@
|
|||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<!-- jVectorMap -->
|
||||
<link href="css/maps/jquery-jvectormap-2.0.3.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Custom Theme Style -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -1,185 +0,0 @@
|
|||
var gdpData = {
|
||||
"AF": 16.63,
|
||||
"AL": 11.58,
|
||||
"DZ": 158.97,
|
||||
"AO": 85.81,
|
||||
"AG": 1.1,
|
||||
"AR": 351.02,
|
||||
"AM": 8.83,
|
||||
"AU": 1219.72,
|
||||
"AT": 366.26,
|
||||
"AZ": 52.17,
|
||||
"BS": 7.54,
|
||||
"BH": 21.73,
|
||||
"BD": 105.4,
|
||||
"BB": 3.96,
|
||||
"BY": 52.89,
|
||||
"BE": 461.33,
|
||||
"BZ": 1.43,
|
||||
"BJ": 6.49,
|
||||
"BT": 1.4,
|
||||
"BO": 19.18,
|
||||
"BA": 16.2,
|
||||
"BW": 12.5,
|
||||
"BR": 2023.53,
|
||||
"BN": 11.96,
|
||||
"BG": 44.84,
|
||||
"BF": 8.67,
|
||||
"BI": 1.47,
|
||||
"KH": 11.36,
|
||||
"CM": 21.88,
|
||||
"CA": 1563.66,
|
||||
"CV": 1.57,
|
||||
"CF": 2.11,
|
||||
"TD": 7.59,
|
||||
"CL": 199.18,
|
||||
"CN": 5745.13,
|
||||
"CO": 283.11,
|
||||
"KM": 0.56,
|
||||
"CD": 12.6,
|
||||
"CG": 11.88,
|
||||
"CR": 35.02,
|
||||
"CI": 22.38,
|
||||
"HR": 59.92,
|
||||
"CY": 22.75,
|
||||
"CZ": 195.23,
|
||||
"DK": 304.56,
|
||||
"DJ": 1.14,
|
||||
"DM": 0.38,
|
||||
"DO": 50.87,
|
||||
"EC": 61.49,
|
||||
"EG": 216.83,
|
||||
"SV": 21.8,
|
||||
"GQ": 14.55,
|
||||
"ER": 2.25,
|
||||
"EE": 19.22,
|
||||
"ET": 30.94,
|
||||
"FJ": 3.15,
|
||||
"FI": 231.98,
|
||||
"FR": 2555.44,
|
||||
"GA": 12.56,
|
||||
"GM": 1.04,
|
||||
"GE": 11.23,
|
||||
"DE": 3305.9,
|
||||
"GH": 18.06,
|
||||
"GR": 305.01,
|
||||
"GD": 0.65,
|
||||
"GT": 40.77,
|
||||
"GN": 4.34,
|
||||
"GW": 0.83,
|
||||
"GY": 2.2,
|
||||
"HT": 6.5,
|
||||
"HN": 15.34,
|
||||
"HK": 226.49,
|
||||
"HU": 132.28,
|
||||
"IS": 12.77,
|
||||
"IN": 1430.02,
|
||||
"ID": 695.06,
|
||||
"IR": 337.9,
|
||||
"IQ": 84.14,
|
||||
"IE": 204.14,
|
||||
"IL": 201.25,
|
||||
"IT": 2036.69,
|
||||
"JM": 13.74,
|
||||
"JP": 5390.9,
|
||||
"JO": 27.13,
|
||||
"KZ": 129.76,
|
||||
"KE": 32.42,
|
||||
"KI": 0.15,
|
||||
"KR": 986.26,
|
||||
"UNDEFINED": 5.73,
|
||||
"KW": 117.32,
|
||||
"KG": 4.44,
|
||||
"LA": 6.34,
|
||||
"LV": 23.39,
|
||||
"LB": 39.15,
|
||||
"LS": 1.8,
|
||||
"LR": 0.98,
|
||||
"LY": 77.91,
|
||||
"LT": 35.73,
|
||||
"LU": 52.43,
|
||||
"MK": 9.58,
|
||||
"MG": 8.33,
|
||||
"MW": 5.04,
|
||||
"MY": 218.95,
|
||||
"MV": 1.43,
|
||||
"ML": 9.08,
|
||||
"MT": 7.8,
|
||||
"MR": 3.49,
|
||||
"MU": 9.43,
|
||||
"MX": 1004.04,
|
||||
"MD": 5.36,
|
||||
"MN": 5.81,
|
||||
"ME": 3.88,
|
||||
"MA": 91.7,
|
||||
"MZ": 10.21,
|
||||
"MM": 35.65,
|
||||
"NA": 11.45,
|
||||
"NP": 15.11,
|
||||
"NL": 770.31,
|
||||
"NZ": 138,
|
||||
"NI": 6.38,
|
||||
"NE": 5.6,
|
||||
"NG": 206.66,
|
||||
"NO": 413.51,
|
||||
"OM": 53.78,
|
||||
"PK": 174.79,
|
||||
"PA": 27.2,
|
||||
"PG": 8.81,
|
||||
"PY": 17.17,
|
||||
"PE": 153.55,
|
||||
"PH": 189.06,
|
||||
"PL": 438.88,
|
||||
"PT": 223.7,
|
||||
"QA": 126.52,
|
||||
"RO": 158.39,
|
||||
"RU": 1476.91,
|
||||
"RW": 5.69,
|
||||
"WS": 0.55,
|
||||
"ST": 0.19,
|
||||
"SA": 434.44,
|
||||
"SN": 12.66,
|
||||
"RS": 38.92,
|
||||
"SC": 0.92,
|
||||
"SL": 1.9,
|
||||
"SG": 217.38,
|
||||
"SK": 86.26,
|
||||
"SI": 46.44,
|
||||
"SB": 0.67,
|
||||
"ZA": 354.41,
|
||||
"ES": 1374.78,
|
||||
"LK": 48.24,
|
||||
"KN": 0.56,
|
||||
"LC": 1,
|
||||
"VC": 0.58,
|
||||
"SD": 65.93,
|
||||
"SR": 3.3,
|
||||
"SZ": 3.17,
|
||||
"SE": 444.59,
|
||||
"CH": 522.44,
|
||||
"SY": 59.63,
|
||||
"TW": 426.98,
|
||||
"TJ": 5.58,
|
||||
"TZ": 22.43,
|
||||
"TH": 312.61,
|
||||
"TL": 0.62,
|
||||
"TG": 3.07,
|
||||
"TO": 0.3,
|
||||
"TT": 21.2,
|
||||
"TN": 43.86,
|
||||
"TR": 729.05,
|
||||
"TM": 0,
|
||||
"UG": 17.12,
|
||||
"UA": 136.56,
|
||||
"AE": 239.65,
|
||||
"GB": 2258.57,
|
||||
"US": 14624.18,
|
||||
"UY": 40.71,
|
||||
"UZ": 37.72,
|
||||
"VU": 0.72,
|
||||
"VE": 285.21,
|
||||
"VN": 101.99,
|
||||
"YE": 30.02,
|
||||
"ZM": 15.69,
|
||||
"ZW": 5.57
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -15,8 +15,8 @@
|
|||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
|
||||
<!-- jVectorMap -->
|
||||
<link href="css/maps/jquery-jvectormap-2.0.3.css" rel="stylesheet"/>
|
||||
<!-- JQVMap -->
|
||||
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
|
||||
|
||||
<!-- Custom Theme Style -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
|
|
@ -445,98 +445,61 @@
|
|||
<script src="../vendors/nprogress/nprogress.js"></script>
|
||||
<!-- jQuery Sparklines -->
|
||||
<script src="../vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
|
||||
<!-- jVectorMap -->
|
||||
<script src="js/maps/jquery-jvectormap-2.0.3.min.js"></script>
|
||||
<!-- JQVMap -->
|
||||
<script src="../vendors/jqvmap/dist/jquery.vmap.js"></script>
|
||||
<script src="../vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
|
||||
<script src="../vendors/jqvmap/dist/maps/jquery.vmap.usa.js"></script>
|
||||
<script src="../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
|
||||
<!-- easy-pie-chart -->
|
||||
<script src="../vendors/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
|
||||
|
||||
<!-- Custom Theme Scripts -->
|
||||
<script src="../build/js/custom.min.js"></script>
|
||||
|
||||
<!-- jVectorMap -->
|
||||
<script src="js/maps/gdp-data.js"></script>
|
||||
<script src="js/maps/jquery-jvectormap-world-mill-en.js"></script>
|
||||
<script src="js/maps/jquery-jvectormap-us-aea-en.js"></script>
|
||||
|
||||
<!-- JQVMap -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$.getJSON('js/maps/us-unemployment.json', function(data) {
|
||||
var val = 2009,
|
||||
statesValues = jvm.values.apply({}, jvm.values(data.states)),
|
||||
metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
|
||||
metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));
|
||||
|
||||
$('#usa_map').vectorMap({
|
||||
map: 'us_aea_en',
|
||||
markers: data.metro.coords,
|
||||
backgroundColor: 'transparent',
|
||||
zoomOnScroll: false,
|
||||
series: {
|
||||
markers: [{
|
||||
attribute: 'fill',
|
||||
scale: ['#FEE5D9', '#A50F15'],
|
||||
values: data.metro.unemployment[val],
|
||||
min: jvm.min(metroUnemplValues),
|
||||
max: jvm.max(metroUnemplValues)
|
||||
}, {
|
||||
attribute: 'r',
|
||||
scale: [5, 20],
|
||||
values: data.metro.population[val],
|
||||
min: jvm.min(metroPopValues),
|
||||
max: jvm.max(metroPopValues)
|
||||
}],
|
||||
regions: [{
|
||||
scale: ['#E6F2F0', '#149B7E'],
|
||||
attribute: 'fill',
|
||||
values: data.states[val],
|
||||
min: jvm.min(statesValues),
|
||||
max: jvm.max(statesValues)
|
||||
}]
|
||||
},
|
||||
onMarkerTipShow: function(event, label, index) {
|
||||
label.html(
|
||||
'<b>' + data.metro.names[index] + '</b><br/>' +
|
||||
'<b>Population: </b>' + data.metro.population[val][index] + '</br>' +
|
||||
'<b>Unemployment rate: </b>' + data.metro.unemployment[val][index] + '%'
|
||||
);
|
||||
},
|
||||
onRegionTipShow: function(event, label, code) {
|
||||
label.html(
|
||||
'<b>' + label.html() + '</b></br>' +
|
||||
'<b>Unemployment rate: </b>' + data.states[val][code] + '%'
|
||||
);
|
||||
}
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$('#usa_map').vectorMap({
|
||||
map: 'usa_en',
|
||||
backgroundColor: null,
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#E6F2F0', '#149B7E'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$('#world-map-gdp').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
zoomOnScroll: false,
|
||||
series: {
|
||||
regions: [{
|
||||
values: gdpData,
|
||||
scale: ['#E6F2F0', '#149B7E'],
|
||||
normalizeFunction: 'polynomial'
|
||||
}]
|
||||
},
|
||||
onRegionTipShow: function(e, el, code) {
|
||||
el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
|
||||
}
|
||||
map: 'world_en',
|
||||
backgroundColor: null,
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#E6F2F0', '#149B7E'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- /jVectorMap -->
|
||||
<!-- /JQVMap -->
|
||||
|
||||
<!-- easy-pie-chart -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.chart').easyPieChart({
|
||||
easing: 'easeOutBounce',
|
||||
lineWidth: '6',
|
||||
barColor: '#75BCDD',
|
||||
easing: 'easeOutElastic',
|
||||
delay: 3000,
|
||||
barColor: '#26B99A',
|
||||
trackColor: '#fff',
|
||||
scaleColor: false,
|
||||
lineWidth: 20,
|
||||
trackWidth: 16,
|
||||
lineCap: 'butt',
|
||||
onStep: function(from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "jqvmap",
|
||||
"homepage": "http://jqvmap.com",
|
||||
"authors": [
|
||||
"JQVMap"
|
||||
],
|
||||
"license": "(MIT OR GPL-3.0)",
|
||||
"description": "jQuery Vector Map Library",
|
||||
"main": "dist/jquery.vmap.min.js",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"map",
|
||||
"svg",
|
||||
"vml",
|
||||
"vector"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/manifestinteractive/jqvmap.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": ">=1.11.3"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"_release": "3a45b04e09",
|
||||
"_resolution": {
|
||||
"type": "branch",
|
||||
"branch": "master",
|
||||
"commit": "3a45b04e099bdaee5152b39eef21d6568d35c86d"
|
||||
},
|
||||
"_source": "https://github.com/christianesperar/jqvmap.git",
|
||||
"_target": "master",
|
||||
"_originalSource": "https://github.com/christianesperar/jqvmap.git",
|
||||
"_direct": true
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
|
||||
|
||||
Change Log
|
||||
======
|
||||
|
||||
Version 1.5.1
|
||||
---
|
||||
|
||||
`Released on May 17th, 2016`
|
||||
|
||||
1. Added a minified css file
|
||||
|
||||
2. Removed Post Install Script
|
||||
|
||||
3. Updated README.md
|
||||
|
||||
4. Added Turkey Map and Example File
|
||||
|
||||
5. Moved Github files into `.github` folder
|
||||
|
||||
Version 1.5.0
|
||||
---
|
||||
|
||||
`Released on March 15th, 2016`
|
||||
|
||||
1. Updated LICENSE path in packaged dist files
|
||||
|
||||
2. Fixed bugs in labels and pins where mouse events were not passing through to clickable region
|
||||
|
||||
3. Removed -merc suffix from map files created by map creator ( fixes #204 )
|
||||
|
||||
4. Added new example for custom placement of pins `./examples/pins_custom.html`
|
||||
|
||||
5. Fixed `onRegionSelect` issue not returning region ( fixes #201 )
|
||||
|
||||
6. Added better support to make regions disabled ( see #197 and new `./examples/inactive_regions.html` )
|
||||
|
||||
Version 1.4.0
|
||||
---
|
||||
|
||||
`Released on December 6th, 2015`
|
||||
|
||||
1. Added Touch Support for Mobile Devices
|
||||
|
||||
2. Added `showLabels` config option to place ISO codes by default
|
||||
|
||||
3. Added `onResize` event handler and fixed resize event binding issues
|
||||
|
||||
4. Fixed issue when dragging a map and releasing outside map
|
||||
|
||||
5. Added `onLoad` event handler
|
||||
|
||||
6. Updated `README.md` & `CONTRIBUTING.md` files
|
||||
|
||||
Version 1.3.1
|
||||
---
|
||||
|
||||
`Released on December 5th, 2015`
|
||||
|
||||
1. Fixes issue with scaleColors not working.
|
||||
|
||||
Version 1.3.0
|
||||
---
|
||||
|
||||
`Released on December 4th, 2015`
|
||||
|
||||
__IMPORTANT:__ This is a backwards breaking change. You will need to use the new map files with this version of JQVMap. Our focus was to make any file you create here compatible with the other vector map libraries as well as allow theirs to work with ours. Everybody wins ... except our old map files.
|
||||
|
||||
1. Added `./create` folder for users wishing to create custom maps. Folder has detailed writeup on how to create your own maps.
|
||||
|
||||
2. Added Unit Tests to `./tests` folder and added them as part of of the `npm test` suite and build process. These tests can also be run in the browser.
|
||||
|
||||
3. Renamed `WorldMap` to `JQVMap` as "WorldMap" did not really make sense as a variable name
|
||||
|
||||
4. Removed case sensitivity for reference regions by code.
|
||||
|
||||
5. Fixed incorrect license header in distributed files
|
||||
|
||||
6. Updated `README.md` & `CONTRIBUTING.md` files
|
||||
|
||||
Version 1.2.0
|
||||
---
|
||||
|
||||
`Released on November 18th, 2015`
|
||||
|
||||
1. Switched to using Grunt to build source code. JS files in `./dist` are now generated from `./src` folder.
|
||||
|
||||
2. Moved source files to `./src` folder
|
||||
|
||||
3. Renamed `./samples` to `./examples`
|
||||
|
||||
4. Renamed `./jqvmap` to `./dist`
|
||||
|
||||
5. Removed `./website` folder as it is not really needed in this project
|
||||
|
||||
6. Updated `README.md` & `CONTRIBUTING.md` files
|
||||
|
||||
Version 1.1.0
|
||||
---
|
||||
|
||||
`Released on October 17th, 2015`
|
||||
|
||||
1. Added new maps for Russia, France, Germany, Algeria, Iraq, Iran & Brazil
|
||||
|
||||
2. Fixed `regionClickEvent` bug
|
||||
|
||||
3. Added event handling for deselecting a region
|
||||
|
||||
4. Added Touch Event code example
|
||||
|
||||
5. Added sample HTML pages for each map.
|
||||
|
||||
Version 1.0.0
|
||||
---
|
||||
|
||||
`Released on May 6th, 2012`
|
||||
|
||||
Initial Release
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
|
||||
|
||||
Contributing to JQVMap
|
||||
===
|
||||
|
||||
Please review the following if you intend to submit an issue or pull request. Not following the guidelines below most likely means your submission will be rejected.
|
||||
|
||||
Reporting an Issue
|
||||
---
|
||||
|
||||
**ATTENTION:** While creating tickets is the only way to assign a task to be completed, it is equally important to not flood the development team with tickets that are not actually necessary ( might be a duplicate, already being worked on, not actually an issue, etc ). So before you create a ticket, please check that your issue has not already been reported.
|
||||
|
||||
#### Creating a New Issue
|
||||
|
||||
To submit a ticket, visit the project's repo on [Github](https://github.com/manifestinteractive/jqvmap), select the **Issues** tab in the right column, and click the green **New issue** button.
|
||||
|
||||
**Please use our [Ticket Template](https://github.com/manifestinteractive/culture/blob/master/templates/ticket-template.md) to make sure you are entering all the information we will need to complete the item you are about to create.**
|
||||
|
||||
Map Specific Issues
|
||||
---
|
||||
|
||||
So you want to create your own maps, or change some existing ones. Awesome. Make sure to check out the `./create` folder for details on how to do this.
|
||||
|
||||
Making Code Changes
|
||||
---
|
||||
|
||||
All source code for this project is contained in the `./src` folder. Do not make any changes to the javascript files in the `./dist` folder, these are automatically generated by the `grunt build` terminal command. Any Pull Requests that were not generated using the following Grunt Terminal Commands will be automatically rejected in order to maintain structural integrity of this project.
|
||||
|
||||
#### Requirements
|
||||
|
||||
* [Node.js v0.10](http://nodejs.org/) ( For Application Development )
|
||||
|
||||
Grunt Terminal Commands:
|
||||
---
|
||||
|
||||
You can use the following build commands via terminal:
|
||||
|
||||
#### Build for Distribution:
|
||||
|
||||
The following command will Concat JS files and generate minified files for Distribution.
|
||||
|
||||
This is the most common command you will want to use and is required to view any changes you made in a browser.
|
||||
|
||||
```bash
|
||||
grunt build
|
||||
```
|
||||
|
||||
#### Create a Major Release:
|
||||
|
||||
The following will:
|
||||
|
||||
1. Increase the build's major number ( e.g. v __1__.0.1 => v __2__.0.0 )
|
||||
2. Build & Package Distribution Files
|
||||
3. Perform a git commit
|
||||
|
||||
```bash
|
||||
grunt release-major
|
||||
```
|
||||
|
||||
#### Create a Minor Release:
|
||||
|
||||
The following will:
|
||||
|
||||
1. Increase the build's minor number ( e.g. v 1.__0__.1 => v 1.__1__.0 )
|
||||
2. Build & Package Distribution Files
|
||||
3. Perform a git commit
|
||||
|
||||
```bash
|
||||
grunt release-minor
|
||||
```
|
||||
|
||||
#### Create a Release Patch:
|
||||
|
||||
The following will:
|
||||
|
||||
1. Increase the build's patch number ( e.g. v 1.1.__1__ => v 1.1.__2__ )
|
||||
2. Build & Package Distribution Files
|
||||
3. Perform a git commit
|
||||
|
||||
```bash
|
||||
grunt release-patch
|
||||
```
|
||||
|
||||
Submitting a Pull Request
|
||||
---
|
||||
|
||||
Code will not be merged into the master branch unless it has been submitted as a Pull Request.
|
||||
|
||||
All Pull Requests must be reviewed by one of your peers before it can be merged into master.
|
||||
|
||||
#### Creating a Pull Request Assumes:
|
||||
|
||||
1. You have read and understand our [Coding Culture](https://github.com/manifestinteractive/culture)
|
||||
2. You are working off a git branch named after a corresponding Github ticket
|
||||
3. You have merged in the latest master branch and resolved all merge conflicts
|
||||
|
||||
#### Create Pull Request:
|
||||
|
||||
1. Commit and push your Github ticket branch using [Git Best Practices](https://github.com/manifestinteractive/culture/blob/master/docs/git-best-practices.md)
|
||||
2. Visit the project's repo on [Github](https://github.com/manifestinteractive/jqvmap) and click **Compare & pull request**
|
||||
3. Add a Title that briefly explains the PR
|
||||
4. Use the text from our [Pull Request Template](https://github.com/manifestinteractive/culture/blob/master/templates/pr-template.md) as the base of your PR comment
|
||||
5. Update the PR comment to complete as much information as you can provide
|
||||
6. Add a Label of **Ready for Code Review**
|
||||
7. Click **Create pull request**
|
||||
|
||||
#### Review Pull Request:
|
||||
|
||||
1. Visit the PR you are being asked to review
|
||||
2. Before starting your PR Review, remove the Label **Ready for Review** and add the Label **In Code Review**
|
||||
3. Review the **Files changed** tab and add any inline comments ( click line number ) you have feedback with
|
||||
4. Add any overall feedback as a new comment on the main **Conversation** tab
|
||||
5. Once code review is complete, check off the items in the **PR Reviewer** once you have completed them
|
||||
6. If the PR fails, remove the Label **In Code Review** and select a new label showing what action is needed
|
||||
7. If the PR Passes, remove all Labels and click **Merge pull request**
|
||||
8. If you are 100% certain you will never need that branch again, you can delete the branch after merging into master
|
||||
9. Contact the PR Author and let them know the results of your review
|
||||
10. Stay on top of any PR's you are reviewing until they are able to be successfully merged into master
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
All code in this Github Repository are available under both the MIT and GPL license.
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016 Manifest Interactive
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
GPL License
|
||||
|
||||
Copyright (c) 2016 Manifest Interactive
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
|
@ -0,0 +1,495 @@
|
|||
|
||||
|
||||
This project is a heavily modified version of [jVectorMap](https://github.com/bjornd/jvectormap) as it was in April of 2012. I chose to start fresh rather than fork their project as my intentions were to take it in such a different direction that it would become incompatibale with the original source, rendering it near impossible to merge our projects together without extreme complications.
|
||||
|
||||
**Tests:** [](https://circleci.com/gh/manifestinteractive/jqvmap/tree/master)
|
||||
|
||||
|
||||
jQuery Vector Map
|
||||
======
|
||||
|
||||
To get started, all you need to do is include the JavaScript and CSS files for the map you want to load ( contained in the `./dist` folder ).
|
||||
|
||||
#### Here is a sample HTML page for loading the World Map with default settings:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>JQVMap - World Map</title>
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#vmap').vectorMap({ map: 'world_en' });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Making it Pretty
|
||||
======
|
||||
|
||||
While initializing a map you can provide parameters to change its look and feel.
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap(
|
||||
{
|
||||
map: 'world_en',
|
||||
backgroundColor: '#a5bfdd',
|
||||
borderColor: '#818181',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
color: '#f4f3f0',
|
||||
enableZoom: true,
|
||||
hoverColor: '#c9dfaf',
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: '#c9dfaf',
|
||||
selectedRegions: null,
|
||||
showTooltip: true,
|
||||
onRegionClick: function(element, code, region)
|
||||
{
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
More Examples
|
||||
------
|
||||
|
||||
You can see a variety of examples in the `./examples` folder.
|
||||
|
||||
|
||||
Configuration Settings
|
||||
------
|
||||
|
||||
**map** *'world_en'*
|
||||
|
||||
Map you want to load. Must include the javascript file with the name of the map you want. Available maps with this library are world_en, usa_en, europe_en and germany_en
|
||||
|
||||
**backgroundColor** *'#a5bfdd'*
|
||||
|
||||
Background color of map container in any CSS compatible format.
|
||||
|
||||
**borderColor** *'#818181'*
|
||||
|
||||
Border Color to use to outline map objects
|
||||
|
||||
**borderOpacity** *0.5*
|
||||
|
||||
Border Opacity to use to outline map objects ( use anything from 0-1, e.g. 0.5, defaults to 0.25 )
|
||||
|
||||
**borderWidth** *3*
|
||||
|
||||
Border Width to use to outline map objects ( defaults to 1 )
|
||||
|
||||
**color** *'#f4f3f0'*
|
||||
|
||||
Color of map regions.
|
||||
|
||||
**colors**
|
||||
|
||||
Colors of individual map regions. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in lower case.
|
||||
|
||||
**enableZoom** *boolean*
|
||||
|
||||
Whether to Enable Map Zoom ( true or false, defaults to true)
|
||||
|
||||
**hoverColor** *'#c9dfaf'*
|
||||
|
||||
Color of the region when mouse pointer is over it.
|
||||
|
||||
**hoverColors**
|
||||
|
||||
Colors of individual map regions when mouse pointer is over it. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in lower case.
|
||||
|
||||
**hoverOpacity** *0.5*
|
||||
|
||||
Opacity of the region when mouse pointer is over it.
|
||||
|
||||
**normalizeFunction** *'linear'*
|
||||
|
||||
This function can be used to improve results of visualizations for data with non-linear nature. Function gets raw value as the first parameter and should return value which will be used in calculations of color, with which particular region will be painted.
|
||||
|
||||
**scaleColors** *['#b6d6ff', '#005ace']*
|
||||
|
||||
This option defines colors, with which regions will be painted when you set option values. Array scaleColors can have more then two elements. Elements should be strings representing colors in RGB hex format.
|
||||
|
||||
**selectedColor** *'#333333'*
|
||||
|
||||
Color for a region when you select it
|
||||
|
||||
**selectedRegions** *['MO', 'FL', 'OR']*
|
||||
|
||||
This is the Region that you are looking to have preselected (two letter ISO code, defaults to null ). See [REGIONS.md](REGIONS.md)
|
||||
|
||||
**multiSelectRegion** *boolean*
|
||||
|
||||
Whether to enable more than one region to be selected at a time.
|
||||
|
||||
**showLabels** *boolean*
|
||||
|
||||
Whether to show ISO Code Labels ( true or false, defaults to false )
|
||||
|
||||
**showTooltip** *boolean*
|
||||
|
||||
Whether to show Tooltips on Mouseover ( true or false, defaults to true )
|
||||
|
||||
**onLoad** *function(event, map)*
|
||||
|
||||
Callback function which will be called when map is loading, returning the map event and map details.
|
||||
|
||||
**onLabelShow** *function(event, label, code)*
|
||||
|
||||
Callback function which will be called before label is shown. Label DOM object and country code will be passed to the callback as arguments.
|
||||
|
||||
**onRegionOver** *function(event, code, region)*
|
||||
|
||||
Callback function which will be called when the mouse cursor enters the region path. Country code will be passed to the callback as argument.
|
||||
|
||||
**onRegionOut** *function(event, code, region)*
|
||||
|
||||
Callback function which will be called when the mouse cursor leaves the region path. Country code will be passed to the callback as argument.
|
||||
|
||||
**onRegionClick** *function(event, code, region)*
|
||||
|
||||
Callback function which will be called when the user clicks the region path. Country code will be passed to the callback as argument. This callback may be called while the user is moving the map. If you need to distinguish between a "real" click and a click resulting from moving the map, you can inspect **$(event.currentTarget).data('mapObject').isMoving**.
|
||||
|
||||
**onRegionSelect** *function(event, code, region)*
|
||||
|
||||
Callback function which will be called when the selects a region. Country code will be passed to the callback as argument.
|
||||
|
||||
**onRegionDeselect** *function(event, code, region)*
|
||||
|
||||
Callback function which will be called when the deselects a region. Country code will be passed to the callback as argument.
|
||||
|
||||
**onResize** *function(event, width, height)*
|
||||
|
||||
Callback function which will be called when the map is resized. Return event, width & height.
|
||||
|
||||
**pins** *{ "pk" : "pk_pin_metadata", "ru" : "ru_pin_metadata", ... }*
|
||||
|
||||
This option defines pins, which will be placed on the regions. The JSON can have only one element against one country code. Elements should be strings containing the HTML or id of the pin (depends on the 'pinMode' option explained next).
|
||||
|
||||
**pinMode** *content*
|
||||
|
||||
This option defines if the "pins" JSON contains the HTML strings of the pins or the ids of HTML DOM elements which are to be placed as pins.
|
||||
|
||||
If the pin mode is "content" (or not specified) then the parameter "pins" contains the stringified html content to be placed as the pins.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'world_en',
|
||||
pins: { "pk" : "\u003cimg src=\"pk.png\" /\u003e" /*serialized <img src="pk.png" />*/, ... },
|
||||
pinMode: 'content'
|
||||
});
|
||||
```
|
||||
|
||||
If the pin mode is "id" then the parameter "pins" contains the value of "id" attribute of the html (DOM) elements to be placed as pins.
|
||||
Example:
|
||||
|
||||
```html
|
||||
<script>
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'world_en',
|
||||
pins: { "pk" : "pin_for_pk", "ru" : "pin_for_ru", ... },
|
||||
pinMode: 'id'
|
||||
});
|
||||
</script>
|
||||
<div style="display:none">
|
||||
<img id="pin_for_pk" src="pk.png" />
|
||||
<div id="pin_for_ru">...</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
*Note:*
|
||||
|
||||
1) The pin is placed at the center of the rectangle bounding the country. So depending on the shape of the country, the pin might not land on the country itself. For instance, the pin for 'US' lands in the center of Alaska and rest of the US, which happens to be in the ocean between them.
|
||||
|
||||
2) If the "pinMode" is set to "id", then the html DOM elements having those ids are NOT COPIED to the desired position, they are TRANSFERRED. This means that the elements will be removed from their original positions and placed on the map.
|
||||
|
||||
Dynamic Updating
|
||||
======
|
||||
|
||||
Most of the options can be changed after initialization using the following code:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});
|
||||
```
|
||||
|
||||
Instead of colors can be used any parameter except callbacks. Callbacks can be added and deleted using standard jQuery patterns of working with events.
|
||||
You can define callback function when you initialize JQVMap:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap(
|
||||
{
|
||||
onLoad: function(event, map)
|
||||
{
|
||||
|
||||
},
|
||||
onLabelShow: function(event, label, code)
|
||||
{
|
||||
|
||||
},
|
||||
onRegionOver: function(event, code, region)
|
||||
{
|
||||
|
||||
},
|
||||
onRegionOut: function(event, code, region)
|
||||
{
|
||||
|
||||
},
|
||||
onRegionClick: function(event, code, region)
|
||||
{
|
||||
|
||||
},
|
||||
onResize: function(event, width, height)
|
||||
{
|
||||
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Or later using standard jQuery mechanism:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').bind('load.jqvmap',
|
||||
function(event, map)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
jQuery('#vmap').bind('labelShow.jqvmap',
|
||||
function(event, label, code)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
jQuery('#vmap').bind('regionMouseOver.jqvmap',
|
||||
function(event, code, region)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
jQuery('#vmap').bind('regionMouseOut.jqvmap',
|
||||
function(event, code, region)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
jQuery('#vmap').bind('regionClick.jqvmap',
|
||||
function(event, code, region)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
jQuery('#vmap').bind('resize.jqvmap',
|
||||
function(event, width, height)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
Consider that fact that you can use standard features of jQuery events like event.preventDefault() or returning false from the callback to prevent default behavior of JQVMap (showing label or changing country color on hover). In the following example, when user moves mouse cursor over Canada label won't be shown and color of country won't be changed. At the same label for Russia will have custom text.
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap(
|
||||
{
|
||||
onLabelShow: function(event, label, code)
|
||||
{
|
||||
if (code == 'ca')
|
||||
{
|
||||
// Hide the label
|
||||
event.preventDefault();
|
||||
}
|
||||
else if (code == 'ru')
|
||||
{
|
||||
// Plain TEXT labels
|
||||
label.text('Bears, vodka, balalaika');
|
||||
}
|
||||
else if (code == 'us')
|
||||
{
|
||||
// HTML Based Labels. You can use any HTML you want, this is just an example
|
||||
label.html('<div class="map-tooltip"><h1 class="header">Header</h1><p class="description">Some Description</p></div>');
|
||||
}
|
||||
},
|
||||
onRegionOver: function(event, code)
|
||||
{
|
||||
if (code == 'ca')
|
||||
{
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Data Visualization
|
||||
======
|
||||
|
||||
Here I want to demonstrate how visualization of some geographical-related data can be done using JQVMap. Let's visualize information about GDP in 2010 for every country. At first we need some data. Let it be site of International Monetary Fond. There we can get information in xsl format, which can be converted first to csv and then to json with any scripting language. Now we have file gdp-data.js with such content (globals are evil, I know, but just for the sake of simplification):
|
||||
|
||||
```js
|
||||
var gdpData = {"af":16.63,"al":11.58,"dz":158.97,...};
|
||||
```
|
||||
|
||||
Then connect it to the page and add some code to make visualization:
|
||||
|
||||
```js
|
||||
var max = 0,
|
||||
min = Number.MAX_VALUE,
|
||||
cc,
|
||||
startColor = [200, 238, 255],
|
||||
endColor = [0, 100, 145],
|
||||
colors = {},
|
||||
hex;
|
||||
|
||||
//find maximum and minimum values
|
||||
for (cc in gdpData)
|
||||
{
|
||||
if (parseFloat(gdpData[cc]) > max)
|
||||
{
|
||||
max = parseFloat(gdpData[cc]);
|
||||
}
|
||||
if (parseFloat(gdpData[cc]) < min)
|
||||
{
|
||||
min = parseFloat(gdpData[cc]);
|
||||
}
|
||||
}
|
||||
|
||||
//set colors according to values of GDP
|
||||
for (cc in gdpData)
|
||||
{
|
||||
if (gdpData[cc] > 0)
|
||||
{
|
||||
colors[cc] = '#';
|
||||
for (var i = 0; i<3; i++)
|
||||
{
|
||||
hex = Math.round(startColor[i]
|
||||
+ (endColor[i]
|
||||
- startColor[i])
|
||||
* (gdpData[cc] / (max - min))).toString(16);
|
||||
|
||||
if (hex.length == 1)
|
||||
{
|
||||
hex = '0'+hex;
|
||||
}
|
||||
|
||||
colors[cc] += (hex.length == 1 ? '0' : '') + hex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//initialize JQVMap
|
||||
jQuery('#vmap').vectorMap(
|
||||
{
|
||||
colors: colors,
|
||||
hoverOpacity: 0.7,
|
||||
hoverColor: false
|
||||
});
|
||||
```
|
||||
|
||||
Functions
|
||||
======
|
||||
|
||||
There are seven functions that can be called on map container:
|
||||
|
||||
**zoomIn()** *Zoom one step in*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap('zoomIn');
|
||||
```
|
||||
|
||||
**zoomOut()** *Zoom one step out*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap('zoomOut');
|
||||
```
|
||||
|
||||
**getPinId(cc)** *Returns the html attribute "id" of the pin placed on the country whose country code is provided in "cc".*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
var pinId = jQuery('#vmap').vectorMap('getPinId', 'pk');
|
||||
```
|
||||
|
||||
**getPin(cc)** *Returns stringified HTML of the pin placed on the country whose country code is provided in "cc".*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
var pinContent = jQuery('#vmap').vectorMap('getPin', 'pk');
|
||||
```
|
||||
|
||||
**getPins()** *Returns an associative JSON string containing stringified HTML of all the pins.*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
var pins = jQuery('#vmap').vectorMap('getPins');
|
||||
```
|
||||
|
||||
**removePin(cc)** *Removes the pin from the country whose country code is specified in "cc".*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap('removePin', 'pk');
|
||||
```
|
||||
|
||||
**removePins()** *Removes all the pins from the map.*
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
jQuery('#vmap').vectorMap('removePins');
|
||||
```
|
||||
|
||||
Events
|
||||
======
|
||||
|
||||
There are three events which you can use to bind your own callbacks to:
|
||||
|
||||
**drag** *When the map is dragged, this event is triggered.*
|
||||
|
||||
**zoomIn** *When the map is zoomed in, this event is triggered.*
|
||||
|
||||
**zoomOut** *When the map is zoomed out, this event is triggered.*
|
||||
|
||||
You can bind your routines to any of these events by using jQuery on()
|
||||
For example:
|
||||
|
||||
```js
|
||||
//Do something when the map is dragged
|
||||
jQuery('#vmap').on('drag', function(event)
|
||||
{
|
||||
console.log('The map is being dragged');
|
||||
//Do something
|
||||
});
|
||||
```
|
||||
|
||||
Custom Maps
|
||||
======
|
||||
|
||||
So you want to create your own maps, or change some existing ones. Awesome. Make sure to check out [./create/README.md](./create) for details on how to do this.
|
||||
|
|
@ -0,0 +1,405 @@
|
|||
WORLD
|
||||
------------------------------
|
||||
AE = United Arab Emirates
|
||||
AF = Afghanistan
|
||||
AG = Antigua and Barbuda
|
||||
AL = Albania
|
||||
AM = Armenia
|
||||
AO = Angola
|
||||
AR = Argentina
|
||||
AT = Austria
|
||||
AU = Australia
|
||||
AZ = Azerbaijan
|
||||
BA = Bosnia and Herzegovina
|
||||
BB = Barbados
|
||||
BD = Bangladesh
|
||||
BE = Belgium
|
||||
BF = Burkina Faso
|
||||
BG = Bulgaria
|
||||
BI = Burundi
|
||||
BJ = Benin
|
||||
BN = Brunei Darussalam
|
||||
BO = Bolivia
|
||||
BR = Brazil
|
||||
BS = Bahamas
|
||||
BT = Bhutan
|
||||
BW = Botswana
|
||||
BY = Belarus
|
||||
BZ = Belize
|
||||
CA = Canada
|
||||
CD = Congo
|
||||
CF = Central African Republic
|
||||
CG = Congo
|
||||
CH = Switzerland
|
||||
CI = Cote d'Ivoire
|
||||
CL = Chile
|
||||
CM = Cameroon
|
||||
CN = China
|
||||
CO = Colombia
|
||||
CR = Costa Rica
|
||||
CU = Cuba
|
||||
CV = Cape Verde
|
||||
CY = Cyprus
|
||||
CZ = Czech Republic
|
||||
DE = Germany
|
||||
DJ = Djibouti
|
||||
DK = Denmark
|
||||
DM = Dominica
|
||||
DO = Dominican Republic
|
||||
DZ = Algeria
|
||||
EC = Ecuador
|
||||
EE = Estonia
|
||||
EG = Egypt
|
||||
ER = Eritrea
|
||||
ES = Spain
|
||||
ET = Ethiopia
|
||||
FI = Finland
|
||||
FJ = Fiji
|
||||
FK = Falkland Islands
|
||||
FR = France
|
||||
GA = Gabon
|
||||
GB = United Kingdom
|
||||
GD = Grenada
|
||||
GE = Georgia
|
||||
GF = French Guiana
|
||||
GH = Ghana
|
||||
GL = Greenland
|
||||
GM = Gambia
|
||||
GN = Guinea
|
||||
GQ = Equatorial Guinea
|
||||
GR = Greece
|
||||
GT = Guatemala
|
||||
GW = Guinea-Bissau
|
||||
GY = Guyana
|
||||
HN = Honduras
|
||||
HR = Croatia
|
||||
HT = Haiti
|
||||
HU = Hungary
|
||||
ID = Indonesia
|
||||
IE = Ireland
|
||||
IL = Israel
|
||||
IN = India
|
||||
IQ = Iraq
|
||||
IR = Iran
|
||||
IS = Iceland
|
||||
IT = Italy
|
||||
JM = Jamaica
|
||||
JO = Jordan
|
||||
JP = Japan
|
||||
KE = Kenya
|
||||
KG = Kyrgyz Republic
|
||||
KH = Cambodia
|
||||
KM = Comoros
|
||||
KN = Saint Kitts and Nevis
|
||||
KP = North Korea
|
||||
KR = South Korea
|
||||
KW = Kuwait
|
||||
KZ = Kazakhstan
|
||||
LA = Lao People's Democratic Republic
|
||||
LB = Lebanon
|
||||
LC = Saint Lucia
|
||||
LK = Sri Lanka
|
||||
LR = Liberia
|
||||
LS = Lesotho
|
||||
LT = Lithuania
|
||||
LV = Latvia
|
||||
LY = Libya
|
||||
MA = Morocco
|
||||
MD = Moldova
|
||||
MG = Madagascar
|
||||
MK = Macedonia
|
||||
ML = Mali
|
||||
MM = Myanmar
|
||||
MN = Mongolia
|
||||
MR = Mauritania
|
||||
MT = Malta
|
||||
MU = Mauritius
|
||||
MV = Maldives
|
||||
MW = Malawi
|
||||
MX = Mexico
|
||||
MY = Malaysia
|
||||
MZ = Mozambique
|
||||
NA = Namibia
|
||||
NC = New Caledonia
|
||||
NE = Niger
|
||||
NG = Nigeria
|
||||
NI = Nicaragua
|
||||
NL = Netherlands
|
||||
NO = Norway
|
||||
NP = Nepal
|
||||
NZ = New Zealand
|
||||
OM = Oman
|
||||
PA = Panama
|
||||
PE = Peru
|
||||
PF = French Polynesia
|
||||
PG = Papua New Guinea
|
||||
PH = Philippines
|
||||
PK = Pakistan
|
||||
PL = Poland
|
||||
PT = Portugal
|
||||
PY = Paraguay
|
||||
QA = Qatar
|
||||
RE = Reunion
|
||||
RO = Romania
|
||||
RS = Serbia
|
||||
RU = Russian Federationß
|
||||
RW = Rwanda
|
||||
SA = Saudi Arabia
|
||||
SB = Solomon Islands
|
||||
SC = Seychelles
|
||||
SD = Sudan
|
||||
SE = Sweden
|
||||
SI = Slovenia
|
||||
SK = Slovakia
|
||||
SL = Sierra Leone
|
||||
SN = Senegal
|
||||
SO = Somalia
|
||||
SR = Suriname
|
||||
ST = Sao Tome and Principe
|
||||
SV = El Salvador
|
||||
SY = Syrian Arab Republic
|
||||
SZ = Swaziland
|
||||
TD = Chad
|
||||
TG = Togo
|
||||
TH = Thailand
|
||||
TJ = Tajikistan
|
||||
TL = Timor-Leste
|
||||
TM = Turkmenistan
|
||||
TN = Tunisia
|
||||
TR = Turkey
|
||||
TT = Trinidad and Tobago
|
||||
TW = Taiwan
|
||||
TZ = Tanzania
|
||||
UA = Ukraine
|
||||
UG = Uganda
|
||||
US = United States of America
|
||||
UY = Uruguay
|
||||
UZ = Uzbekistan
|
||||
VE = Venezuela
|
||||
VN = Vietnam
|
||||
VU = Vanuatu
|
||||
YE = Yemen
|
||||
ZA = South Africa
|
||||
ZM = Zambia
|
||||
ZW = Zimbabwe
|
||||
|
||||
USA
|
||||
------------------------------
|
||||
AK = Alaska
|
||||
AL = Alabama
|
||||
AR = Arkansas
|
||||
AZ = Arizona
|
||||
CA = California
|
||||
CO = Colorado
|
||||
CT = Connecticut
|
||||
DC = District of Columbia
|
||||
DE = Delaware
|
||||
FL = Florida
|
||||
GA = Georgia
|
||||
HI = Hawaii
|
||||
IA = Iowa
|
||||
ID = Idaho
|
||||
IL = Illinois
|
||||
IN = Indiana
|
||||
KS = Kansas
|
||||
KY = Kentucky
|
||||
LA = Louisiana
|
||||
MA = Massachusetts
|
||||
MD = Maryland
|
||||
ME = Maine
|
||||
MI = Michigan
|
||||
MN = Minnesota
|
||||
MO = Missouri
|
||||
MS = Mississippi
|
||||
MT = Montana
|
||||
NC = North Carolina
|
||||
ND = North Dakota
|
||||
NE = Nebraska
|
||||
NH = New Hampshire
|
||||
NJ = New Jersey
|
||||
NM = New Mexico
|
||||
NV = Nevada
|
||||
NY = New York
|
||||
OH = Ohio
|
||||
OK = Oklahoma
|
||||
OR = Oregon
|
||||
PA = Pennsylvania
|
||||
RI = Rhode Island
|
||||
SC = South Carolina
|
||||
SD = South Dakota
|
||||
TN = Tennessee
|
||||
TX = Texas
|
||||
UT = Utah
|
||||
VA = Virginia
|
||||
VT = Vermont
|
||||
WA = Washington
|
||||
WI = Wisconsin
|
||||
WV = West Virginia
|
||||
WY = Wyoming
|
||||
|
||||
EUROPE
|
||||
------------------------------
|
||||
AD = Andorra
|
||||
AL = Albania
|
||||
AM = Armenia
|
||||
AT = Austria
|
||||
AZ = Azerbaijan
|
||||
BA = Bosnia and Herzegovina
|
||||
BE = Belgium
|
||||
BG = Bulgaria
|
||||
BY = Belarus
|
||||
CH = Switzerland
|
||||
CY = Cyprus
|
||||
CZ = Czech Republic
|
||||
DE = Germany
|
||||
DK = Denmark
|
||||
DZ = Algeria
|
||||
EE = Estonia
|
||||
ES = Spain
|
||||
FI = Finland
|
||||
FR = France
|
||||
GB = United Kingdom
|
||||
GE = Georgia
|
||||
GL = Greenland
|
||||
GR = Greece
|
||||
HR = Croatia
|
||||
HU = Hungary
|
||||
IE = Ireland
|
||||
IL = Israel
|
||||
IQ = Iraq
|
||||
IR = Iran
|
||||
IS = Iceland
|
||||
IT = Italy
|
||||
JO = Jordan
|
||||
KZ = Kazakhstan
|
||||
LB = Lebanon
|
||||
LI = Liechtenstein
|
||||
LT = Lithuania
|
||||
LU = Luxembourg
|
||||
LV = Latvia
|
||||
MA = Morocco
|
||||
MC = Monaco
|
||||
MD = Moldova
|
||||
ME = Montenegro
|
||||
MK = Macedonia
|
||||
MT = Malta
|
||||
NL = Netherlands
|
||||
NO = Norway
|
||||
PL = Poland
|
||||
PT = Portugal
|
||||
RO = Romania
|
||||
RU = Russian Federation
|
||||
SA = Saudi Arabia
|
||||
SE = Sweden
|
||||
SI = Slovenia
|
||||
SK = Slovakia
|
||||
SM = San Marino
|
||||
SR = Suriname
|
||||
SY = Syrian Arab Republic
|
||||
TM = Turkmenistan
|
||||
TN = Tunisia
|
||||
TR = Turkey
|
||||
UA = Ukraine
|
||||
|
||||
GERMANY
|
||||
------------------------------
|
||||
BB = Brandenburg
|
||||
BE = Berlin
|
||||
BW = Baden-WÃrttemberg
|
||||
BY = Bayern
|
||||
HB = Bremen
|
||||
HE = Hessen
|
||||
HH = Hamburg
|
||||
MV = Mecklenburg-Vorpommern
|
||||
NI = Niedersachsen
|
||||
NW = Nordrhein-Westfalen
|
||||
RP = Rheinland-Pfalz
|
||||
SH = Schleswig-Holstein
|
||||
SL = Saarland
|
||||
SN = Sachsen
|
||||
ST = Sachsen-Anhalt
|
||||
TH = ThÃri
|
||||
|
||||
RUSSIA
|
||||
------------------------------
|
||||
CH = Chukotka Autonomous Okrug
|
||||
KA = Kamchatka Krai
|
||||
MA = Magadan Oblast
|
||||
SA = Sakha Republic
|
||||
AM = Amur Oblast
|
||||
PR = Primorsky Krai
|
||||
EU = Jewish Autonomous Oblast
|
||||
HA = Khabarovsk Krai
|
||||
SH = Sakhalin Oblast
|
||||
OM = Omsk Oblast
|
||||
NV = Novosibirsk Oblast
|
||||
AL = Altai Krai
|
||||
LT = Altai Republic
|
||||
TV = Tuva Republic
|
||||
HK = Republic of Khakassia
|
||||
KM = Kemerovo Oblast
|
||||
TM = Tomsk Oblast
|
||||
ZB = Zabaykalsky Krai
|
||||
BR = Buryat Republic
|
||||
IR = Irkutsk Oblast
|
||||
KR = Krasnoyarsk Krai
|
||||
YA = Yamalo-Nenets Autonomous Okrug
|
||||
HT = Khanty–Mansi Autonomous Okrug
|
||||
TU = Tyumen Oblast
|
||||
KU = Kurgan Oblast
|
||||
CL = Chelyabinsk Oblast
|
||||
SV = Sverdlovsk Oblast
|
||||
AR = Arkhangelsk Oblast
|
||||
NE = Nenets Autonomous Okrug
|
||||
KO = Komi Republic
|
||||
MU = Murmansk Oblast
|
||||
VO = Vologda Oblast
|
||||
NO = Novgorod Oblast
|
||||
PS = Pskov Oblast
|
||||
LE = Leningrad Oblast
|
||||
KL = Republic of Karelia
|
||||
KN = Kaliningrad Oblast
|
||||
DA = Republic of Dagestan
|
||||
ST = Stavropol Krai
|
||||
SO = Republic of North Ossetia–Alania
|
||||
KB = Kabardino-Balkar Republic
|
||||
KH = Karachay–Cherkess Republic
|
||||
CC = Chechen Republic
|
||||
IN = Republic of Ingushetia
|
||||
AD = Republic of Adygea
|
||||
KS = Krasnodar Krai
|
||||
RO = Rostov Oblast
|
||||
KK = Republic of Kalmykia
|
||||
AS = Astrakhan Oblast
|
||||
VL = Volgograd Oblast
|
||||
TR = Tver Oblast
|
||||
SM = Smolensk Oblast
|
||||
BN = Bryansk Oblast
|
||||
KY = Kursk Oblast
|
||||
BL = Belgorod Oblast
|
||||
OR = Oryol Oblast
|
||||
KJ = Kaluga Oblast
|
||||
TL = Tula Oblast
|
||||
LP = Lipetsk Oblast
|
||||
MC = Moscow Oblast
|
||||
RZ = Ryazan Oblast
|
||||
TB = Tambov Oblast
|
||||
VM = Vladimir Oblast
|
||||
IV = Ivanovo Oblast
|
||||
YR = Yaroslavl Oblast
|
||||
KT = Kostroma Oblast
|
||||
NN = Nizhny Novgorod Oblast
|
||||
MR = Republic of Mordovia
|
||||
PZ = Penza Oblast
|
||||
SR = Saratov Oblast
|
||||
SS = Samara Oblast
|
||||
OB = Orenburg Oblast
|
||||
BS = Republic of Bashkortostan
|
||||
UL = Ulyanovsk Oblast
|
||||
CU = Chuvash Republic
|
||||
TA = Republic of Tatarstan
|
||||
ML = Mari El Republic
|
||||
UD = Udmurt Republic
|
||||
KI = Kirov Oblast
|
||||
PE = Perm Krai
|
||||
VN = Voronezh Oblast
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "jqvmap",
|
||||
"version": "1.5.0",
|
||||
"homepage": "http://jqvmap.com",
|
||||
"authors": [
|
||||
"JQVMap"
|
||||
],
|
||||
"license": "(MIT OR GPL-3.0)",
|
||||
"description": "jQuery Vector Map Library",
|
||||
"main": "dist/jquery.vmap.min.js",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"map",
|
||||
"svg",
|
||||
"vml",
|
||||
"vector"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/manifestinteractive/jqvmap.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": ">=1.11.3"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
|
||||
|
||||
Creating Custom Maps for JQVMaps
|
||||
===
|
||||
|
||||
Special thanks again to [jvectormap](http://jvectormap.com) for creating the base converter for this. I have flushed out the documentation a little more for any Python newbies out there ( like myself ).
|
||||
|
||||
Creating maps is actually a bit of work, and should really only be done by those familiar with Python & a Terminal Window, as these are the tools you will need to create maps. If you are OK with this, here is what you need to know to get started:
|
||||
|
||||
Requirements
|
||||
---
|
||||
|
||||
#### Overview:
|
||||
|
||||
You will need to have the following installed:
|
||||
|
||||
1. [Python](https://www.python.org/downloads/) _( 2.7+ )_
|
||||
2. [GDAL](http://trac.osgeo.org/gdal/wiki/DownloadingGdalBinaries) _( OS Binary )_
|
||||
3. [GDAL](https://pypi.python.org/pypi/GDAL/) _( Python Package )_
|
||||
4. [Shapely](https://pypi.python.org/pypi/Shapely/1.2.16) _( Python Package )_
|
||||
5. [Booleano](http://code.gustavonarea.net/booleano/index.html) _( Python Package )_
|
||||
|
||||
|
||||
Installing Software:
|
||||
---
|
||||
|
||||
#### Step #1:
|
||||
|
||||
Download & Install Python by clicking one of the Download Python buttons on the [Python Website](https://www.python.org/downloads/). We are using `v2.7.10`.
|
||||
|
||||
#### Step #2:
|
||||
|
||||
Open a Terminal window and make sure Python installed correctly by typing the following:
|
||||
|
||||
```bash
|
||||
which pip
|
||||
```
|
||||
|
||||
which should return something like ( if it did not, you did not install Python correctly ):
|
||||
|
||||
```
|
||||
/Library/Frameworks/Python.framework/Versions/2.7/bin/pip
|
||||
```
|
||||
|
||||
You may also wish to update PIP to disable upgrade warnings in the future:
|
||||
|
||||
```bash
|
||||
pip install --upgrade pip
|
||||
```
|
||||
|
||||
#### Step #3:
|
||||
|
||||
Now we need to install the [GDAL/OGR binaries](http://trac.osgeo.org/gdal/wiki/DownloadingGdalBinaries) and follow the steps they layout for your designated OS.
|
||||
|
||||
__OSX:__
|
||||
|
||||
Download and install the [GDAL 1.11 Complete](http://www.kyngchaos.com/files/software/frameworks/GDAL_Complete-1.11.dmg) Package.
|
||||
|
||||
Alternatively, If you have [Homebew](http://brew.sh/) installed, you can run the following, though I personally had issues with it working 100%
|
||||
|
||||
```bash
|
||||
brew update
|
||||
brew install gdal
|
||||
```
|
||||
|
||||
__Windows:__
|
||||
|
||||
You should be able to run [Maptools](http://www.maptools.org/ms4w/index.phtml?page=downloads.html) custom [MS4W installer](http://www.maptools.org/dl/ms4w/ms4w-3.0.6-setup.exe) to get everything you need.
|
||||
|
||||
#### Step #4:
|
||||
|
||||
With Python & GDAL Binaries installed, we can now install the required Python packages via the following Terminal Commands:
|
||||
|
||||
|
||||
```bash
|
||||
sudo easy_install GDAL
|
||||
pip install shapely
|
||||
pip install booleano
|
||||
```
|
||||
|
||||
Note: If you have issues installing a Python Package, please visit the links in the Requirements Overview for detailed install instructions.
|
||||
|
||||
|
||||
Downloading Map Sources
|
||||
---
|
||||
|
||||
Before you can create custom maps, you need to download the vector data from the source. You will need to use a search engine to find the Shapefile for the map you want to create. This can usually be done by just searching for something like "New York Shapefile" or "Syria Shapefile" in Google.
|
||||
|
||||
Once you have the Shapefile you want, just download it and copy the unzipped directory of files you want to the `./create/source` folder in this project.
|
||||
|
||||
If you would like to test the sample map config files we have in this project, you will need to download the following ( which are also good sources for maps in general ):
|
||||
|
||||
1. [SHP/GeoDB Vector Themes](http://naciscdn.org/naturalearth/packages/natural_earth_vector.zip) from [Natural Earth](http://www.naturalearthdata.com/downloads/). Unzip the `natural_earth_vector.zip` file and copy the entire `natural_earth_vector` folder to the `./create/source` folder in this project. __TIP:__ If you plan on using this source, `code_field` is `iso_a3` and `name_field` is `name_long`.
|
||||
|
||||
2. [Global Administrative Areas](http://www.gadm.org/country) has an updated Shapefile for pretty much every country. Just select the `Country` you want ( for this example, `Syria` ) and set `File format` to `Shapefile` and press the `OK` button to download. This will take you to a download page. Click the `download` link and save the zip file. For this example, unzip the `SYR_adm_shp.zip` file and copy the entire `SYR_adm_shp` folder to the `./create/source` folder in this project. __TIP:__ If you plan on using this source, `code_field` is `ISO` and `name_field` is `NAME_ENGLI`.
|
||||
|
||||
3. [New York - Borough Boundaries (Clipped to Shoreline)](http://www.nyc.gov/html/dcp/download/bytes/nybb_15d.zip) from the [NYC.gov](http://www.nyc.gov/html/dcp/html/bytes/districts_download_metadata.shtml) website. Unzip the `nybb_15d.zip` file and copy the entire `nybb_15d` folder to the `./create/source` folder in this project.
|
||||
|
||||
|
||||
Creating Maps
|
||||
---
|
||||
|
||||
#### Setup Environment
|
||||
|
||||
As detected by [@andreasspeck](https://github.com/andreasspeck) you will need to add the following Environmental Variable to create more complex maps without issues. In a Terminal Window, run the following command before attempting to create a map:
|
||||
|
||||
```bash
|
||||
export OGR_ENABLE_PARTIAL_REPROJECTION=TRUE
|
||||
```
|
||||
|
||||
If you plan on creating multiple maps in the future, you may wish to just add that line above to your profile by editing your `.bash_profile`, `.profile` or `.zshrc` file ( whatever you are using OS ).
|
||||
|
||||
If you choose to edit your profile, make sure you run the source command to add it to your current Terminal session.
|
||||
|
||||
```bash
|
||||
source .bash_profile
|
||||
```
|
||||
|
||||
#### Map Configurations
|
||||
|
||||
You can create a custom JSON file and save it in the `./create/config` folder.
|
||||
|
||||
A sample `my-map.json` configuration file would look something like this:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"name": "read_data",
|
||||
"file_name": "./source/some-folder/some-file.shp"
|
||||
},
|
||||
{
|
||||
"name": "write_data",
|
||||
"format": "jqvmap",
|
||||
"file_name": "./output/jquery.vmap.my-map.js",
|
||||
"params": {
|
||||
"code_field": "iso_column",
|
||||
"name_field": "name_column",
|
||||
"name": "my-map"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You will need to pay special attention to what the `code_field` and `name_field` parameters are, as these are what are used in the map creator. These are usually found along side your `.shp` file as either an `.csv` file or `.xml`. You might need to use a DBF Viewer to view the `.dbf` file if a CSV & XML don't exists.
|
||||
|
||||
For `code_field` you are just looking for the column name that has the ISO Code ( 2-3 letters ).
|
||||
|
||||
For `name_field` you are just looking for the column name that has the ISO Name ( English Name ).
|
||||
|
||||
Once you have created a config file, and set the `file_name` for `read_data` and `write_data`, you can run the following command in a Terminal Window.
|
||||
|
||||
```bash
|
||||
cd /path/to/jqvmap/create
|
||||
python jqvmap.py config/my-map.json
|
||||
```
|
||||
|
||||
The map creator will output the new JQVMap files into the `./create/output` folder.
|
||||
|
||||
#### Sample Map Configurations
|
||||
|
||||
We have already setup a few custom config files for you to play with. With a Terminal Window open, run the following commands ( make sure to change `/path/to/jqvmap` to wherever you have this project installed. ):
|
||||
|
||||
```bash
|
||||
cd /path/to/jqvmap/create
|
||||
python jqvmap.py config/continent.json
|
||||
python jqvmap.py config/new-york.json
|
||||
python jqvmap.py config/syria.json
|
||||
```
|
||||
|
||||
#### Map Configuration JSON Options:
|
||||
|
||||
The following are the complete list of JSON configuration options for you to use. Make sure to look at the samples in the config folder to get an idea on how to use these with your map.
|
||||
|
||||
|Command|Config|Option|Description|
|
||||
|---|---|---|---|
|
||||
|`read_data`| | |Read geometries from GIS data file|
|
||||
| |`file_name`| |The name of the file to read|
|
||||
| |`longitude0`| |Central meridian coordinate|
|
||||
| |`projection`| |The map projection to use, currently implemented projections are `merc` (Mercator), `mill` (Miller Cylindrical), `aea` (Albers Equal Area) & `lcc` (Lambert Conformal Conic)|
|
||||
|`write_data`| | |Writes geometries to file|
|
||||
| |`file_name`| |The name of the file to write|
|
||||
| |`format`| |Format of data to write, `jqvmap` for JQVMap compatible format, no value for OGR format|
|
||||
| |`params`| |Hash with parameters to supply to writer, the following parameters are used in case of jqvmap format:|
|
||||
| | |`code_field`|Name of field to use as a region code|
|
||||
| | |`name_field`|Name of field to use as a region name|
|
||||
| | |`name`|Map base name|
|
||||
|`union`| | |Merges geometries with the same value for one field|
|
||||
| |`by`| |The name of the field to merge geometries by|
|
||||
|`join_data`| | |Adds or rewrites properties for geoemtry based on equal values in another field, works similar to JOIN operation from SQL|
|
||||
| |`data`| |This could raw data to join or file name of CSv file with data to load|
|
||||
| |`fields`| |Array describing fields, which data contains|
|
||||
| |`on`| |Field to match to join data|
|
||||
|`remove`| | |Removes geometries and their properties based on logical expression|
|
||||
| |`where `| |Expression to evaluate for each geometry|
|
||||
|`remove_fields`| | |Removes fields and associated properties|
|
||||
| |`fields`| |Array with field names to remove|
|
||||
|`remove_other_fields`| | |Removes all fields and associated properties except the ones provided|
|
||||
| |`fields`| |Array with field names to preserve|
|
||||
|`buffer`| | |Removes (erosion) or adds (dilation) zone around every geoemtry|
|
||||
| |`distance`| | |
|
||||
| |`resolution`| | |
|
||||
|`simplify_adjancent_polygons`| | |Simplifies polygons taking topology into account (shared borders remain shared after operation)|
|
||||
| |`tolerance`| |Simplification tolerance|
|
||||
|`intersect_rect`| | |Cuts out everything beyond boubdaries of supplied rectangle|
|
||||
| |`rect`| |Array with four values, defining left-top and right-bottom corners of rectange|
|
||||
|`remove_small_polygons`| | |Removes polygons which area is less than supplied value|
|
||||
| |`minimal_area`| | |
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
[
|
||||
{
|
||||
"name": "read_data",
|
||||
"file_name": "./source/natural_earth_vector/110m_cultural/ne_110m_admin_0_countries_lakes.shp",
|
||||
"filter": "continent != \"Antarctica\" AND continent != \"Seven seas (open ocean)\"",
|
||||
"longitude0": 11.5
|
||||
},
|
||||
{
|
||||
"name": "join_data",
|
||||
"data": [
|
||||
[
|
||||
"Africa",
|
||||
"AF"
|
||||
],
|
||||
[
|
||||
"Asia",
|
||||
"AS"
|
||||
],
|
||||
[
|
||||
"Europe",
|
||||
"EU"
|
||||
],
|
||||
[
|
||||
"North America",
|
||||
"NA"
|
||||
],
|
||||
[
|
||||
"South America",
|
||||
"SA"
|
||||
],
|
||||
[
|
||||
"Oceania",
|
||||
"OC"
|
||||
]
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
"name": "continent",
|
||||
"type": 4,
|
||||
"width": 100
|
||||
},
|
||||
{
|
||||
"name": "cont_code",
|
||||
"type": 4,
|
||||
"width": 4
|
||||
}
|
||||
],
|
||||
"on": "continent"
|
||||
},
|
||||
{
|
||||
"name": "union",
|
||||
"by": "cont_code"
|
||||
},
|
||||
{
|
||||
"name": "write_data",
|
||||
"format": "jqvmap",
|
||||
"file_name": "./output/jquery.vmap.world.js",
|
||||
"params": {
|
||||
"code_field": "cont_code",
|
||||
"name_field": "continent",
|
||||
"name": "continents"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
[
|
||||
{
|
||||
"name": "read_data",
|
||||
"file_name": "./source/nybb_15d/nybb.shp"
|
||||
},
|
||||
{
|
||||
"name": "write_data",
|
||||
"format": "jqvmap",
|
||||
"file_name": "./output/jquery.vmap.new-york.js",
|
||||
"params": {
|
||||
"code_field": "BoroCode",
|
||||
"name_field": "BoroName",
|
||||
"name": "us-ny-new-york"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
[
|
||||
{
|
||||
"name": "read_data",
|
||||
"file_name": "./source/SYR_adm_shp/SYR_adm0.shp"
|
||||
},
|
||||
{
|
||||
"name": "write_data",
|
||||
"format": "jqvmap",
|
||||
"file_name": "./output/jquery.vmap.syria.js",
|
||||
"params": {
|
||||
"code_field": "ISO",
|
||||
"name_field": "NAME_ENGLI",
|
||||
"name": "syria"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,573 @@
|
|||
import sys
|
||||
import json
|
||||
import csv
|
||||
import shapely.wkb
|
||||
import shapely.geometry
|
||||
import shapely.ops
|
||||
import os
|
||||
import copy
|
||||
from osgeo import ogr
|
||||
from osgeo import osr
|
||||
from booleano.parser import Grammar, EvaluableParseManager, SymbolTable, Bind
|
||||
from booleano.operations import Variable
|
||||
|
||||
|
||||
class JQVMap:
|
||||
def __init__(self, name, language):
|
||||
self.paths = {}
|
||||
self.name = name
|
||||
self.language = language
|
||||
self.width = 0
|
||||
self.height = 0
|
||||
self.bbox = []
|
||||
|
||||
def addPath(self, path, code, name):
|
||||
self.paths[code] = {"path": path, "name": name}
|
||||
|
||||
def getJSCode(self):
|
||||
map = {"paths": self.paths, "width": self.width, "height": self.height, "insets": self.insets, "projection": self.projection}
|
||||
header = "/** JQVMap " + self.projection['type'] + " map for " + self.name + " */"
|
||||
js = "jQuery.fn.vectorMap('addMap', '" + self.name + "'," + json.dumps(map) + ");"
|
||||
return header + "\n" + js
|
||||
|
||||
|
||||
class Converter:
|
||||
def __init__(self, config):
|
||||
args = {
|
||||
'buffer_distance': -0.4,
|
||||
'simplify_tolerance': 0.2,
|
||||
'longitude0': 0,
|
||||
'projection': 'mill',
|
||||
'name': 'world',
|
||||
'width': 900,
|
||||
'left': 0,
|
||||
'top': 0,
|
||||
'language': 'en',
|
||||
'precision': 2,
|
||||
'insets': []
|
||||
}
|
||||
args.update(config)
|
||||
|
||||
self.config = args
|
||||
|
||||
self.map = JQVMap(args['name'], args.get('language'))
|
||||
|
||||
if args.get('sources'):
|
||||
self.sources = args['sources']
|
||||
else:
|
||||
self.sources = [{
|
||||
'input_file': args.get('input_file'),
|
||||
'where': args.get('where'),
|
||||
'name_field': args.get('name_field'),
|
||||
'code_field': args.get('code_field'),
|
||||
'input_file_encoding': args.get('input_file_encoding')
|
||||
}]
|
||||
|
||||
default_source = {
|
||||
'where': '',
|
||||
'name_field': 0,
|
||||
'code_field': 1,
|
||||
'input_file_encoding': 'iso-8859-1'
|
||||
}
|
||||
|
||||
for index in range(len(self.sources)):
|
||||
for key in default_source:
|
||||
if self.sources[index].get(key) is None:
|
||||
self.sources[index][key] = default_source[key]
|
||||
|
||||
self.features = {}
|
||||
self.width = args.get('width')
|
||||
self.left = args.get('left')
|
||||
self.top = args.get('top')
|
||||
self.minimal_area = args.get('minimal_area')
|
||||
self.longitude0 = float(args.get('longitude0'))
|
||||
self.projection = args.get('projection')
|
||||
self.precision = args.get('precision')
|
||||
self.buffer_distance = args.get('buffer_distance')
|
||||
self.simplify_tolerance = args.get('simplify_tolerance')
|
||||
self.for_each = args.get('for_each')
|
||||
self.emulate_longitude0 = args.get('emulate_longitude0')
|
||||
if args.get('emulate_longitude0') is None and (self.projection == 'merc' or self.projection =='mill') and self.longitude0 != 0:
|
||||
self.emulate_longitude0 = True
|
||||
|
||||
if args.get('viewport'):
|
||||
self.viewport = map(lambda s: float(s), args.get('viewport').split(' '))
|
||||
else:
|
||||
self.viewport = False
|
||||
|
||||
# spatial reference to convert to
|
||||
self.spatialRef = osr.SpatialReference()
|
||||
projString = '+proj='+str(self.projection)+' +a=6381372 +b=6381372 +lat_0=0'
|
||||
if not self.emulate_longitude0:
|
||||
projString += ' +lon_0='+str(self.longitude0)
|
||||
self.spatialRef.ImportFromProj4(projString)
|
||||
|
||||
# handle map insets
|
||||
if args.get('insets'):
|
||||
self.insets = args.get('insets')
|
||||
else:
|
||||
self.insets = []
|
||||
|
||||
|
||||
def convert(self, data_source, output_file):
|
||||
codes = map(lambda g: g.properties[self.config['code_field']], data_source.geometries)
|
||||
main_codes = copy.copy(codes)
|
||||
self.map.insets = []
|
||||
envelope = []
|
||||
for inset in self.insets:
|
||||
insetBbox = self.renderMapInset(data_source, inset['codes'], inset['left'], inset['top'], inset['width'])
|
||||
insetHeight = (insetBbox[3] - insetBbox[1]) * (inset['width'] / (insetBbox[2] - insetBbox[0]))
|
||||
self.map.insets.append({
|
||||
"bbox": [{"x": insetBbox[0], "y": -insetBbox[3]}, {"x": insetBbox[2], "y": -insetBbox[1]}],
|
||||
"left": inset['left'],
|
||||
"top": inset['top'],
|
||||
"width": inset['width'],
|
||||
"height": insetHeight
|
||||
})
|
||||
envelope.append(
|
||||
shapely.geometry.box(
|
||||
inset['left'], inset['top'], inset['left'] + inset['width'], inset['top'] + insetHeight
|
||||
)
|
||||
)
|
||||
for code in inset['codes']:
|
||||
main_codes.remove(code)
|
||||
|
||||
insetBbox = self.renderMapInset(data_source, main_codes, self.left, self.top, self.width)
|
||||
insetHeight = (insetBbox[3] - insetBbox[1]) * (self.width / (insetBbox[2] - insetBbox[0]))
|
||||
envelope.append( shapely.geometry.box( self.left, self.top, self.left + self.width, self.top + insetHeight ) )
|
||||
mapBbox = shapely.geometry.MultiPolygon( envelope ).bounds
|
||||
|
||||
self.map.width = mapBbox[2] + mapBbox[0]
|
||||
self.map.height = mapBbox[3] + mapBbox[1]
|
||||
self.map.insets.append({
|
||||
"bbox": [{"x": insetBbox[0], "y": -insetBbox[3]}, {"x": insetBbox[2], "y": -insetBbox[1]}],
|
||||
"left": self.left,
|
||||
"top": self.top,
|
||||
"width": self.width,
|
||||
"height": insetHeight
|
||||
})
|
||||
self.map.projection = {"type": self.projection, "centralMeridian": float(self.longitude0)}
|
||||
|
||||
open(output_file, 'w').write( self.map.getJSCode() )
|
||||
|
||||
if self.for_each is not None:
|
||||
for code in codes:
|
||||
childConfig = copy.deepcopy(self.for_each)
|
||||
for param in ('input_file', 'output_file', 'where', 'name'):
|
||||
childConfig[param] = childConfig[param].replace('{{code}}', code.lower())
|
||||
converter = Converter(childConfig)
|
||||
converter.convert(childConfig['output_file'])
|
||||
|
||||
def renderMapInset(self, data_source, codes, left, top, width):
|
||||
envelope = []
|
||||
geometries = filter(lambda g: g.properties[self.config['code_field']] in codes, data_source.geometries)
|
||||
for geometry in geometries:
|
||||
envelope.append( geometry.geom.envelope )
|
||||
|
||||
bbox = shapely.geometry.MultiPolygon( envelope ).bounds
|
||||
|
||||
scale = (bbox[2]-bbox[0]) / width
|
||||
|
||||
# generate SVG paths
|
||||
for geometry in geometries:
|
||||
geom = geometry.geom
|
||||
if self.buffer_distance:
|
||||
geom = geom.buffer(self.buffer_distance*scale, 1)
|
||||
if geom.is_empty:
|
||||
continue
|
||||
if self.simplify_tolerance:
|
||||
geom = geom.simplify(self.simplify_tolerance*scale, preserve_topology=True)
|
||||
if isinstance(geom, shapely.geometry.multipolygon.MultiPolygon):
|
||||
polygons = geom.geoms
|
||||
else:
|
||||
polygons = [geom]
|
||||
path = ''
|
||||
for polygon in polygons:
|
||||
rings = []
|
||||
rings.append(polygon.exterior)
|
||||
rings.extend(polygon.interiors)
|
||||
for ring in rings:
|
||||
for pointIndex in range( len(ring.coords) ):
|
||||
point = ring.coords[pointIndex]
|
||||
if pointIndex == 0:
|
||||
path += 'M'+str( round( (point[0]-bbox[0]) / scale + left, self.precision) )
|
||||
path += ','+str( round( (bbox[3] - point[1]) / scale + top, self.precision) )
|
||||
else:
|
||||
path += 'l' + str( round(point[0]/scale - ring.coords[pointIndex-1][0]/scale, self.precision) )
|
||||
path += ',' + str( round(ring.coords[pointIndex-1][1]/scale - point[1]/scale, self.precision) )
|
||||
path += 'Z'
|
||||
self.map.addPath(path, geometry.properties[self.config['code_field']].lower(), geometry.properties[self.config['name_field']])
|
||||
return bbox
|
||||
|
||||
|
||||
class Geometry:
|
||||
def __init__(self, geometry, properties):
|
||||
self.geom = geometry
|
||||
self.properties = properties
|
||||
|
||||
|
||||
class GeometryProperty(Variable):
|
||||
operations = set(["equality", "membership"])
|
||||
|
||||
def __init__(self, name):
|
||||
self.name = name
|
||||
|
||||
def equals(self, value, context):
|
||||
return context[self.name] == value
|
||||
|
||||
def belongs_to(self, value, context):
|
||||
return value in context[self.name]
|
||||
|
||||
def is_subset(self, value, context):
|
||||
return set(value).issubset(set(context[self.name]))
|
||||
|
||||
def to_python(self, value):
|
||||
return unicode(value[self.name])
|
||||
|
||||
|
||||
class DataSource:
|
||||
def __init__(self, config):
|
||||
default_config = {
|
||||
"projection": "merc",
|
||||
"longitude0": 0
|
||||
}
|
||||
default_config.update(config)
|
||||
self.config = default_config
|
||||
|
||||
self.spatialRef = osr.SpatialReference()
|
||||
projString = '+proj='+str(self.config['projection'])+' +a=6381372 +b=6381372 +lat_0=0'
|
||||
#if 'emulate_longitude0' in self.config and not self.config['emulate_longitude0']:
|
||||
projString += ' +lon_0='+str(self.config['longitude0'])
|
||||
self.spatialRef.ImportFromProj4(projString)
|
||||
|
||||
def load_data(self):
|
||||
self.source = ogr.Open( self.config['file_name'], update = 0 )
|
||||
self.layer = self.source.GetLayer(0)
|
||||
if 'filter' in self.config and self.config['filter'] is not None:
|
||||
self.layer.SetAttributeFilter( self.config['filter'].encode('ascii') )
|
||||
self.layer_dfn = self.layer.GetLayerDefn()
|
||||
|
||||
self.fields = []
|
||||
field_count = self.layer_dfn.GetFieldCount()
|
||||
for field_index in range(field_count):
|
||||
field = self.layer_dfn.GetFieldDefn( field_index )
|
||||
self.fields.append({
|
||||
'name': field.GetName(),
|
||||
'type': field.GetType(),
|
||||
'width': field.GetWidth(),
|
||||
'precision': field.GetPrecision()
|
||||
})
|
||||
|
||||
self.geometries = []
|
||||
|
||||
for feature in self.layer:
|
||||
geometry = feature.GetGeometryRef()
|
||||
geometry.TransformTo( self.spatialRef )
|
||||
geometry = shapely.wkb.loads( geometry.ExportToWkb() )
|
||||
if not geometry.is_valid:
|
||||
geometry = geometry.buffer(0)
|
||||
properties = {}
|
||||
for field in self.fields:
|
||||
properties[field['name']] = feature.GetFieldAsString(field['name']).decode('utf-8')
|
||||
self.geometries.append( Geometry(geometry, properties) )
|
||||
|
||||
self.layer.ResetReading()
|
||||
|
||||
self.create_grammar()
|
||||
|
||||
def create_grammar(self):
|
||||
root_table = SymbolTable("root",
|
||||
map( lambda f: Bind(f['name'], GeometryProperty(f['name'])), self.fields )
|
||||
)
|
||||
|
||||
tokens = {
|
||||
'not': 'not',
|
||||
'eq': '==',
|
||||
'ne': '!=',
|
||||
'belongs_to': 'in',
|
||||
'is_subset': 'are included in',
|
||||
'or': "or",
|
||||
'and': 'and'
|
||||
}
|
||||
grammar = Grammar(**tokens)
|
||||
self.parse_manager = EvaluableParseManager(root_table, grammar)
|
||||
|
||||
def output(self, output):
|
||||
if output.get('format') == 'jqvmap':
|
||||
self.output_jvm(output)
|
||||
else:
|
||||
self.output_ogr(output)
|
||||
|
||||
def output_ogr(self, output):
|
||||
driver = ogr.GetDriverByName( 'ESRI Shapefile' )
|
||||
if os.path.exists( output['file_name'] ):
|
||||
driver.DeleteDataSource( output['file_name'] )
|
||||
source = driver.CreateDataSource( output['file_name'] )
|
||||
layer = source.CreateLayer( self.layer_dfn.GetName(),
|
||||
geom_type = self.layer_dfn.GetGeomType(),
|
||||
srs = self.layer.GetSpatialRef() )
|
||||
|
||||
for field in self.fields:
|
||||
fd = ogr.FieldDefn( str(field['name']), field['type'] )
|
||||
fd.SetWidth( field['width'] )
|
||||
if 'precision' in field:
|
||||
fd.SetPrecision( field['precision'] )
|
||||
layer.CreateField( fd )
|
||||
|
||||
for geometry in self.geometries:
|
||||
if geometry.geom is not None:
|
||||
feature = ogr.Feature( feature_def = layer.GetLayerDefn() )
|
||||
for index, field in enumerate(self.fields):
|
||||
if field['name'] in geometry.properties:
|
||||
feature.SetField( index, geometry.properties[field['name']].encode('utf-8') )
|
||||
else:
|
||||
feature.SetField( index, '' )
|
||||
feature.SetGeometryDirectly(
|
||||
ogr.CreateGeometryFromWkb(
|
||||
shapely.wkb.dumps(
|
||||
geometry.geom
|
||||
)
|
||||
)
|
||||
)
|
||||
layer.CreateFeature( feature )
|
||||
feature.Destroy()
|
||||
|
||||
source.Destroy()
|
||||
|
||||
def output_jvm(self, output):
|
||||
params = copy.deepcopy(output['params'])
|
||||
params.update({
|
||||
"projection": self.config["projection"],
|
||||
"longitude0": self.config["longitude0"]
|
||||
})
|
||||
converter = Converter(params)
|
||||
converter.convert(self, output['file_name'])
|
||||
|
||||
class PolygonSimplifier:
|
||||
def __init__(self, geometries):
|
||||
self.format = '%.8f %.8f'
|
||||
self.tolerance = 0.05
|
||||
self.geometries = geometries
|
||||
|
||||
connections = {}
|
||||
counter = 0
|
||||
for geom in geometries:
|
||||
counter += 1
|
||||
polygons = []
|
||||
|
||||
if isinstance(geom, shapely.geometry.Polygon):
|
||||
polygons.append(geom)
|
||||
else:
|
||||
for polygon in geom:
|
||||
polygons.append(polygon)
|
||||
|
||||
for polygon in polygons:
|
||||
if polygon.area > 0:
|
||||
lines = []
|
||||
lines.append(polygon.exterior)
|
||||
for line in polygon.interiors:
|
||||
lines.append(line)
|
||||
|
||||
for line in lines:
|
||||
for i in range(len(line.coords)-1):
|
||||
indexFrom = i
|
||||
indexTo = i+1
|
||||
pointFrom = self.format % line.coords[indexFrom]
|
||||
pointTo = self.format % line.coords[indexTo]
|
||||
if pointFrom == pointTo:
|
||||
continue
|
||||
if not (pointFrom in connections):
|
||||
connections[pointFrom] = {}
|
||||
connections[pointFrom][pointTo] = 1
|
||||
if not (pointTo in connections):
|
||||
connections[pointTo] = {}
|
||||
connections[pointTo][pointFrom] = 1
|
||||
self.connections = connections
|
||||
self.simplifiedLines = {}
|
||||
self.pivotPoints = {}
|
||||
|
||||
def simplifyRing(self, ring):
|
||||
coords = list(ring.coords)[0:-1]
|
||||
simpleCoords = []
|
||||
|
||||
isPivot = False
|
||||
pointIndex = 0
|
||||
while not isPivot and pointIndex < len(coords):
|
||||
pointStr = self.format % coords[pointIndex]
|
||||
pointIndex += 1
|
||||
isPivot = ((len(self.connections[pointStr]) > 2) or (pointStr in self.pivotPoints))
|
||||
pointIndex = pointIndex - 1
|
||||
|
||||
if not isPivot:
|
||||
simpleRing = shapely.geometry.LineString(coords).simplify(self.tolerance)
|
||||
if len(simpleRing.coords) <= 2:
|
||||
return None
|
||||
else:
|
||||
self.pivotPoints[self.format % coords[0]] = True
|
||||
self.pivotPoints[self.format % coords[-1]] = True
|
||||
simpleLineKey = self.format % coords[0]+':'+self.format % coords[1]+':'+self.format % coords[-1]
|
||||
self.simplifiedLines[simpleLineKey] = simpleRing.coords
|
||||
return simpleRing
|
||||
else:
|
||||
points = coords[pointIndex:len(coords)]
|
||||
points.extend(coords[0:pointIndex+1])
|
||||
iFrom = 0
|
||||
for i in range(1, len(points)):
|
||||
pointStr = self.format % points[i]
|
||||
if ((len(self.connections[pointStr]) > 2) or (pointStr in self.pivotPoints)):
|
||||
line = points[iFrom:i+1]
|
||||
lineKey = self.format % line[-1]+':'+self.format % line[-2]+':'+self.format % line[0]
|
||||
if lineKey in self.simplifiedLines:
|
||||
simpleLine = self.simplifiedLines[lineKey]
|
||||
simpleLine = list(reversed(simpleLine))
|
||||
else:
|
||||
simpleLine = shapely.geometry.LineString(line).simplify(self.tolerance).coords
|
||||
lineKey = self.format % line[0]+':'+self.format % line[1]+':'+self.format % line[-1]
|
||||
self.simplifiedLines[lineKey] = simpleLine
|
||||
simpleCoords.extend( simpleLine[0:-1] )
|
||||
iFrom = i
|
||||
if len(simpleCoords) <= 2:
|
||||
return None
|
||||
else:
|
||||
return shapely.geometry.LineString(simpleCoords)
|
||||
|
||||
def simplifyPolygon(self, polygon):
|
||||
simpleExtRing = self.simplifyRing(polygon.exterior)
|
||||
if simpleExtRing is None:
|
||||
return None
|
||||
simpleIntRings = []
|
||||
for ring in polygon.interiors:
|
||||
simpleIntRing = self.simplifyRing(ring)
|
||||
if simpleIntRing is not None:
|
||||
simpleIntRings.append(simpleIntRing)
|
||||
return shapely.geometry.Polygon(simpleExtRing, simpleIntRings)
|
||||
|
||||
def simplify(self):
|
||||
results = []
|
||||
for geom in self.geometries:
|
||||
polygons = []
|
||||
simplePolygons = []
|
||||
|
||||
if isinstance(geom, shapely.geometry.Polygon):
|
||||
polygons.append(geom)
|
||||
else:
|
||||
for polygon in geom:
|
||||
polygons.append(polygon)
|
||||
|
||||
for polygon in polygons:
|
||||
simplePolygon = self.simplifyPolygon(polygon)
|
||||
if not (simplePolygon is None or simplePolygon._geom is None):
|
||||
simplePolygons.append(simplePolygon)
|
||||
|
||||
if len(simplePolygons) > 0:
|
||||
results.append(shapely.geometry.MultiPolygon(simplePolygons))
|
||||
else:
|
||||
results.append(None)
|
||||
return results
|
||||
|
||||
|
||||
class Processor:
|
||||
def __init__(self, config):
|
||||
self.config = config
|
||||
|
||||
def process(self):
|
||||
self.data_sources = {}
|
||||
for action in self.config:
|
||||
getattr(self, action['name'])( action, self.data_sources.get(".") )
|
||||
|
||||
def read_data(self, config, data_source):
|
||||
self.data_sources["."] = DataSource( config )
|
||||
self.data_sources["."].load_data()
|
||||
|
||||
def write_data(self, config, data_source):
|
||||
data_source.output( config )
|
||||
|
||||
def union(self, config, data_source):
|
||||
groups = {}
|
||||
geometries = []
|
||||
for geometry in data_source.geometries:
|
||||
if geometry.properties[config['by']] in groups:
|
||||
groups[geometry.properties[config['by']]]['geoms'].append(geometry.geom)
|
||||
else:
|
||||
groups[geometry.properties[config['by']]] = {
|
||||
'geoms': [geometry.geom],
|
||||
'properties': geometry.properties
|
||||
}
|
||||
for key in groups:
|
||||
geometries.append( Geometry(shapely.ops.cascaded_union( groups[key]['geoms'] ), groups[key]['properties']) )
|
||||
data_source.geometries = geometries
|
||||
|
||||
def merge(self, config, data_source):
|
||||
new_geometries = []
|
||||
for rule in config['rules']:
|
||||
expression = data_source.parse_manager.parse( rule['where'] )
|
||||
geometries = filter(lambda g: expression(g.properties), data_source.geometries)
|
||||
geometries = map(lambda g: g.geom, geometries)
|
||||
new_geometries.append( Geometry(shapely.ops.cascaded_union( geometries ), rule['fields']) )
|
||||
data_source.fields = config['fields']
|
||||
data_source.geometries = new_geometries
|
||||
|
||||
def join_data(self, config, data_source):
|
||||
field_names = [f['name'] for f in config['fields']]
|
||||
if 'data' in config:
|
||||
data_col = config['data']
|
||||
else:
|
||||
data_file = open(config['file_name'], 'rb')
|
||||
data_col = csv.reader(data_file, delimiter='\t', quotechar='"')
|
||||
data = {}
|
||||
for row in data_col:
|
||||
row_dict = dict(zip(field_names, row))
|
||||
data[row_dict.pop(config['on'])] = row_dict
|
||||
for geometry in data_source.geometries:
|
||||
if geometry.properties[config['on']] in data:
|
||||
geometry.properties.update( data[geometry.properties[config['on']]] )
|
||||
field_names = map(lambda f: f['name'], data_source.fields)
|
||||
data_source.fields = data_source.fields + filter(lambda f: f['name'] not in field_names, config['fields'])
|
||||
|
||||
def remove(self, config, data_source):
|
||||
expression = data_source.parse_manager.parse( config['where'] )
|
||||
data_source.geometries = filter(lambda g: not expression(g.properties), data_source.geometries)
|
||||
|
||||
def remove_fields(self, config, data_source):
|
||||
data_source.fields = filter(lambda f: f.name not in config['fields'], data_source.fields)
|
||||
|
||||
def remove_other_fields(self, config, data_source):
|
||||
data_source.fields = filter(lambda f: f['name'] in config['fields'], data_source.fields)
|
||||
|
||||
def buffer(self, config, data_source):
|
||||
for geometry in data_source.geometries:
|
||||
geometry.geom = geometry.geom.buffer(config['distance'], config['resolution'])
|
||||
|
||||
def simplify_adjancent_polygons(self, config, data_source):
|
||||
simple_geometries = PolygonSimplifier( map( lambda g: g.geom, data_source.geometries ) ).simplify()
|
||||
for i in range(len(data_source.geometries)):
|
||||
data_source.geometries[i].geom = simple_geometries[i]
|
||||
|
||||
def intersect_rect(self, config, data_source):
|
||||
transform = osr.CoordinateTransformation( data_source.layer.GetSpatialRef(), data_source.spatialRef )
|
||||
point1 = transform.TransformPoint(config['rect'][0], config['rect'][1])
|
||||
point2 = transform.TransformPoint(config['rect'][2], config['rect'][3])
|
||||
rect = shapely.geometry.box(point1[0], point1[1], point2[0], point2[1])
|
||||
for geometry in data_source.geometries:
|
||||
geometry.geom = geometry.geom.intersection(rect)
|
||||
|
||||
def remove_small_polygons(self, config, data_source):
|
||||
for geometry in data_source.geometries:
|
||||
if isinstance(geometry.geom, shapely.geometry.multipolygon.MultiPolygon):
|
||||
polygons = geometry.geom.geoms
|
||||
else:
|
||||
polygons = [geometry.geom]
|
||||
polygons = filter(lambda p: p.area > config['minimal_area'], polygons)
|
||||
if len(polygons) > 0:
|
||||
geometry.geom = shapely.geometry.multipolygon.MultiPolygon(polygons)
|
||||
|
||||
|
||||
args = {}
|
||||
if len(sys.argv) > 1:
|
||||
paramsJson = open(sys.argv[1], 'r').read()
|
||||
else:
|
||||
paramsJson = sys.stdin.read()
|
||||
paramsJson = json.loads(paramsJson)
|
||||
|
||||
processor = Processor(paramsJson)
|
||||
processor.process()
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,50 @@
|
|||
.jqvmap-label
|
||||
{
|
||||
position: absolute;
|
||||
display: none;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #292929;
|
||||
color: white;
|
||||
font-family: sans-serif, Verdana;
|
||||
font-size: smaller;
|
||||
padding: 3px;
|
||||
pointer-events:none;
|
||||
}
|
||||
.jqvmap-pin {
|
||||
pointer-events:none;
|
||||
}
|
||||
.jqvmap-zoomin, .jqvmap-zoomout
|
||||
{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #000000;
|
||||
padding: 3px;
|
||||
color: white;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
cursor: pointer;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.jqvmap-zoomin
|
||||
{
|
||||
top: 10px;
|
||||
}
|
||||
.jqvmap-zoomout
|
||||
{
|
||||
top: 30px;
|
||||
}
|
||||
.jqvmap-region
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
.jqvmap-ajax_response
|
||||
{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.jqvmap-label,.jqvmap-pin{pointer-events:none}.jqvmap-label{position:absolute;display:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#292929;color:#fff;font-family:sans-serif,Verdana;font-size:smaller;padding:3px}.jqvmap-zoomin,.jqvmap-zoomout{position:absolute;left:10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#000;padding:3px;color:#fff;min-width:10px;min-height:10px;cursor:pointer;line-height:10px;text-align:center}.jqvmap-zoomin{top:10px}.jqvmap-zoomout{top:30px}.jqvmap-region{cursor:pointer}.jqvmap-ajax_response{width:100%;height:500px}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
/** Add World Map Data Points */
|
||||
jQuery.fn.vectorMap('addMap', 'australia_en', {"width":950,"height":550,"paths":{"pg":{"path":"m 484.34788,3.4935749 -1.05721,69.8328711 10.05776,-0.54289 13.22939,-15.458095 11.11497,0.542891 7.1433,6.400394 2.37157,19.715499 22.74426,12.000739 5.82893,-2.142989 v -7.200443 l -18.25827,-15.200936 -9.00055,-20.801281 7.1433,-3.457356 -5.28604,-11.457848 -10.57208,-0.257159 -2.65731,-12.257897 -28.0303,-18.9154509 -4.77172,-0.8000492 0,0 m 79.20488,2.0286963 -2.51444,3.5716485 13.7437,12.1721783 1.88583,7.143297 3.74309,-0.428598 0.4286,-7.343309 -4.17169,-3.771661 -13.11509,-11.3435558 0,0 m 6.88614,17.2296328 -2.71446,0.62861 -1.65724,7.343309 -5.20032,3.371636 -15.62954,2.743026 0.62861,5.886077 16.45816,-0.828622 10.42921,-6.514687 -0.62861,-11.343556 -1.68581,-1.285793 0,0 m 18.54399,12.800788 3.54308,9.85775 6.25753,6.086089 1.88583,-1.685818 -0.62861,-6.514687 -7.08615,-8.60053 -3.97168,0.857196 0,0 z","name":"Papua New Guinea"},"au":{"path":"m 222.64605,231.19331 -1.00006,72.51875 -11.14354,8.17193 -1.00007,7.1433 15.20094,10.20063 37.5166,-7.1433 h 19.25833 l 7.08615,-10.2292 42.57405,-8.17193 30.40187,9.20056 -2.0287,12.2579 4.05739,12.2579 23.31573,-4.08597 1.00006,6.11467 -15.20094,11.22926 5.05746,4.08596 11.14354,-4.08596 -3.02876,33.71636 21.28703,16.34386 12.17217,-4.08596 6.08609,6.11466 35.4879,-5.1146 33.45921,-54.14619 12.17217,-3.05733 24.31579,-44.94563 6.08609,-38.80239 -15.20094,-19.40119 6.08609,-4.08597 -12.17218,-37.80232 -13.17224,-9.20057 2.0287,-51.06029 -12.17218,-9.20056 -3.02876,-28.601766 h -6.08609 l -20.28696,67.404146 -11.14354,1.02864 -25.34442,-25.54443 14.20087,-37.80233 -26.34448,-5.114599 -29.40181,8.171929 -8.11478,23.48716 -13.17224,3.05733 -1.00006,-16.34386 -53.7176,32.68773 1.00006,12.2579 -8.11478,11.22926 h -20.28696 l -43.60269,18.37256 -15.22951,40.97395 0,0 m 184.49708,195.09773 -5.05746,20.42983 1.00006,14.28659 15.20094,-1.02863 17.22963,-26.5445 -28.37317,-7.14329 0,0 z","name":"Australia"},"nz":{"path":"m 656.52991,385.43138 3.02876,33.71636 -4.05739,15.31523 -15.20094,11.22926 1.00006,13.28653 v 14.2866 l 4.05739,5.1146 41.57399,-35.74506 v -8.17193 H 676.7883 l -14.20087,-48.00296 -6.05752,-1.02863 0,0 m -30.40187,73.54738 8.11478,15.31523 -22.31566,21.45847 -2.02869,11.22926 -15.20094,2.0287 -25.34442,23.48716 -23.31572,-11.22927 -2.02869,-8.17193 42.57405,-18.37256 39.54529,-35.74506 0,0 z","name":"New Zealand"},"nc":{"path":"m 638.30022,209.73485 -1.00006,5.1146 13.17223,18.37256 7.08616,3.05733 1.00006,-7.1433 -20.25839,-19.40119 0,0 z","name":"New Caledonia"},"sb":{"path":"m 606.26967,50.23931 0.4286,6.514687 3.97167,3.771661 3.74309,-2.314428 -3.34306,-6.943285 -4.8003,-1.028635 0,0 m 5.00031,16.172425 -3.34306,3.571648 3.54307,6.514687 4.17169,1.25722 -0.20001,-4.40027 -4.17169,-6.943285 0,0 m 8.14336,-3.771661 2.91446,7.143297 5.62892,6.714699 3.11448,-5.028881 -4.17169,-7.143297 -7.48617,-1.685818 0,0 m 14.6009,10.714946 1.65724,8.829115 3.97168,5.457479 3.34306,-6.914712 -8.97198,-7.371882 0,0 m 4.57171,19.744072 -1.45723,2.514441 4.80029,6.314677 3.34306,0.20001 -2.08584,-8.200505 -4.60028,-0.828623 0,0 m -10.62923,12.572208 -5.00031,2.31442 4.3717,6.08609 3.74309,-2.11441 -3.11448,-6.2861 0,0 z","name":"Solomon Islands"},"vu":{"path":"m 678.95986,143.30218 -3.54307,4.74315 1.4858,5.34319 1.77154,1.20007 3.22877,-4.17168 -2.94304,-7.11473 0,0 m 1.77154,14.54376 0.28573,3.85738 3.82881,1.20007 2.65731,-1.48581 -2.65731,-4.17168 -4.11454,0.60004 0,0 m 5.60035,34.45926 -1.77154,2.68588 2.6573,2.97161 4.42885,-1.4858 -5.31461,-4.17169 0,0 z","name":"Vanuatu"},"fj":{"path":"m 758.25046,186.36198 -3.54308,4.74315 -0.28573,5.34318 4.11454,4.17169 -0.28573,-14.25802 0,0 z","name":"Fiji"}}});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Algeria Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.algeria.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'dz_fr',
|
||||
enableZoom: true,
|
||||
showTooltip: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Argentina Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.argentina.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'argentina_en',
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 400px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Brazil Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.brazil.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'brazil_br',
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 400px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - World Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../dist/maps/continents/jquery.vmap.asia.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/continents/jquery.vmap.europe.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/continents/jquery.vmap.australia.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/continents/jquery.vmap.africa.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/continents/jquery.vmap.north-america.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/continents/jquery.vmap.south-america.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/jquery.vmap.sampledata.js"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
$('h2').each(function () {
|
||||
$(this).click(function () {
|
||||
$('.tab-selected').removeClass('tab-selected');
|
||||
$(this).addClass('tab-selected');
|
||||
$('.map').css('z-index', '0');
|
||||
$('#vmap-' + this.id).parent().css('z-index', '1');
|
||||
});
|
||||
});
|
||||
$('h2:first').addClass('tab-selected');
|
||||
$('.map:first').css('z-index', '1');
|
||||
|
||||
jQuery('#vmap-asia').vectorMap({
|
||||
map: 'asia_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
jQuery('#vmap-europe').vectorMap({
|
||||
map: 'europe_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
jQuery('#vmap-australia').vectorMap({
|
||||
map: 'australia_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
jQuery('#vmap-africa').vectorMap({
|
||||
map: 'africa_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
jQuery('#vmap-northamerica').vectorMap({
|
||||
map: 'north-america_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
jQuery('#vmap-southamerica').vectorMap({
|
||||
map: 'south-america_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: none repeat scroll 0 0 #cccccc;
|
||||
border: 1px solid #aaaaaa;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h2.tab-selected {
|
||||
background: #888888;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.map {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 id="asia">Asia</h2>
|
||||
|
||||
<div class="map">
|
||||
<div id="vmap-asia" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
<h2 id="europe">Europe</h2>
|
||||
|
||||
<div class="map">
|
||||
<div id="vmap-europe" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
<h2 id="australia">Australia</h2>
|
||||
|
||||
<div class="map">
|
||||
<div id="vmap-australia" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
<h2 id="africa">Africa</h2>
|
||||
|
||||
<div class="map">
|
||||
<div id="vmap-africa" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
<h2 id="northamerica">North America</h2>
|
||||
|
||||
<div class="map">
|
||||
<div id="vmap-northamerica" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
<h2 id="southamerica">South America</h2>
|
||||
|
||||
<div class="map">
|
||||
<div id="vmap-southamerica" style="width: 600px; height: 400px;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Europe Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.europe.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'europe_en',
|
||||
enableZoom: false,
|
||||
showTooltip: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 680px; height: 520px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - France Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.france.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'france_fr',
|
||||
enableZoom: false,
|
||||
showTooltip: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 680px; height: 520px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Germany Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.germany.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'germany_en',
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 400px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Greece Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.greece.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'greece',
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 700px; height: 637px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
|
|
@ -0,0 +1,62 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - USA Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
var map;
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
|
||||
// Store currentRegion
|
||||
var currentRegion = 'fl';
|
||||
|
||||
// List of Regions we'll let clicks through for
|
||||
var enabledRegions = ['mo', 'fl', 'or'];
|
||||
|
||||
map = jQuery('#vmap').vectorMap({
|
||||
map: 'usa_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
selectedColor: '#333333',
|
||||
selectedRegions: ['fl'],
|
||||
hoverColor: null,
|
||||
colors: {
|
||||
mo: '#C9DFAF',
|
||||
fl: '#C9DFAF',
|
||||
or: '#C9DFAF'
|
||||
},
|
||||
onRegionClick: function(event, code, region){
|
||||
// Check if this is an Enabled Region, and not the current selected on
|
||||
if(enabledRegions.indexOf(code) === -1 || currentRegion === code){
|
||||
// Not an Enabled Region
|
||||
event.preventDefault();
|
||||
} else {
|
||||
// Enabled Region. Update Newly Selected Region.
|
||||
currentRegion = code;
|
||||
}
|
||||
},
|
||||
onRegionSelect: function(event, code, region){
|
||||
console.log(map.selectedRegions);
|
||||
},
|
||||
onLabelShow: function(event, label, code){
|
||||
if(enabledRegions.indexOf(code) === -1){
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Iran Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.iran.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'iran_ir',
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#818181',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 2,
|
||||
color: '#eee',
|
||||
enableZoom: false,
|
||||
hoverColor: '#DA251D',
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
selectedColor: '#fff',
|
||||
showTooltip: true,
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 600px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Iran Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.iraq.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'iraq',
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#818181',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
color: '#eee',
|
||||
enableZoom: false,
|
||||
hoverColor: '#DA251D',
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
selectedColor: '#fff',
|
||||
showTooltip: true,
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 612px; height: 600px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
var sample_data = {"af":"16.63","al":"11.58","dz":"158.97","ao":"85.81","ag":"1.1","ar":"351.02","am":"8.83","au":"1219.72","at":"366.26","az":"52.17","bs":"7.54","bh":"21.73","bd":"105.4","bb":"3.96","by":"52.89","be":"461.33","bz":"1.43","bj":"6.49","bt":"1.4","bo":"19.18","ba":"16.2","bw":"12.5","br":"2023.53","bn":"11.96","bg":"44.84","bf":"8.67","bi":"1.47","kh":"11.36","cm":"21.88","ca":"1563.66","cv":"1.57","cf":"2.11","td":"7.59","cl":"199.18","cn":"5745.13","co":"283.11","km":"0.56","cd":"12.6","cg":"11.88","cr":"35.02","ci":"22.38","hr":"59.92","cy":"22.75","cz":"195.23","dk":"304.56","dj":"1.14","dm":"0.38","do":"50.87","ec":"61.49","eg":"216.83","sv":"21.8","gq":"14.55","er":"2.25","ee":"19.22","et":"30.94","fj":"3.15","fi":"231.98","fr":"2555.44","ga":"12.56","gm":"1.04","ge":"11.23","de":"3305.9","gh":"18.06","gr":"305.01","gd":"0.65","gt":"40.77","gn":"4.34","gw":"0.83","gy":"2.2","ht":"6.5","hn":"15.34","hk":"226.49","hu":"132.28","is":"12.77","in":"1430.02","id":"695.06","ir":"337.9","iq":"84.14","ie":"204.14","il":"201.25","it":"2036.69","jm":"13.74","jp":"5390.9","jo":"27.13","kz":"129.76","ke":"32.42","ki":"0.15","kr":"986.26","undefined":"5.73","kw":"117.32","kg":"4.44","la":"6.34","lv":"23.39","lb":"39.15","ls":"1.8","lr":"0.98","ly":"77.91","lt":"35.73","lu":"52.43","mk":"9.58","mg":"8.33","mw":"5.04","my":"218.95","mv":"1.43","ml":"9.08","mt":"7.8","mr":"3.49","mu":"9.43","mx":"1004.04","md":"5.36","mn":"5.81","me":"3.88","ma":"91.7","mz":"10.21","mm":"35.65","na":"11.45","np":"15.11","nl":"770.31","nz":"138","ni":"6.38","ne":"5.6","ng":"206.66","no":"413.51","om":"53.78","pk":"174.79","pa":"27.2","pg":"8.81","py":"17.17","pe":"153.55","ph":"189.06","pl":"438.88","pt":"223.7","qa":"126.52","ro":"158.39","ru":"1476.91","rw":"5.69","ws":"0.55","st":"0.19","sa":"434.44","sn":"12.66","rs":"38.92","sc":"0.92","sl":"1.9","sg":"217.38","sk":"86.26","si":"46.44","sb":"0.67","za":"354.41","es":"1374.78","lk":"48.24","kn":"0.56","lc":"1","vc":"0.58","sd":"65.93","sr":"3.3","sz":"3.17","se":"444.59","ch":"522.44","sy":"59.63","tw":"426.98","tj":"5.58","tz":"22.43","th":"312.61","tl":"0.62","tg":"3.07","to":"0.3","tt":"21.2","tn":"43.86","tr":"729.05","tm":0,"ug":"17.12","ua":"136.56","ae":"239.65","gb":"2258.57","us":"14624.18","uy":"40.71","uz":"37.72","vu":"0.72","ve":"285.21","vn":"101.99","ye":"30.02","zm":"15.69","zw":"5.57"};
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - USA Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<!-- Mobile Specific Meta Tags -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#vmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
/* Setup basic CSS for Label */
|
||||
.jqvmap-pin {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hide Whichever Labels you want */
|
||||
|
||||
#jqvmap1_ri_pin, #jqvmap1_dc_pin, #jqvmap1_de_pin, #jqvmap1_md_pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
|
||||
|
||||
#jqvmap1_ak_pin {
|
||||
margin-top: -2%;
|
||||
}
|
||||
#jqvmap1_ca_pin {
|
||||
margin-left: -2%;
|
||||
}
|
||||
#jqvmap1_ct_pin {
|
||||
margin-top: -0.25%;
|
||||
margin-left: -0.25%;
|
||||
}
|
||||
#jqvmap1_fl_pin {
|
||||
margin-left: 5%;
|
||||
}
|
||||
#jqvmap1_id_pin {
|
||||
margin-top: 3%;
|
||||
margin-left: -1%;
|
||||
}
|
||||
#jqvmap1_ky_pin {
|
||||
margin-left: 2%;
|
||||
}
|
||||
#jqvmap1_la_pin {
|
||||
margin-left: -2%;
|
||||
}
|
||||
#jqvmap1_mi_pin {
|
||||
margin-top: 4%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
#jqvmap1_ma_pin {
|
||||
margin-top: -0.25%;
|
||||
}
|
||||
#jqvmap1_mn_pin {
|
||||
margin-top: 2%;
|
||||
margin-left: -2%;
|
||||
}
|
||||
#jqvmap1_nh_pin {
|
||||
margin-top: 1%;
|
||||
margin-left: -0.25%;
|
||||
}
|
||||
#jqvmap1_nj_pin {
|
||||
margin-top: 1%;
|
||||
}
|
||||
#jqvmap1_ok_pin {
|
||||
margin-left: 2%;
|
||||
}
|
||||
#jqvmap1_va_pin {
|
||||
margin-left: 2%;
|
||||
}
|
||||
#jqvmap1_wv_pin {
|
||||
margin-left: -1%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
/* Add responsibe support to resize labels for difference screen sizes */
|
||||
|
||||
@media only screen and (min-width: 320px) {
|
||||
.jqvmap-pin {
|
||||
font-size: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 480px) {
|
||||
.jqvmap-pin {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.jqvmap-pin {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
.jqvmap-pin {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.jqvmap-pin {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'usa_en',
|
||||
borderWidth: 0.25,
|
||||
showLabels: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Europe Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<!-- Mobile Specific Meta Tags -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#vmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
.jqvmap-zoomin {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.jqvmap-zoomout {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 55px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'usa_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="vmap"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Europe Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.europe.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'europe_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
multiSelectRegion: true,
|
||||
selectedRegions: ['FR']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 680px; height: 520px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - World Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#overlay div {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pin {
|
||||
background: url(images/tip.png) no-repeat;
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pin .pin_content {
|
||||
background: url("images/background.png") repeat scroll 0 0 transparent;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
bottom: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
right: 15px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.pin .pin_content div {
|
||||
float: left;
|
||||
height: 30px;
|
||||
width: 35px;
|
||||
padding: 10px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pin .pin_content div span {
|
||||
color: #EA4E41;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.pin .pin_content div span.small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pin .pin_content .thumb {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.pin .pin_content .thumb img {
|
||||
max-width: 45px;
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
#rightcol {
|
||||
position: absolute;
|
||||
right: 230px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
table, tr, td {
|
||||
border: 1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
.pin-td {
|
||||
height: 65px;
|
||||
padding: 20px;
|
||||
width: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script src="../dist/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../dist/maps/jquery.vmap.world.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var pins = {
|
||||
'ru': "\u003ca target=\"_blank\" href=\"http://www.google.com.ru\"\u003epin_ru\u003c/a\u003e",
|
||||
'pk': "\u003ca target=\"_blank\" href=\"http://www.google.com.pk\"\u003epin_pk\u003c/a\u003e"
|
||||
};
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'world_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial',
|
||||
pins: {
|
||||
"ru": "\u003ca href=\"http://google.com\"\u003epin_ru\u003c/a\u003e",
|
||||
"pk": "\u003ca href=\"http://google.com\"\u003epin_pk\u003c/a\u003e"
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function placePin(id) {
|
||||
|
||||
id = id.toLowerCase();
|
||||
|
||||
var cc = jQuery("#" + id + ' input[name=cc]').val();
|
||||
if (cc == '') {
|
||||
alert('Insert a country code first');
|
||||
return;
|
||||
}
|
||||
var pin = jQuery("#" + id + ' .pin-td').html();
|
||||
if (jQuery.trim(pin) == '') {
|
||||
alert('Pin has been moved');
|
||||
return;
|
||||
}
|
||||
|
||||
var pins = new Object();
|
||||
pins[cc] = pin;
|
||||
|
||||
jQuery('#vmap').vectorMap('placePins', pins, 'content');
|
||||
}
|
||||
|
||||
function movePin(id) {
|
||||
|
||||
id = id.toLowerCase();
|
||||
|
||||
var cc = jQuery("#" + id + ' input[name=cc]').val();
|
||||
if (cc == '') {
|
||||
alert('Insert a country code first');
|
||||
return;
|
||||
}
|
||||
var pin = jQuery("#" + id + ' .pin-td').html();
|
||||
if (jQuery.trim(pin) == '') {
|
||||
alert('Pin has been moved');
|
||||
return;
|
||||
}
|
||||
pin = id + '_content';
|
||||
|
||||
var pins = new Object();
|
||||
pins[cc] = pin;
|
||||
|
||||
jQuery('#vmap').vectorMap('placePins', pins, 'id');
|
||||
}
|
||||
|
||||
function removePin() {
|
||||
var cc = jQuery('#remove input[name=cc]').val();
|
||||
if (cc == '') {
|
||||
alert('Insert a country code first');
|
||||
return;
|
||||
}
|
||||
jQuery('#vmap').vectorMap('removePin', cc);
|
||||
}
|
||||
|
||||
function removeAllPins() {
|
||||
jQuery('#vmap').vectorMap('removePins');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
<div id="rightcol">
|
||||
<table>
|
||||
<tr id="pin1">
|
||||
<td class="pin-td">
|
||||
<div id="pin1_content" class="pin">
|
||||
<div class="pin_content">
|
||||
<div>
|
||||
<span>09</span>
|
||||
<span class="small">new</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<img src="images/thumb.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="cc" placeholder="Country code"/><br/>
|
||||
<input type="button" onClick="placePin('pin1')" value="Copy"/>
|
||||
<input type="button" onClick="movePin('pin1')" value="Move"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="pin2">
|
||||
<td class="pin-td">
|
||||
<img id="pin2_content" src="images/globe.png"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="cc" placeholder="Country code"/><br/>
|
||||
<input type="button" onClick="placePin('pin2')" value="Copy"/>
|
||||
<input type="button" onClick="movePin('pin2')" value="Move"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="pin3">
|
||||
<td class="pin-td">
|
||||
<img id="pin3_content" src="images/flag.png"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="cc" placeholder="Country code"/><br/>
|
||||
<input type="button" onClick="placePin('pin3')" value="Copy"/>
|
||||
<input type="button" onClick="movePin('pin3')" value="Move"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="remove">
|
||||
<td class="pin-td">
|
||||
<input type="text" name="cc" placeholder="Country code"/><br/>
|
||||
<input type="button" onClick="removePin()" value="Remove"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" onClick="removeAllPins()" value="Remove"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - USA Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<!-- Mobile Specific Meta Tags -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#vmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.jqvmap-region {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.map-pin {
|
||||
width: 64px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: -32px;
|
||||
background-size: 32px 32px;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
background-position: top center;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.map-pin span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-image: url('images/marker/red.png');
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-image: url('images/marker/blue.png');
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-image: url('images/marker/purple.png');
|
||||
}
|
||||
|
||||
/* Setup basic CSS for Label */
|
||||
.jqvmap-pin {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
|
||||
|
||||
#jqvmap1_fl_pin {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function escapeXml(string) {
|
||||
return string.replace(/[<>]/g, function (c) {
|
||||
switch (c) {
|
||||
case '<': return '\u003c';
|
||||
case '>': return '\u003e';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
|
||||
var pins = {
|
||||
mo: escapeXml('<div class="map-pin red"><span>MO</span></div>'),
|
||||
fl: escapeXml('<div class="map-pin blue"><span>FL</span></div>'),
|
||||
or: escapeXml('<div class="map-pin purple"><span>OR</span></div>')
|
||||
};
|
||||
|
||||
jQuery('#vmap').vectorMap({
|
||||
backgroundColor: '#333',
|
||||
borderColor: '#333',
|
||||
map: 'usa_en',
|
||||
pins: pins,
|
||||
color: '#fff',
|
||||
pinMode: 'content',
|
||||
hoverColor: null,
|
||||
selectedColor: '#111',
|
||||
showTooltip: false,
|
||||
selectedRegions: ['MO', 'FL', 'OR'],
|
||||
onRegionClick: function(event){
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Europe Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#vmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'usa_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
onResize: function (element, width, height) {
|
||||
console.log('Map Size: ' + width + 'x' + height);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="vmap"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Russia Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.russia.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'russia_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#999999',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Europe Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.europe.js" charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function touch_detect() {
|
||||
return 'ontouchstart' in window || 'onmsgesturechange' in window || navigator.msMaxTouchPoints > 0;
|
||||
}
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'europe_en',
|
||||
enableZoom: false,
|
||||
showTooltip: false,
|
||||
onRegionClick: function (element, code, region) {
|
||||
if (!touch_detect()) {
|
||||
// we're not on a mobile device, handle the click
|
||||
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
|
||||
alert(message);
|
||||
}
|
||||
},
|
||||
onRegionOver: function (element, code, region) {
|
||||
if (touch_detect()) {
|
||||
/// we're not on a mobile device, handle the click
|
||||
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="vmap" style="width: 680px; height: 520px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Tunisia Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.tunisia.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'tunisia',
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 700px; height: 637px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - Turkey Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 1052.3622px; height: 744.09448px;"></div>
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.turkey.js" charset="utf-8"></script>
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'turkey',
|
||||
onRegionClick: function (element, code, region) {
|
||||
var message = 'You clicked "'+ region + '" which has the code: '+ code.toUpperCase();
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - USA Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'usa_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
selectedColor: null,
|
||||
hoverColor: null,
|
||||
colors: {
|
||||
mo: '#C9DFAF',
|
||||
fl: '#C9DFAF',
|
||||
or: '#C9DFAF'
|
||||
},
|
||||
onRegionClick: function(event, code, region){
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>JQVMap - World Map</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
|
||||
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
|
||||
<script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="js/jquery.vmap.sampledata.js"></script>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function () {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'world_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
values: sample_data,
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
module.exports = {
|
||||
options: {
|
||||
files: [
|
||||
"package.json",
|
||||
"bower.json"
|
||||
],
|
||||
updateConfigs: [
|
||||
"package"
|
||||
],
|
||||
commit: true,
|
||||
commitMessage: "Release v%VERSION%",
|
||||
commitFiles: [
|
||||
"-a"
|
||||
],
|
||||
createTag: true,
|
||||
tagName: "v%VERSION%",
|
||||
tagMessage: "Version %VERSION%",
|
||||
push: true,
|
||||
pushTo: "origin",
|
||||
gitDescribeOptions: "--tags --always --abbrev=1 --dirty=-d"
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
release: {
|
||||
options: {
|
||||
insertType: "prepend",
|
||||
template: "## Release v<%= package.version %>:\n\n{{> features}}{{> fixes}}\n\n",
|
||||
partials: {
|
||||
features: "#### Features:\n\n{{#if features}}{{#each features}}{{> feature}}{{/each}}{{else}}{{> empty}}{{/if}}\n",
|
||||
fixes: "#### Bugfixes:\n\n{{#if fixes}}{{#each fixes}}{{> fix}}{{/each}}{{else}}{{> empty}}{{/if}}",
|
||||
empty: " - (none)\n"
|
||||
},
|
||||
dest: "CHANGELOG.md"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
dist: [
|
||||
"dist/*.js"
|
||||
]
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
module.exports = {
|
||||
options: {
|
||||
banner: '/*!\n' +
|
||||
' * <%= package.author.name %>: <%= package.description %>\n' +
|
||||
' * @author <%= package.author.name %> <<%= package.author.email %>>\n' +
|
||||
' * @version <%= package.version %>\n' +
|
||||
' * @link <%= package.author.url %>\n' +
|
||||
' * @license https://github.com/manifestinteractive/jqvmap/blob/master/LICENSE\n' +
|
||||
' * @builddate <%= grunt.template.today("yyyy/mm/dd") %>\n' +
|
||||
' */\n\n'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/jquery.vmap.js': [
|
||||
"src/VectorCanvas.js",
|
||||
"src/ColorScale.js",
|
||||
"src/JQVMap.js",
|
||||
"src/Base.js",
|
||||
"src/**/*.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
var requireDirectory = require("require-directory");
|
||||
module.exports = requireDirectory(module);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
dist: ['tests/*.html']
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
lint: {
|
||||
command: "node_modules/.bin/eslint src --quiet && echo '\033[0;32m\n✓ All Good\033[0m ٩(ˊᗜˋ*)و'",
|
||||
stdout: false
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
module.exports = {
|
||||
options: {
|
||||
banner: '/*!\n' +
|
||||
' * <%= package.author.name %>: <%= package.description %>\n' +
|
||||
' * @author <%= package.author.name %> <<%= package.author.email %>>\n' +
|
||||
' * @version <%= package.version %>\n' +
|
||||
' * @link <%= package.author.url %>\n' +
|
||||
' * @license https://github.com/manifestinteractive/jqvmap/blob/master/LICENSE\n' +
|
||||
' * @builddate <%= grunt.template.today("yyyy/mm/dd") %>\n' +
|
||||
' */\n\n'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/jquery.vmap.min.js': [
|
||||
"dist/jquery.vmap.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
module.exports = function(grunt)
|
||||
{
|
||||
var gtx = require('gruntfile-gtx').wrap(grunt);
|
||||
gtx.loadAuto();
|
||||
|
||||
var gruntConfig = require('./grunt');
|
||||
gruntConfig.package = require('./package.json');
|
||||
|
||||
gtx.config(gruntConfig);
|
||||
|
||||
gtx.alias('build', ['shell:lint', 'clean:dist', 'concat:dist', 'uglify:dist', 'test']);
|
||||
|
||||
gtx.alias('release', ['build', 'bump-commit']);
|
||||
gtx.alias('release-major', ['bump-only:major', 'release']);
|
||||
gtx.alias('release-minor', ['bump-only:minor', 'release']);
|
||||
gtx.alias('release-patch', ['bump-only:patch', 'release']);
|
||||
|
||||
gtx.alias('test', ['shell:lint', 'qunit:dist']);
|
||||
|
||||
gtx.finalise();
|
||||
};
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "jqvmap",
|
||||
"version": "1.5.1",
|
||||
"homepage": "http://jqvmap.com",
|
||||
"author": {
|
||||
"name": "JQVMap",
|
||||
"email": "me@peterschmalfeldt.com",
|
||||
"url": "http://jqvmap.com"
|
||||
},
|
||||
"license": "(MIT OR GPL-3.0)",
|
||||
"description": "jQuery Vector Map Library",
|
||||
"main": "dist/jquery.vmap.min.js",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"map",
|
||||
"svg",
|
||||
"vml",
|
||||
"vector"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/manifestinteractive/jqvmap.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "~1.11.3"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "grunt test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^0.21.0",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-bump": "0.0.15",
|
||||
"grunt-changelog": "^0.2.2",
|
||||
"grunt-contrib-clean": "^0.6.0",
|
||||
"grunt-contrib-concat": "*",
|
||||
"grunt-contrib-copy": "^0.5.0",
|
||||
"grunt-contrib-qunit": "^0.7.0",
|
||||
"grunt-contrib-uglify": "^0.10.0",
|
||||
"grunt-gulp": "^0.1.0",
|
||||
"grunt-shell": "^1.1.1",
|
||||
"gruntfile-gtx": "^0.3.0",
|
||||
"require-directory": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
(function(){
|
||||
|
||||
var apiParams = {
|
||||
colors: 1,
|
||||
values: 1,
|
||||
backgroundColor: 1,
|
||||
scaleColors: 1,
|
||||
normalizeFunction: 1,
|
||||
enableZoom: 1,
|
||||
showTooltip: 1,
|
||||
borderColor: 1,
|
||||
borderWidth: 1,
|
||||
borderOpacity: 1,
|
||||
selectedRegions: 1,
|
||||
multiSelectRegion: 1
|
||||
};
|
||||
|
||||
var apiEvents = {
|
||||
onLabelShow: 'labelShow',
|
||||
onLoad: 'load',
|
||||
onRegionOver: 'regionMouseOver',
|
||||
onRegionOut: 'regionMouseOut',
|
||||
onRegionClick: 'regionClick',
|
||||
onRegionSelect: 'regionSelect',
|
||||
onRegionDeselect: 'regionDeselect',
|
||||
onResize: 'resize'
|
||||
};
|
||||
|
||||
jQuery.fn.vectorMap = function (options) {
|
||||
|
||||
var defaultParams = {
|
||||
map: 'world_en',
|
||||
backgroundColor: '#a5bfdd',
|
||||
color: '#f4f3f0',
|
||||
hoverColor: '#c9dfaf',
|
||||
hoverColors: {},
|
||||
selectedColor: '#c9dfaf',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
normalizeFunction: 'linear',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
borderColor: '#818181',
|
||||
borderWidth: 1,
|
||||
borderOpacity: 0.25,
|
||||
selectedRegions: null,
|
||||
multiSelectRegion: false
|
||||
}, map = this.data('mapObject');
|
||||
|
||||
if (options === 'addMap') {
|
||||
JQVMap.maps[arguments[1]] = arguments[2];
|
||||
} else if (options === 'set' && apiParams[arguments[1]]) {
|
||||
map['set' + arguments[1].charAt(0).toUpperCase() + arguments[1].substr(1)].apply(map, Array.prototype.slice.call(arguments, 2));
|
||||
} else if (typeof options === 'string' &&
|
||||
typeof map[options] === 'function') {
|
||||
return map[options].apply(map, Array.prototype.slice.call(arguments, 1));
|
||||
} else {
|
||||
jQuery.extend(defaultParams, options);
|
||||
defaultParams.container = this;
|
||||
this.css({ position: 'relative', overflow: 'hidden' });
|
||||
|
||||
map = new JQVMap(defaultParams);
|
||||
|
||||
this.data('mapObject', map);
|
||||
|
||||
this.unbind('.jqvmap');
|
||||
|
||||
for (var e in apiEvents) {
|
||||
if (defaultParams[e]) {
|
||||
this.bind(apiEvents[e] + '.jqvmap', defaultParams[e]);
|
||||
}
|
||||
}
|
||||
|
||||
var loadEvent = jQuery.Event('load.jqvmap');
|
||||
jQuery(defaultParams.container).trigger(loadEvent, map);
|
||||
|
||||
return map;
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
var ColorScale = function (colors, normalizeFunction, minValue, maxValue) {
|
||||
if (colors) {
|
||||
this.setColors(colors);
|
||||
}
|
||||
if (normalizeFunction) {
|
||||
this.setNormalizeFunction(normalizeFunction);
|
||||
}
|
||||
if (minValue) {
|
||||
this.setMin(minValue);
|
||||
}
|
||||
if (minValue) {
|
||||
this.setMax(maxValue);
|
||||
}
|
||||
};
|
||||
|
||||
ColorScale.prototype = {
|
||||
colors: []
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
ColorScale.arrayToRgb = function (ar) {
|
||||
var rgb = '#';
|
||||
var d;
|
||||
for (var i = 0; i < ar.length; i++) {
|
||||
d = ar[i].toString(16);
|
||||
rgb += d.length === 1 ? '0' + d : d;
|
||||
}
|
||||
return rgb;
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
ColorScale.prototype.getColor = function (value) {
|
||||
if (typeof this.normalize === 'function') {
|
||||
value = this.normalize(value);
|
||||
}
|
||||
|
||||
var lengthes = [];
|
||||
var fullLength = 0;
|
||||
var l;
|
||||
|
||||
for (var i = 0; i < this.colors.length - 1; i++) {
|
||||
l = this.vectorLength(this.vectorSubtract(this.colors[i + 1], this.colors[i]));
|
||||
lengthes.push(l);
|
||||
fullLength += l;
|
||||
}
|
||||
|
||||
var c = (this.maxValue - this.minValue) / fullLength;
|
||||
|
||||
for (i = 0; i < lengthes.length; i++) {
|
||||
lengthes[i] *= c;
|
||||
}
|
||||
|
||||
i = 0;
|
||||
value -= this.minValue;
|
||||
|
||||
while (value - lengthes[i] >= 0) {
|
||||
value -= lengthes[i];
|
||||
i++;
|
||||
}
|
||||
|
||||
var color;
|
||||
if (i === this.colors.length - 1) {
|
||||
color = this.vectorToNum(this.colors[i]).toString(16);
|
||||
} else {
|
||||
color = (this.vectorToNum(this.vectorAdd(this.colors[i], this.vectorMult(this.vectorSubtract(this.colors[i + 1], this.colors[i]), (value) / (lengthes[i]))))).toString(16);
|
||||
}
|
||||
|
||||
while (color.length < 6) {
|
||||
color = '0' + color;
|
||||
}
|
||||
return '#' + color;
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
ColorScale.rgbToArray = function (rgb) {
|
||||
rgb = rgb.substr(1);
|
||||
return [parseInt(rgb.substr(0, 2), 16), parseInt(rgb.substr(2, 2), 16), parseInt(rgb.substr(4, 2), 16)];
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
ColorScale.prototype.setColors = function (colors) {
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
colors[i] = ColorScale.rgbToArray(colors[i]);
|
||||
}
|
||||
this.colors = colors;
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue