WebSVN - Integrator Subversion - Blame - Rev 1 - /PROJETOS/sic_2/sic/sic-web/src/main/webapp/assets/global/plugins/jqvmap/README.md

Rev	Author	Line No.	Line
1	espaco	1	![JQVMap](http://jqvmap.com/img/logo.png "JQVMap")
		2
		3	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.
		4
		5	jQuery Vector Map
		6	======
		7
		8	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:
		9
		10	<?xml version="1.0" encoding="UTF-8"?>
		11	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		12	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
		13	<head>
		14	<title>JQVMap - World Map</title>
		15
		16	<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
		17
		18	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
		19	<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
		20	<script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
		21
		22	<script type="text/javascript">
		23	jQuery(document).ready(function() {
		24	jQuery('#vmap').vectorMap({ map: 'world_en' });
		25	});
		26	</script>
		27	</head>
		28	<body>
		29	<div id="vmap" style="width: 600px; height: 400px;"></div>
		30	</body>
		31	</html>
		32
		33	Making it Pretty
		34	======
		35
		36	While initializing a map you can provide parameters to change its look and feel.
		37
		38	jQuery('#vmap').vectorMap(
		39	{
		40	map: 'world_en',
		41	backgroundColor: '#a5bfdd',
		42	borderColor: '#818181',
		43	borderOpacity: 0.25,
		44	borderWidth: 1,
		45	color: '#f4f3f0',
		46	enableZoom: true,
		47	hoverColor: '#c9dfaf',
		48	hoverOpacity: null,
		49	normalizeFunction: 'linear',
		50	scaleColors: ['#b6d6ff', '#005ace'],
		51	selectedColor: '#c9dfaf',
		52	selectedRegion: null,
		53	showTooltip: true,
		54	onRegionClick: function(element, code, region)
		55	{
		56	var message = 'You clicked "'
		57	+ region
		58	+ '" which has the code: '
		59	+ code.toUpperCase();
		60
		61	alert(message);
		62	}
		63	});
		64
		65	Configuration Settings
		66	------
		67
		68	map 'world_en'
		69
		70	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
		71
		72	backgroundColor '#a5bfdd'
		73
		74	Background color of map container in any CSS compatible format.
		75
		76	borderColor '#818181'
		77
		78	Border Color to use to outline map objects
		79
		80	borderOpacity 0.5
		81
		82	Border Opacity to use to outline map objects ( use anything from 0-1, e.g. 0.5, defaults to 0.25 )
		83
		84	borderWidth 3
		85
		86	Border Width to use to outline map objects ( defaults to 1 )
		87
		88	color '#f4f3f0'
		89
		90	Color of map regions.
		91
		92	colors
		93
		94	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.
		95
		96	enableZoom boolean
		97
		98	Whether to Enable Map Zoom ( true or false, defaults to true)
		99
		100	hoverColor '#c9dfaf'
		101
		102	Color of the region when mouse pointer is over it.
		103
		104	hoverOpacity 0.5
		105
		106	Opacity of the region when mouse pointer is over it.
		107
		108	normalizeFunction 'linear'
		109
		110	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.
		111
		112	scaleColors ['#b6d6ff', '#005ace']
		113
		114	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.
		115
		116	selectedRegion 'mo'
		117
		118	This is the Region that you are looking to have preselected (two letter ISO code, defaults to null )
		119
		120	WORLD
		121	------------------------------
		122	AE = United Arab Emirates
		123	AF = Afghanistan
		124	AG = Antigua and Barbuda
		125	AL = Albania
		126	AM = Armenia
		127	AO = Angola
		128	AR = Argentina
		129	AT = Austria
		130	AU = Australia
		131	AZ = Azerbaijan
		132	BA = Bosnia and Herzegovina
		133	BB = Barbados
		134	BD = Bangladesh
		135	BE = Belgium
		136	BF = Burkina Faso
		137	BG = Bulgaria
		138	BI = Burundi
		139	BJ = Benin
		140	BN = Brunei Darussalam
		141	BO = Bolivia
		142	BR = Brazil
		143	BS = Bahamas
		144	BT = Bhutan
		145	BW = Botswana
		146	BY = Belarus
		147	BZ = Belize
		148	CA = Canada
		149	CD = Congo
		150	CF = Central African Republic
		151	CG = Congo
		152	CH = Switzerland
		153	CI = Cote d'Ivoire
		154	CL = Chile
		155	CM = Cameroon
		156	CN = China
		157	CO = Colombia
		158	CR = Costa Rica
		159	CU = Cuba
		160	CV = Cape Verde
		161	CY = Cyprus
		162	CZ = Czech Republic
		163	DE = Germany
		164	DJ = Djibouti
		165	DK = Denmark
		166	DM = Dominica
		167	DO = Dominican Republic
		168	DZ = Algeria
		169	EC = Ecuador
		170	EE = Estonia
		171	EG = Egypt
		172	ER = Eritrea
		173	ES = Spain
		174	ET = Ethiopia
		175	FI = Finland
		176	FJ = Fiji
		177	FK = Falkland Islands
		178	FR = France
		179	GA = Gabon
		180	GB = United Kingdom
		181	GD = Grenada
		182	GE = Georgia
		183	GF = French Guiana
		184	GH = Ghana
		185	GL = Greenland
		186	GM = Gambia
		187	GN = Guinea
		188	GQ = Equatorial Guinea
		189	GR = Greece
		190	GT = Guatemala
		191	GW = Guinea-Bissau
		192	GY = Guyana
		193	HN = Honduras
		194	HR = Croatia
		195	HT = Haiti
		196	HU = Hungary
		197	ID = Indonesia
		198	IE = Ireland
		199	IL = Israel
		200	IN = India
		201	IQ = Iraq
		202	IR = Iran
		203	IS = Iceland
		204	IT = Italy
		205	JM = Jamaica
		206	JO = Jordan
		207	JP = Japan
		208	KE = Kenya
		209	KG = Kyrgyz Republic
		210	KH = Cambodia
		211	KM = Comoros
		212	KN = Saint Kitts and Nevis
		213	KP = North Korea
		214	KR = South Korea
		215	KW = Kuwait
		216	KZ = Kazakhstan
		217	LA = Lao People's Democratic Republic
		218	LB = Lebanon
		219	LC = Saint Lucia
		220	LK = Sri Lanka
		221	LR = Liberia
		222	LS = Lesotho
		223	LT = Lithuania
		224	LV = Latvia
		225	LY = Libya
		226	MA = Morocco
		227	MD = Moldova
		228	MG = Madagascar
		229	MK = Macedonia
		230	ML = Mali
		231	MM = Myanmar
		232	MN = Mongolia
		233	MR = Mauritania
		234	MT = Malta
		235	MU = Mauritius
		236	MV = Maldives
		237	MW = Malawi
		238	MX = Mexico
		239	MY = Malaysia
		240	MZ = Mozambique
		241	NA = Namibia
		242	NC = New Caledonia
		243	NE = Niger
		244	NG = Nigeria
		245	NI = Nicaragua
		246	NL = Netherlands
		247	NO = Norway
		248	NP = Nepal
		249	NZ = New Zealand
		250	OM = Oman
		251	PA = Panama
		252	PE = Peru
		253	PF = French Polynesia
		254	PG = Papua New Guinea
		255	PH = Philippines
		256	PK = Pakistan
		257	PL = Poland
		258	PT = Portugal
		259	PY = Paraguay
		260	QA = Qatar
		261	RE = Reunion
		262	RO = Romania
		263	RS = Serbia
		264	RU = Russian Federationß
		265	RW = Rwanda
		266	SA = Saudi Arabia
		267	SB = Solomon Islands
		268	SC = Seychelles
		269	SD = Sudan
		270	SE = Sweden
		271	SI = Slovenia
		272	SK = Slovakia
		273	SL = Sierra Leone
		274	SN = Senegal
		275	SO = Somalia
		276	SR = Suriname
		277	ST = Sao Tome and Principe
		278	SV = El Salvador
		279	SY = Syrian Arab Republic
		280	SZ = Swaziland
		281	TD = Chad
		282	TG = Togo
		283	TH = Thailand
		284	TJ = Tajikistan
		285	TL = Timor-Leste
		286	TM = Turkmenistan
		287	TN = Tunisia
		288	TR = Turkey
		289	TT = Trinidad and Tobago
		290	TW = Taiwan
		291	TZ = Tanzania
		292	UA = Ukraine
		293	UG = Uganda
		294	US = United States of America
		295	UY = Uruguay
		296	UZ = Uzbekistan
		297	VE = Venezuela
		298	VN = Vietnam
		299	VU = Vanuatu
		300	YE = Yemen
		301	ZA = South Africa
		302	ZM = Zambia
		303	ZW = Zimbabwe
		304
		305	USA
		306	------------------------------
		307	AK = Alaska
		308	AL = Alabama
		309	AR = Arkansas
		310	AZ = Arizona
		311	CA = California
		312	CO = Colorado
		313	CT = Connecticut
		314	DC = District of Columbia
		315	DE = Delaware
		316	FL = Florida
		317	GA = Georgia
		318	HI = Hawaii
		319	IA = Iowa
		320	ID = Idaho
		321	IL = Illinois
		322	IN = Indiana
		323	KS = Kansas
		324	KY = Kentucky
		325	LA = Louisiana
		326	MA = Massachusetts
		327	MD = Maryland
		328	ME = Maine
		329	MI = Michigan
		330	MN = Minnesota
		331	MO = Missouri
		332	MS = Mississippi
		333	MT = Montana
		334	NC = North Carolina
		335	ND = North Dakota
		336	NE = Nebraska
		337	NH = New Hampshire
		338	NJ = New Jersey
		339	NM = New Mexico
		340	NV = Nevada
		341	NY = New York
		342	OH = Ohio
		343	OK = Oklahoma
		344	OR = Oregon
		345	PA = Pennsylvania
		346	RI = Rhode Island
		347	SC = South Carolina
		348	SD = South Dakota
		349	TN = Tennessee
		350	TX = Texas
		351	UT = Utah
		352	VA = Virginia
		353	VT = Vermont
		354	WA = Washington
		355	WI = Wisconsin
		356	WV = West Virginia
		357	WY = Wyoming
		358
		359	EUROPE
		360	------------------------------
		361	AD = Andorra
		362	AL = Albania
		363	AM = Armenia
		364	AT = Austria
		365	AZ = Azerbaijan
		366	BA = Bosnia and Herzegovina
		367	BE = Belgium
		368	BG = Bulgaria
		369	BY = Belarus
		370	CH = Switzerland
		371	CY = Cyprus
		372	CZ = Czech Republic
		373	DE = Germany
		374	DK = Denmark
		375	DZ = Algeria
		376	EE = Estonia
		377	ES = Spain
		378	FI = Finland
		379	FR = France
		380	GB = United Kingdom
		381	GE = Georgia
		382	GL = Greenland
		383	GR = Greece
		384	HR = Croatia
		385	HU = Hungary
		386	IE = Ireland
		387	IL = Israel
		388	IQ = Iraq
		389	IR = Iran
		390	IS = Iceland
		391	IT = Italy
		392	JO = Jordan
		393	KZ = Kazakhstan
		394	LB = Lebanon
		395	LI = Liechtenstein
		396	LT = Lithuania
		397	LU = Luxembourg
		398	LV = Latvia
		399	MA = Morocco
		400	MC = Monaco
		401	MD = Moldova
		402	ME = Montenegro
		403	MK = Macedonia
		404	MT = Malta
		405	NL = Netherlands
		406	NO = Norway
		407	PL = Poland
		408	PT = Portugal
		409	RO = Romania
		410	RU = Russian Federation
		411	SA = Saudi Arabia
		412	SE = Sweden
		413	SI = Slovenia
		414	SK = Slovakia
		415	SM = San Marino
		416	SR = Suriname
		417	SY = Syrian Arab Republic
		418	TM = Turkmenistan
		419	TN = Tunisia
		420	TR = Turkey
		421	UA = Ukraine
		422
		423	GERMANY
		424	------------------------------
		425	BB = Brandenburg
		426	BE = Berlin
		427	BW = Baden-WÃrttemberg
		428	BY = Bayern
		429	HB = Bremen
		430	HE = Hessen
		431	HH = Hamburg
		432	MV = Mecklenburg-Vorpommern
		433	NI = Niedersachsen
		434	NW = Nordrhein-Westfalen
		435	RP = Rheinland-Pfalz
		436	SH = Schleswig-Holstein
		437	SL = Saarland
		438	SN = Sachsen
		439	ST = Sachsen-Anhalt
		440	TH = ThÃri
		441
		442	RUSSIA
		443	------------------------------
		444	CH = Chukotka Autonomous Okrug
		445	KA = Kamchatka Krai
		446	MA = Magadan Oblast
		447	SA = Sakha Republic
		448	AM = Amur Oblast
		449	PR = Primorsky Krai
		450	EU = Jewish Autonomous Oblast
		451	HA = Khabarovsk Krai
		452	SH = Sakhalin Oblast
		453	OM = Omsk Oblast
		454	NV = Novosibirsk Oblast
		455	AL = Altai Krai
		456	LT = Altai Republic
		457	TV = Tuva Republic
		458	HK = Republic of Khakassia
		459	KM = Kemerovo Oblast
		460	TM = Tomsk Oblast
		461	ZB = Zabaykalsky Krai
		462	BR = Buryat Republic
		463	IR = Irkutsk Oblast
		464	KR = Krasnoyarsk Krai
		465	YA = Yamalo-Nenets Autonomous Okrug
		466	HT = Khanty–Mansi Autonomous Okrug
		467	TU = Tyumen Oblast
		468	KU = Kurgan Oblast
		469	CL = Chelyabinsk Oblast
		470	SV = Sverdlovsk Oblast
		471	AR = Arkhangelsk Oblast
		472	NE = Nenets Autonomous Okrug
		473	KO = Komi Republic
		474	MU = Murmansk Oblast
		475	VO = Vologda Oblast
		476	NO = Novgorod Oblast
		477	PS = Pskov Oblast
		478	LE = Leningrad Oblast
		479	KL = Republic of Karelia
		480	KN = Kaliningrad Oblast
		481	DA = Republic of Dagestan
		482	ST = Stavropol Krai
		483	SO = Republic of North Ossetia–Alania
		484	KB = Kabardino-Balkar Republic
		485	KH = Karachay–Cherkess Republic
		486	CC = Chechen Republic
		487	IN = Republic of Ingushetia
		488	AD = Republic of Adygea
		489	KS = Krasnodar Krai
		490	RO = Rostov Oblast
		491	KK = Republic of Kalmykia
		492	AS = Astrakhan Oblast
		493	VL = Volgograd Oblast
		494	TR = Tver Oblast
		495	SM = Smolensk Oblast
		496	BN = Bryansk Oblast
		497	KY = Kursk Oblast
		498	BL = Belgorod Oblast
		499	OR = Oryol Oblast
		500	KJ = Kaluga Oblast
		501	TL = Tula Oblast
		502	LP = Lipetsk Oblast
		503	MC = Moscow Oblast
		504	RZ = Ryazan Oblast
		505	TB = Tambov Oblast
		506	VM = Vladimir Oblast
		507	IV = Ivanovo Oblast
		508	YR = Yaroslavl Oblast
		509	KT = Kostroma Oblast
		510	NN = Nizhny Novgorod Oblast
		511	MR = Republic of Mordovia
		512	PZ = Penza Oblast
		513	SR = Saratov Oblast
		514	SS = Samara Oblast
		515	OB = Orenburg Oblast
		516	BS = Republic of Bashkortostan
		517	UL = Ulyanovsk Oblast
		518	CU = Chuvash Republic
		519	TA = Republic of Tatarstan
		520	ML = Mari El Republic
		521	UD = Udmurt Republic
		522	KI = Kirov Oblast
		523	PE = Perm Krai
		524	VN = Voronezh Oblast
		525
		526	showTooltip boolean
		527
		528	Whether to show Tooltips on Mouseover ( true or false, defaults to true)
		529
		530	onLabelShow function(event, label, code)
		531
		532	Callback function which will be called before label is shown. Label DOM object and country code will be passed to the callback as arguments.
		533
		534	onRegionOver function(event, code, region)
		535
		536	Callback function which will be called when the mouse cursor enters the region path. Country code will be passed to the callback as argument.
		537
		538	onRegionOut function(event, code, region)
		539
		540	Callback function which will be called when the mouse cursor leaves the region path. Country code will be passed to the callback as argument.
		541
		542	onRegionClick function(event, code, region)
		543
		544	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.
		545
		546	Dynamic Updating
		547	======
		548
		549	Most of the options can be changed after initialization using the following code:
		550
		551	jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});
		552
		553	Instead of colors can be used any parameter except callbacks. Callbacks can be added and deleted using standard jQuery patterns of working with events.
		554	You can define callback function when you initialize JQVMap:
		555
		556	jQuery('#vmap').vectorMap(
		557	{
		558	onLabelShow: function(event, label, code)
		559	{
		560
		561	},
		562	onRegionOver: function(event, code, region)
		563	{
		564
		565	},
		566	onRegionOut: function(event, code, region)
		567	{
		568
		569	},
		570	onRegionClick: function(event, code, region)
		571	{
		572
		573	}
		574	});
		575
		576	Or later using standard jQuery mechanism:
		577
		578	jQuery('#vmap').bind('labelShow.jqvmap',
		579	function(event, label, code)
		580	{
		581
		582	}
		583	);
		584	jQuery('#vmap').bind('regionMouseOver.jqvmap',
		585	function(event, code, region)
		586	{
		587
		588	}
		589	);
		590	jQuery('#vmap').bind('regionMouseOut.jqvmap',
		591	function(event, code, region)
		592	{
		593
		594	}
		595	);
		596	jQuery('#vmap').bind('regionClick.jqvmap',
		597	function(event, code, region)
		598	{
		599
		600	}
		601	);
		602
		603	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.
		604
		605	jQuery('#vmap').vectorMap(
		606	{
		607	onLabelShow: function(event, label, code)
		608	{
		609	if (code == 'ca')
		610	{
		611	event.preventDefault();
		612	}
		613	else if (code == 'ru')
		614	{
		615	label.text('Bears, vodka, balalaika');
		616	}
		617	},
		618	onRegionOver: function(event, code)
		619	{
		620	if (code == 'ca')
		621	{
		622	event.preventDefault();
		623	}
		624	},
		625	});
		626
		627	Data Visualization
		628	======
		629
		630	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):
		631
		632	var sample_data = {"af":16.63,"al":11.58,"dz":158.97,...};
		633
		634	Then connect it to the page and add some code to make visualization:
		635
		636	var max = 0,
		637	min = Number.MAX_VALUE,
		638	cc,
		639	startColor = [200, 238, 255],
		640	endColor = [0, 100, 145],
		641	colors = {},
		642	hex;
		643
		644	//find maximum and minimum values
		645	for (cc in gdpData)
		646	{
		647	if (parseFloat(gdpData[cc]) > max)
		648	{
		649	max = parseFloat(gdpData[cc]);
		650	}
		651	if (parseFloat(gdpData[cc]) < min)
		652	{
		653	min = parseFloat(gdpData[cc]);
		654	}
		655	}
		656
		657	//set colors according to values of GDP
		658	for (cc in gdpData)
		659	{
		660	if (gdpData[cc] > 0)
		661	{
		662	colors[cc] = '#';
		663	for (var i = 0; i<3; i++)
		664	{
		665	hex = Math.round(startColor[i]
		666	+ (endColor[i]
		667	- startColor[i])
		668	* (gdpData[cc] / (max - min))).toString(16);
		669
		670	if (hex.length == 1)
		671	{
		672	hex = '0'+hex;
		673	}
		674
		675	colors[cc] += (hex.length == 1 ? '0' : '') + hex;
		676	}
		677	}
		678	}
		679
		680	//initialize JQVMap
		681	jQuery('#vmap').vectorMap(
		682	{
		683	colors: colors,
		684	hoverOpacity: 0.7,
		685	hoverColor: false
		686	});
		687
		688	Custom Maps
		689	======
		690
		691	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):
		692
		693	python \
		694	path/to/converter.py \
		695	path/to/geo-data.shp \
		696	path/to/resulting-map.js \
		697	--width 900 \
		698	--country_name_index 4 \
		699	--where "ISO = 'USA'" \
		700	--codes_file path/to/codes-en.tsv \
		701	--insets '[{"codes": ["US-AK"], "width": 200, "left": 10, "top": 370}, {"codes": ["US-HI"], "width": 100, "left": 220, "top": 400}]' \
		702	--minimal_area 4000000 \
		703	--buffer_distance -3000 \
		704	--simplify_tolerance 1000 \
		705	--longtitude0 10w \
		706	--name us

Subversion Repositories Integrator Subversion

(root)/PROJETOS/sic_2/sic/sic-web/src/main/webapp/assets/global/plugins/jqvmap/README.md - Rev 1