mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2025-06-14 20:16:05 +00:00
Initial commit
This commit is contained in:
Khanh Ngo
47
app/static/global/plugins/jqvmap/.gitignore
vendored
Normal file
47
app/static/global/plugins/jqvmap/.gitignore
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
############################################
|
||||
## Generic System Ignores
|
||||
syntax: glob
|
||||
|
||||
!.gitignore
|
||||
# build directories and files
|
||||
#hg syntax
|
||||
target/**.*
|
||||
#git syntax
|
||||
target/
|
||||
dist/**.*
|
||||
**/build/*
|
||||
build/*
|
||||
*.pyc
|
||||
# Maven
|
||||
release.properties
|
||||
#Eclipse
|
||||
.settings/*.**
|
||||
.classpath
|
||||
.project
|
||||
# Netbeans
|
||||
nb-configuration.xml
|
||||
nbactions.xml
|
||||
# Backup files left behind by the Emacs editor.
|
||||
*~
|
||||
# Lock files used by the Emacs editor.
|
||||
.\#*
|
||||
# Temporary files used by TestMate
|
||||
._*
|
||||
# XCode user data
|
||||
**.pbxuser
|
||||
**.mode?v?
|
||||
**.perspectivev?
|
||||
# documentation
|
||||
**.docset/*
|
||||
# for those crazies using svn and hg at the same time
|
||||
*.svn*
|
||||
# Random OS stuff
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
# temporary folders
|
||||
syntax: regexp
|
||||
.*/te?mp/.*
|
||||
# Temporary files used by the vim editor.
|
||||
.*.swp
|
||||
/nbproject/private/
|
||||
/nbproject/
|
||||
706
app/static/global/plugins/jqvmap/README.md
Normal file
706
app/static/global/plugins/jqvmap/README.md
Normal file
@ -0,0 +1,706 @@
|
||||
|
||||
|
||||
This project is a heavily modified version of [jVectorMap](https://github.com/bjornd/jvectormap). 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.
|
||||
|
||||
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. Here is a sample HTML page for loading the World Map with default settings:
|
||||
|
||||
<?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>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></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.
|
||||
|
||||
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',
|
||||
selectedRegion: null,
|
||||
showTooltip: true,
|
||||
onRegionClick: function(element, code, region)
|
||||
{
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
|
||||
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.
|
||||
|
||||
**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.
|
||||
|
||||
**selectedRegion** *'mo'*
|
||||
|
||||
This is the Region that you are looking to have preselected (two letter ISO code, defaults to null )
|
||||
|
||||
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
|
||||
|
||||
**showTooltip** *boolean*
|
||||
|
||||
Whether to show Tooltips on Mouseover ( true or false, defaults to true)
|
||||
|
||||
**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**.
|
||||
|
||||
Dynamic Updating
|
||||
======
|
||||
|
||||
Most of the options can be changed after initialization using the following code:
|
||||
|
||||
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:
|
||||
|
||||
jQuery('#vmap').vectorMap(
|
||||
{
|
||||
onLabelShow: function(event, label, code)
|
||||
{
|
||||
|
||||
},
|
||||
onRegionOver: function(event, code, region)
|
||||
{
|
||||
|
||||
},
|
||||
onRegionOut: function(event, code, region)
|
||||
{
|
||||
|
||||
},
|
||||
onRegionClick: function(event, code, region)
|
||||
{
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Or later using standard jQuery mechanism:
|
||||
|
||||
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)
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
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.
|
||||
|
||||
jQuery('#vmap').vectorMap(
|
||||
{
|
||||
onLabelShow: function(event, label, code)
|
||||
{
|
||||
if (code == 'ca')
|
||||
{
|
||||
event.preventDefault();
|
||||
}
|
||||
else if (code == 'ru')
|
||||
{
|
||||
label.text('Bears, vodka, balalaika');
|
||||
}
|
||||
},
|
||||
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):
|
||||
|
||||
var sample_data = {"af":16.63,"al":11.58,"dz":158.97,...};
|
||||
|
||||
Then connect it to the page and add some code to make visualization:
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
Custom Maps
|
||||
======
|
||||
|
||||
The following is the converter instructions directly from [jVectorMap](https://github.com/bjornd/jvectormap) that could be used to create your own maps for JQVMap from the data in various GIS formats like Shapefile. The following command could be used to convert USA map from the data available at [www.naturalearthdata.com](www.naturalearthdata.com):
|
||||
|
||||
python \
|
||||
path/to/converter.py \
|
||||
path/to/geo-data.shp \
|
||||
path/to/resulting-map.js \
|
||||
--width 900 \
|
||||
--country_name_index 4 \
|
||||
--where "ISO = 'USA'" \
|
||||
--codes_file path/to/codes-en.tsv \
|
||||
--insets '[{"codes": ["US-AK"], "width": 200, "left": 10, "top": 370}, {"codes": ["US-HI"], "width": 100, "left": 220, "top": 400}]' \
|
||||
--minimal_area 4000000 \
|
||||
--buffer_distance -3000 \
|
||||
--simplify_tolerance 1000 \
|
||||
--longtitude0 10w \
|
||||
--name us
|
||||
@ -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"};
|
||||
968
app/static/global/plugins/jqvmap/jqvmap/jquery.vmap.js
Normal file
968
app/static/global/plugins/jqvmap/jqvmap/jquery.vmap.js
Normal file
@ -0,0 +1,968 @@
|
||||
/*!
|
||||
* jQVMap Version 1.0
|
||||
*
|
||||
* http://jqvmap.com
|
||||
*
|
||||
* Copyright 2012, Peter Schmalfeldt <manifestinteractive@gmail.com>
|
||||
* Copyright 2011-2012, Kirill Lebedev
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
* Fork Me @ https://github.com/manifestinteractive/jqvmap
|
||||
*/
|
||||
(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',
|
||||
onRegionOver: 'regionMouseOver',
|
||||
onRegionOut: 'regionMouseOut',
|
||||
onRegionClick: 'regionClick',
|
||||
onRegionSelect: 'regionSelect',
|
||||
onRegionDeselect: 'regionDeselect'
|
||||
};
|
||||
|
||||
$.fn.vectorMap = function (options) {
|
||||
|
||||
var defaultParams = {
|
||||
map: 'world_en',
|
||||
backgroundColor: '#a5bfdd',
|
||||
color: '#f4f3f0',
|
||||
hoverColor: '#c9dfaf',
|
||||
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') {
|
||||
WorldMap.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 {
|
||||
$.extend(defaultParams, options);
|
||||
defaultParams.container = this;
|
||||
this.css({ position: 'relative', overflow: 'hidden' });
|
||||
|
||||
map = new WorldMap(defaultParams);
|
||||
|
||||
this.data('mapObject', map);
|
||||
|
||||
for (var e in apiEvents) {
|
||||
if (defaultParams[e]) {
|
||||
this.bind(apiEvents[e] + '.jqvmap', defaultParams[e]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var VectorCanvas = function (width, height, params) {
|
||||
this.mode = window.SVGAngle ? 'svg' : 'vml';
|
||||
this.params = params;
|
||||
|
||||
if (this.mode == 'svg') {
|
||||
this.createSvgNode = function (nodeName) {
|
||||
return document.createElementNS(this.svgns, nodeName);
|
||||
};
|
||||
} else {
|
||||
try {
|
||||
if (!document.namespaces.rvml) {
|
||||
document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
|
||||
}
|
||||
this.createVmlNode = function (tagName) {
|
||||
return document.createElement('<rvml:' + tagName + ' class="rvml">');
|
||||
};
|
||||
} catch (e) {
|
||||
this.createVmlNode = function (tagName) {
|
||||
return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
|
||||
};
|
||||
}
|
||||
|
||||
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
|
||||
}
|
||||
|
||||
if (this.mode == 'svg') {
|
||||
this.canvas = this.createSvgNode('svg');
|
||||
} else {
|
||||
this.canvas = this.createVmlNode('group');
|
||||
this.canvas.style.position = 'absolute';
|
||||
}
|
||||
|
||||
this.setSize(width, height);
|
||||
};
|
||||
|
||||
VectorCanvas.prototype = {
|
||||
svgns: "http://www.w3.org/2000/svg",
|
||||
mode: 'svg',
|
||||
width: 0,
|
||||
height: 0,
|
||||
canvas: null,
|
||||
|
||||
setSize: function (width, height) {
|
||||
if (this.mode == 'svg') {
|
||||
this.canvas.setAttribute('width', width);
|
||||
this.canvas.setAttribute('height', height);
|
||||
} else {
|
||||
this.canvas.style.width = width + "px";
|
||||
this.canvas.style.height = height + "px";
|
||||
this.canvas.coordsize = width + ' ' + height;
|
||||
this.canvas.coordorigin = "0 0";
|
||||
if (this.rootGroup) {
|
||||
var pathes = this.rootGroup.getElementsByTagName('shape');
|
||||
for (var i = 0, l = pathes.length; i < l; i++) {
|
||||
pathes[i].coordsize = width + ' ' + height;
|
||||
pathes[i].style.width = width + 'px';
|
||||
pathes[i].style.height = height + 'px';
|
||||
}
|
||||
this.rootGroup.coordsize = width + ' ' + height;
|
||||
this.rootGroup.style.width = width + 'px';
|
||||
this.rootGroup.style.height = height + 'px';
|
||||
}
|
||||
}
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
},
|
||||
|
||||
createPath: function (config) {
|
||||
var node;
|
||||
if (this.mode == 'svg') {
|
||||
node = this.createSvgNode('path');
|
||||
node.setAttribute('d', config.path);
|
||||
|
||||
if (this.params.borderColor !== null) {
|
||||
node.setAttribute('stroke', this.params.borderColor);
|
||||
}
|
||||
if (this.params.borderWidth > 0) {
|
||||
node.setAttribute('stroke-width', this.params.borderWidth);
|
||||
node.setAttribute('stroke-linecap', 'round');
|
||||
node.setAttribute('stroke-linejoin', 'round');
|
||||
}
|
||||
if (this.params.borderOpacity > 0) {
|
||||
node.setAttribute('stroke-opacity', this.params.borderOpacity);
|
||||
}
|
||||
|
||||
node.setFill = function (color) {
|
||||
this.setAttribute("fill", color);
|
||||
if (this.getAttribute("original") === null) {
|
||||
this.setAttribute("original", color);
|
||||
}
|
||||
};
|
||||
|
||||
node.getFill = function (color) {
|
||||
return this.getAttribute("fill");
|
||||
};
|
||||
|
||||
node.getOriginalFill = function () {
|
||||
return this.getAttribute("original");
|
||||
};
|
||||
|
||||
node.setOpacity = function (opacity) {
|
||||
this.setAttribute('fill-opacity', opacity);
|
||||
};
|
||||
} else {
|
||||
node = this.createVmlNode('shape');
|
||||
node.coordorigin = "0 0";
|
||||
node.coordsize = this.width + ' ' + this.height;
|
||||
node.style.width = this.width + 'px';
|
||||
node.style.height = this.height + 'px';
|
||||
node.fillcolor = WorldMap.defaultFillColor;
|
||||
node.stroked = false;
|
||||
node.path = VectorCanvas.pathSvgToVml(config.path);
|
||||
|
||||
var scale = this.createVmlNode('skew');
|
||||
scale.on = true;
|
||||
scale.matrix = '0.01,0,0,0.01,0,0';
|
||||
scale.offset = '0,0';
|
||||
|
||||
node.appendChild(scale);
|
||||
|
||||
var fill = this.createVmlNode('fill');
|
||||
node.appendChild(fill);
|
||||
|
||||
node.setFill = function (color) {
|
||||
this.getElementsByTagName('fill')[0].color = color;
|
||||
if (this.getAttribute("original") === null) {
|
||||
this.setAttribute("original", color);
|
||||
}
|
||||
};
|
||||
|
||||
node.getFill = function (color) {
|
||||
return this.getElementsByTagName('fill')[0].color;
|
||||
};
|
||||
node.getOriginalFill = function () {
|
||||
return this.getAttribute("original");
|
||||
};
|
||||
node.setOpacity = function (opacity) {
|
||||
this.getElementsByTagName('fill')[0].opacity = parseInt(opacity * 100, 10) + '%';
|
||||
};
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
createGroup: function (isRoot) {
|
||||
var node;
|
||||
if (this.mode == 'svg') {
|
||||
node = this.createSvgNode('g');
|
||||
} else {
|
||||
node = this.createVmlNode('group');
|
||||
node.style.width = this.width + 'px';
|
||||
node.style.height = this.height + 'px';
|
||||
node.style.left = '0px';
|
||||
node.style.top = '0px';
|
||||
node.coordorigin = "0 0";
|
||||
node.coordsize = this.width + ' ' + this.height;
|
||||
}
|
||||
|
||||
if (isRoot) {
|
||||
this.rootGroup = node;
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
applyTransformParams: function (scale, transX, transY) {
|
||||
if (this.mode == 'svg') {
|
||||
this.rootGroup.setAttribute('transform', 'scale(' + scale + ') translate(' + transX + ', ' + transY + ')');
|
||||
} else {
|
||||
this.rootGroup.coordorigin = (this.width - transX) + ',' + (this.height - transY);
|
||||
this.rootGroup.coordsize = this.width / scale + ',' + this.height / scale;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
VectorCanvas.pathSvgToVml = function (path) {
|
||||
var result = '';
|
||||
var cx = 0, cy = 0, ctrlx, ctrly;
|
||||
|
||||
return path.replace(/([MmLlHhVvCcSs])((?:-?(?:\d+)?(?:\.\d+)?,?\s?)+)/g, function (segment, letter, coords, index) {
|
||||
coords = coords.replace(/(\d)-/g, '$1,-').replace(/\s+/g, ',').split(',');
|
||||
if (!coords[0]) {
|
||||
coords.shift();
|
||||
}
|
||||
|
||||
for (var i = 0, l = coords.length; i < l; i++) {
|
||||
coords[i] = Math.round(100 * coords[i]);
|
||||
}
|
||||
|
||||
switch (letter) {
|
||||
case 'm':
|
||||
cx += coords[0];
|
||||
cy += coords[1];
|
||||
return 't' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 'M':
|
||||
cx = coords[0];
|
||||
cy = coords[1];
|
||||
return 'm' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 'l':
|
||||
cx += coords[0];
|
||||
cy += coords[1];
|
||||
return 'r' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 'L':
|
||||
cx = coords[0];
|
||||
cy = coords[1];
|
||||
return 'l' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 'h':
|
||||
cx += coords[0];
|
||||
return 'r' + coords[0] + ',0';
|
||||
break;
|
||||
|
||||
case 'H':
|
||||
cx = coords[0];
|
||||
return 'l' + cx + ',' + cy;
|
||||
break;
|
||||
|
||||
case 'v':
|
||||
cy += coords[0];
|
||||
return 'r0,' + coords[0];
|
||||
break;
|
||||
|
||||
case 'V':
|
||||
cy = coords[0];
|
||||
return 'l' + cx + ',' + cy;
|
||||
break;
|
||||
|
||||
case 'c':
|
||||
ctrlx = cx + coords[coords.length - 4];
|
||||
ctrly = cy + coords[coords.length - 3];
|
||||
cx += coords[coords.length - 2];
|
||||
cy += coords[coords.length - 1];
|
||||
return 'v' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 'C':
|
||||
ctrlx = coords[coords.length - 4];
|
||||
ctrly = coords[coords.length - 3];
|
||||
cx = coords[coords.length - 2];
|
||||
cy = coords[coords.length - 1];
|
||||
return 'c' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 's':
|
||||
coords.unshift(cy - ctrly);
|
||||
coords.unshift(cx - ctrlx);
|
||||
ctrlx = cx + coords[coords.length - 4];
|
||||
ctrly = cy + coords[coords.length - 3];
|
||||
cx += coords[coords.length - 2];
|
||||
cy += coords[coords.length - 1];
|
||||
return 'v' + coords.join(',');
|
||||
break;
|
||||
|
||||
case 'S':
|
||||
coords.unshift(cy + cy - ctrly);
|
||||
coords.unshift(cx + cx - ctrlx);
|
||||
ctrlx = coords[coords.length - 4];
|
||||
ctrly = coords[coords.length - 3];
|
||||
cx = coords[coords.length - 2];
|
||||
cy = coords[coords.length - 1];
|
||||
return 'c' + coords.join(',');
|
||||
break;
|
||||
|
||||
default:
|
||||
return false;
|
||||
break;
|
||||
}
|
||||
|
||||
return '';
|
||||
|
||||
}).replace(/z/g, '');
|
||||
};
|
||||
|
||||
var WorldMap = function (params) {
|
||||
params = params || {};
|
||||
var map = this;
|
||||
var mapData = WorldMap.maps[params.map];
|
||||
|
||||
this.selectedRegions = [];
|
||||
this.multiSelectRegion = params.multiSelectRegion;
|
||||
|
||||
this.container = params.container;
|
||||
|
||||
this.defaultWidth = mapData.width;
|
||||
this.defaultHeight = mapData.height;
|
||||
|
||||
this.color = params.color;
|
||||
this.selectedColor = params.selectedColor;
|
||||
this.hoverColor = params.hoverColor;
|
||||
this.hoverOpacity = params.hoverOpacity;
|
||||
this.setBackgroundColor(params.backgroundColor);
|
||||
|
||||
this.width = params.container.width();
|
||||
this.height = params.container.height();
|
||||
|
||||
this.resize();
|
||||
|
||||
jQuery(window).resize(function () {
|
||||
map.width = params.container.width();
|
||||
map.height = params.container.height();
|
||||
map.resize();
|
||||
map.canvas.setSize(map.width, map.height);
|
||||
map.applyTransform();
|
||||
});
|
||||
|
||||
this.canvas = new VectorCanvas(this.width, this.height, params);
|
||||
params.container.append(this.canvas.canvas);
|
||||
|
||||
this.makeDraggable();
|
||||
|
||||
this.rootGroup = this.canvas.createGroup(true);
|
||||
|
||||
this.index = WorldMap.mapIndex;
|
||||
this.label = jQuery('<div/>').addClass('jqvmap-label').appendTo(jQuery('body'));
|
||||
|
||||
if (params.enableZoom) {
|
||||
jQuery('<div/>').addClass('jqvmap-zoomin').text('+').appendTo(params.container);
|
||||
jQuery('<div/>').addClass('jqvmap-zoomout').html('−').appendTo(params.container);
|
||||
}
|
||||
|
||||
map.countries = [];
|
||||
|
||||
for (var key in mapData.pathes) {
|
||||
var path = this.canvas.createPath({
|
||||
path: mapData.pathes[key].path
|
||||
});
|
||||
|
||||
path.setFill(this.color);
|
||||
path.id = map.getCountryId(key);
|
||||
map.countries[key] = path;
|
||||
|
||||
if (this.canvas.mode == 'svg') {
|
||||
path.setAttribute('class', 'jvectormap-region');
|
||||
} else {
|
||||
jQuery(path).addClass('jvectormap-region');
|
||||
}
|
||||
|
||||
jQuery(this.rootGroup).append(path);
|
||||
}
|
||||
|
||||
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e) {
|
||||
var path = e.target,
|
||||
code = e.target.id.split('_').pop(),
|
||||
labelShowEvent = $.Event('labelShow.jqvmap'),
|
||||
regionMouseOverEvent = $.Event('regionMouseOver.jqvmap');
|
||||
|
||||
if (e.type == 'mouseover') {
|
||||
jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
|
||||
if (!regionMouseOverEvent.isDefaultPrevented()) {
|
||||
map.highlight(code, path);
|
||||
}
|
||||
if (params.showTooltip) {
|
||||
map.label.text(mapData.pathes[code].name);
|
||||
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
|
||||
|
||||
if (!labelShowEvent.isDefaultPrevented()) {
|
||||
map.label.show();
|
||||
map.labelWidth = map.label.width();
|
||||
map.labelHeight = map.label.height();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
map.unhighlight(code, path);
|
||||
|
||||
map.label.hide();
|
||||
jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.pathes[code].name]);
|
||||
}
|
||||
});
|
||||
|
||||
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'click', function (e) {
|
||||
if (!params.multiSelectRegion) {
|
||||
for (var key in mapData.pathes) {
|
||||
map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
|
||||
map.countries[key].setFill(map.countries[key].getOriginalFill());
|
||||
}
|
||||
}
|
||||
|
||||
var path = e.target;
|
||||
var code = e.target.id.split('_').pop();
|
||||
|
||||
jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
|
||||
|
||||
if (map.selectedRegions.indexOf(code) !== -1) {
|
||||
map.deselect(code, path);
|
||||
} else {
|
||||
map.select(code, path);
|
||||
}
|
||||
|
||||
//console.log(selectedRegions);
|
||||
|
||||
});
|
||||
|
||||
if (params.showTooltip) {
|
||||
params.container.mousemove(function (e) {
|
||||
if (map.label.is(':visible')) {
|
||||
map.label.css({
|
||||
left: e.pageX - 15 - map.labelWidth,
|
||||
top: e.pageY - 15 - map.labelHeight
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.setColors(params.colors);
|
||||
|
||||
this.canvas.canvas.appendChild(this.rootGroup);
|
||||
|
||||
this.applyTransform();
|
||||
|
||||
this.colorScale = new ColorScale(params.scaleColors, params.normalizeFunction, params.valueMin, params.valueMax);
|
||||
|
||||
if (params.values) {
|
||||
this.values = params.values;
|
||||
this.setValues(params.values);
|
||||
}
|
||||
|
||||
if (params.selectedRegions) {
|
||||
if (params.selectedRegions instanceof Array) {
|
||||
for(var k in params.selectedRegions) {
|
||||
this.select(params.selectedRegions[k].toLowerCase());
|
||||
}
|
||||
} else {
|
||||
this.select(params.selectedRegions.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
this.bindZoomButtons();
|
||||
|
||||
WorldMap.mapIndex++;
|
||||
};
|
||||
|
||||
WorldMap.prototype = {
|
||||
transX: 0,
|
||||
transY: 0,
|
||||
scale: 1,
|
||||
baseTransX: 0,
|
||||
baseTransY: 0,
|
||||
baseScale: 1,
|
||||
width: 0,
|
||||
height: 0,
|
||||
countries: {},
|
||||
countriesColors: {},
|
||||
countriesData: {},
|
||||
zoomStep: 1.4,
|
||||
zoomMaxStep: 4,
|
||||
zoomCurStep: 1,
|
||||
|
||||
setColors: function (key, color) {
|
||||
if (typeof key == 'string') {
|
||||
this.countries[key].setFill(color);
|
||||
this.countries[key].setAttribute("original", color);
|
||||
} else {
|
||||
var colors = key;
|
||||
|
||||
for (var code in colors) {
|
||||
if (this.countries[code]) {
|
||||
this.countries[code].setFill(colors[code]);
|
||||
this.countries[code].setAttribute("original", colors[code]);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setValues: function (values) {
|
||||
var max = 0,
|
||||
min = Number.MAX_VALUE,
|
||||
val;
|
||||
|
||||
for (var cc in values) {
|
||||
val = parseFloat(values[cc]);
|
||||
if (val > max) {
|
||||
max = values[cc];
|
||||
}
|
||||
if (val && val < min) {
|
||||
min = val;
|
||||
}
|
||||
}
|
||||
|
||||
this.colorScale.setMin(min);
|
||||
this.colorScale.setMax(max);
|
||||
|
||||
var colors = {};
|
||||
for (cc in values) {
|
||||
val = parseFloat(values[cc]);
|
||||
if (val) {
|
||||
colors[cc] = this.colorScale.getColor(val);
|
||||
} else {
|
||||
colors[cc] = this.color;
|
||||
}
|
||||
}
|
||||
this.setColors(colors);
|
||||
this.values = values;
|
||||
},
|
||||
|
||||
setBackgroundColor: function (backgroundColor) {
|
||||
this.container.css('background-color', backgroundColor);
|
||||
},
|
||||
|
||||
setScaleColors: function (colors) {
|
||||
this.colorScale.setColors(colors);
|
||||
|
||||
if (this.values) {
|
||||
this.setValues(this.values);
|
||||
}
|
||||
},
|
||||
|
||||
setNormalizeFunction: function (f) {
|
||||
this.colorScale.setNormalizeFunction(f);
|
||||
|
||||
if (this.values) {
|
||||
this.setValues(this.values);
|
||||
}
|
||||
},
|
||||
|
||||
highlight: function (cc, path) {
|
||||
path = path || $('#' + this.getCountryId(cc))[0];
|
||||
if (this.hoverOpacity) {
|
||||
path.setOpacity(this.hoverOpacity);
|
||||
} else if (this.hoverColor) {
|
||||
path.currentFillColor = path.getFill() + '';
|
||||
path.setFill(this.hoverColor);
|
||||
}
|
||||
},
|
||||
|
||||
unhighlight: function (cc, path) {
|
||||
path = path || $('#' + this.getCountryId(cc))[0];
|
||||
path.setOpacity(1);
|
||||
if (path.currentFillColor) {
|
||||
path.setFill(path.currentFillColor);
|
||||
}
|
||||
},
|
||||
|
||||
select: function (cc, path) {
|
||||
path = path || $('#' + this.getCountryId(cc))[0];
|
||||
if(this.selectedRegions.indexOf(cc) < 0) {
|
||||
if (this.multiSelectRegion) {
|
||||
this.selectedRegions.push(cc);
|
||||
} else {
|
||||
this.selectedRegions = [cc];
|
||||
}
|
||||
// MUST BE after the change of selectedRegions
|
||||
// Otherwise, we might loop
|
||||
$(this.container).trigger('regionSelect.jqvmap', [cc]);
|
||||
if (this.selectedColor) {
|
||||
path.currentFillColor = this.selectedColor;
|
||||
path.setFill(this.selectedColor);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
deselect: function (cc, path) {
|
||||
path = path || $('#' + this.getCountryId(cc))[0];
|
||||
if(this.selectedRegions.indexOf(cc) >= 0) {
|
||||
this.selectedRegions.splice(this.selectedRegions.indexOf(cc), 1);
|
||||
// MUST BE after the change of selectedRegions
|
||||
// Otherwise, we might loop
|
||||
$(this.container).trigger('regionDeselect.jqvmap', [cc]);
|
||||
path.currentFillColor = path.getOriginalFill();
|
||||
path.setFill(path.getOriginalFill());
|
||||
}
|
||||
},
|
||||
|
||||
isSelected: function(cc) {
|
||||
return this.selectedRegions.indexOf(cc) >= 0;
|
||||
},
|
||||
|
||||
resize: function () {
|
||||
var curBaseScale = this.baseScale;
|
||||
if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
|
||||
this.baseScale = this.height / this.defaultHeight;
|
||||
this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
|
||||
} else {
|
||||
this.baseScale = this.width / this.defaultWidth;
|
||||
this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
|
||||
}
|
||||
this.scale *= this.baseScale / curBaseScale;
|
||||
this.transX *= this.baseScale / curBaseScale;
|
||||
this.transY *= this.baseScale / curBaseScale;
|
||||
},
|
||||
|
||||
reset: function () {
|
||||
this.countryTitle.reset();
|
||||
for (var key in this.countries) {
|
||||
this.countries[key].setFill(WorldMap.defaultColor);
|
||||
}
|
||||
this.scale = this.baseScale;
|
||||
this.transX = this.baseTransX;
|
||||
this.transY = this.baseTransY;
|
||||
this.applyTransform();
|
||||
},
|
||||
|
||||
applyTransform: function () {
|
||||
var maxTransX, maxTransY, minTransX, minTransY;
|
||||
if (this.defaultWidth * this.scale <= this.width) {
|
||||
maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
|
||||
minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
|
||||
} else {
|
||||
maxTransX = 0;
|
||||
minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
|
||||
}
|
||||
|
||||
if (this.defaultHeight * this.scale <= this.height) {
|
||||
maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
|
||||
minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
|
||||
} else {
|
||||
maxTransY = 0;
|
||||
minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
|
||||
}
|
||||
|
||||
if (this.transY > maxTransY) {
|
||||
this.transY = maxTransY;
|
||||
}
|
||||
else if (this.transY < minTransY) {
|
||||
this.transY = minTransY;
|
||||
}
|
||||
if (this.transX > maxTransX) {
|
||||
this.transX = maxTransX;
|
||||
}
|
||||
else if (this.transX < minTransX) {
|
||||
this.transX = minTransX;
|
||||
}
|
||||
|
||||
this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
|
||||
},
|
||||
|
||||
makeDraggable: function () {
|
||||
var mouseDown = false;
|
||||
var oldPageX, oldPageY;
|
||||
var self = this;
|
||||
|
||||
self.isMoving = false;
|
||||
self.isMovingTimeout = false;
|
||||
|
||||
this.container.mousemove(function (e) {
|
||||
|
||||
if (mouseDown) {
|
||||
var curTransX = self.transX;
|
||||
var curTransY = self.transY;
|
||||
|
||||
self.transX -= (oldPageX - e.pageX) / self.scale;
|
||||
self.transY -= (oldPageY - e.pageY) / self.scale;
|
||||
|
||||
self.applyTransform();
|
||||
|
||||
oldPageX = e.pageX;
|
||||
oldPageY = e.pageY;
|
||||
|
||||
self.isMoving = true;
|
||||
if (self.isMovingTimeout) {
|
||||
clearTimeout(self.isMovingTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}).mousedown(function (e) {
|
||||
|
||||
mouseDown = true;
|
||||
oldPageX = e.pageX;
|
||||
oldPageY = e.pageY;
|
||||
|
||||
return false;
|
||||
|
||||
}).mouseup(function () {
|
||||
|
||||
mouseDown = false;
|
||||
|
||||
self.isMovingTimeout = setTimeout(function () {
|
||||
self.isMoving = false;
|
||||
}, 100);
|
||||
|
||||
return false;
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
bindZoomButtons: function () {
|
||||
var map = this;
|
||||
var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
|
||||
|
||||
this.container.find('.jqvmap-zoomin').click(function () {
|
||||
if (map.zoomCurStep < map.zoomMaxStep) {
|
||||
var curTransX = map.transX;
|
||||
var curTransY = map.transY;
|
||||
var curScale = map.scale;
|
||||
|
||||
map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
|
||||
map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
|
||||
map.setScale(map.scale * map.zoomStep);
|
||||
map.zoomCurStep++;
|
||||
|
||||
jQuery('#zoomSlider').css('top', parseInt(jQuery('#zoomSlider').css('top'), 10) - sliderDelta);
|
||||
}
|
||||
});
|
||||
|
||||
this.container.find('.jqvmap-zoomout').click(function () {
|
||||
if (map.zoomCurStep > 1) {
|
||||
var curTransX = map.transX;
|
||||
var curTransY = map.transY;
|
||||
var curScale = map.scale;
|
||||
|
||||
map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
|
||||
map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
|
||||
map.setScale(map.scale / map.zoomStep);
|
||||
map.zoomCurStep--;
|
||||
|
||||
jQuery('#zoomSlider').css('top', parseInt(jQuery('#zoomSlider').css('top'), 10) + sliderDelta);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setScale: function (scale) {
|
||||
this.scale = scale;
|
||||
this.applyTransform();
|
||||
},
|
||||
|
||||
getCountryId: function (cc) {
|
||||
return 'jqvmap' + this.index + '_' + cc;
|
||||
}
|
||||
};
|
||||
|
||||
WorldMap.xlink = "http://www.w3.org/1999/xlink";
|
||||
WorldMap.mapIndex = 1;
|
||||
WorldMap.maps = {};
|
||||
|
||||
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: [],
|
||||
|
||||
setMin: function (min) {
|
||||
this.clearMinValue = min;
|
||||
|
||||
if (typeof this.normalize === 'function') {
|
||||
this.minValue = this.normalize(min);
|
||||
} else {
|
||||
this.minValue = min;
|
||||
}
|
||||
},
|
||||
|
||||
setMax: function (max) {
|
||||
this.clearMaxValue = max;
|
||||
if (typeof this.normalize === 'function') {
|
||||
this.maxValue = this.normalize(max);
|
||||
} else {
|
||||
this.maxValue = max;
|
||||
}
|
||||
},
|
||||
|
||||
setColors: function (colors) {
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
colors[i] = ColorScale.rgbToArray(colors[i]);
|
||||
}
|
||||
this.colors = colors;
|
||||
},
|
||||
|
||||
setNormalizeFunction: function (f) {
|
||||
if (f === 'polynomial') {
|
||||
this.normalize = function (value) {
|
||||
return Math.pow(value, 0.2);
|
||||
};
|
||||
}
|
||||
else if (f === 'linear') {
|
||||
delete this.normalize;
|
||||
} else {
|
||||
this.normalize = f;
|
||||
}
|
||||
this.setMin(this.clearMinValue);
|
||||
this.setMax(this.clearMaxValue);
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
vectorToNum: function (vector) {
|
||||
var num = 0;
|
||||
for (var i = 0; i < vector.length; i++) {
|
||||
num += Math.round(vector[i]) * Math.pow(256, vector.length - i - 1);
|
||||
}
|
||||
return num;
|
||||
},
|
||||
|
||||
vectorSubtract: function (vector1, vector2) {
|
||||
var vector = [];
|
||||
for (var i = 0; i < vector1.length; i++) {
|
||||
vector[i] = vector1[i] - vector2[i];
|
||||
}
|
||||
return vector;
|
||||
},
|
||||
|
||||
vectorAdd: function (vector1, vector2) {
|
||||
var vector = [];
|
||||
for (var i = 0; i < vector1.length; i++) {
|
||||
vector[i] = vector1[i] + vector2[i];
|
||||
}
|
||||
return vector;
|
||||
},
|
||||
|
||||
vectorMult: function (vector, num) {
|
||||
var result = [];
|
||||
for (var i = 0; i < vector.length; i++) {
|
||||
result[i] = vector[i] * num;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
vectorLength: function (vector) {
|
||||
var result = 0;
|
||||
for (var i = 0; i < vector.length; i++) {
|
||||
result += vector[i] * vector[i];
|
||||
}
|
||||
return Math.sqrt(result);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
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)];
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
12
app/static/global/plugins/jqvmap/jqvmap/jquery.vmap.min.js
vendored
Normal file
12
app/static/global/plugins/jqvmap/jqvmap/jquery.vmap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
56
app/static/global/plugins/jqvmap/jqvmap/jqvmap.css
Normal file
56
app/static/global/plugins/jqvmap/jqvmap/jqvmap.css
Normal file
@ -0,0 +1,56 @@
|
||||
/*!
|
||||
* jQVMap Version 1.0
|
||||
*
|
||||
* http://jqvmap.com
|
||||
*
|
||||
* Copyright 2012, Peter Schmalfeldt <manifestinteractive@gmail.com>
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
* Fork Me @ https://github.com/manifestinteractive/jqvmap
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
width: 10px;
|
||||
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
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
26
app/static/global/plugins/jqvmap/samples/europe.html
Normal file
26
app/static/global/plugins/jqvmap/samples/europe.html
Normal file
@ -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 - Europe Map</title>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
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>
|
||||
33
app/static/global/plugins/jqvmap/samples/germany.html
Normal file
33
app/static/global/plugins/jqvmap/samples/germany.html
Normal file
@ -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>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
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>
|
||||
29
app/static/global/plugins/jqvmap/samples/multi.html
Normal file
29
app/static/global/plugins/jqvmap/samples/multi.html
Normal file
@ -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>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'europe_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
multiSelectRegion: true,
|
||||
//selectedRegion: ['ES','FR'],
|
||||
selectedRegion: 'FR'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 680px; height: 520px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
34
app/static/global/plugins/jqvmap/samples/russia.html
Normal file
34
app/static/global/plugins/jqvmap/samples/russia.html
Normal file
@ -0,0 +1,34 @@
|
||||
<?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>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'russia_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#999999',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
27
app/static/global/plugins/jqvmap/samples/usa.html
Normal file
27
app/static/global/plugins/jqvmap/samples/usa.html
Normal file
@ -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 - USA Map</title>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'usa_en',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
selectedRegion: 'MO'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
34
app/static/global/plugins/jqvmap/samples/world.html
Normal file
34
app/static/global/plugins/jqvmap/samples/world.html
Normal file
@ -0,0 +1,34 @@
|
||||
<?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>
|
||||
|
||||
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
|
||||
<script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#vmap').vectorMap({
|
||||
map: 'world_en',
|
||||
backgroundColor: '#333333',
|
||||
color: '#ffffff',
|
||||
hoverOpacity: 0.7,
|
||||
selectedColor: '#666666',
|
||||
enableZoom: true,
|
||||
showTooltip: true,
|
||||
values: sample_data,
|
||||
scaleColors: ['#C8EEFF', '#006491'],
|
||||
normalizeFunction: 'polynomial'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vmap" style="width: 600px; height: 400px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user