İyinet'e Hoşgeldiniz!

Türkiye'nin En Eski Webmaster Forum'una Hemen Kayıt Olun!

Kayıt Ol!

Js harita yardım

E

ercan_

0
İyinet Üyesi
Katılım
8 Kasım 2014
Mesajlar
74
Reaction score
0
Merhaba arkadaşlar, Şöyle bir isteğim var sizlerden, Bir Türkiye haritası var js le yapılmış ve bu haritada ben belli illerin rengini farklı yapmak istiyorum. 2 saattir uğraştım ama yapamadım. Bir yardımcı olabilir misiniz?

Sanırım gerekli olacak bu iki js dosyası, zaten index html de bişey yok sadece bir div alanı var


init.js
Kod: 
/*
  Raphaël 2.1.0 - JavaScript Vector Library                         
  Copyright © 2008-2012 Dmitry Baranovskiy (http://raphaeljs.com)   
  Copyright © 2008-2012 Sencha Labs (http://sencha.com)             
  Licensed under the MIT (http://raphaeljs.com/license.html) license. 
  ***
  [MENTION=67695]tit[/MENTION]le	  : Interactive Turkey Map with RaphaelJS
  Edited by Selen GORA <[url]http://selengora.com[/url] - [email][email protected][/email]>

  ***
   
  [MENTION=67695]tit[/MENTION]le: Added modalbox

*/

	var iscountyselected = false;
	var previouscountyselected = "blank";
	var start = true;
	var past = lisanssız;
	var content_dir = "details";
	
	$(function(){
	
	var r = Raphael('map'),
	attributes = {
            fill: '#e0e0e0',
            stroke: '#999',
            'stroke-width': 0,
            'stroke-linejoin': 'round',
        },
	arr = new Array();
	
	for (var county in paths) {
		
		var obj = r.path(paths[county].path);
		
		obj.attr(attributes);
		
		arr[obj.id] = county;
			
		if(arr[county] == 'blank')
			obj.attr(attributes).attr( { fill: "#000" } ); /* set blank colour */

			
							
		if(arr[obj.id] != 'blank') /* prevent change of blank colour and mouse click */
		{				
			obj.data('selected', 'notSelected');
			/* add ID to paths */
			obj.node.id = arr[obj.id];
			
			/* add title (for tooltip) to paths */
			obj.attr(attributes).attr( { title: paths[arr[obj.id]].name } );

			/* add tool tip to map 	*/ 
			$('svg a').tipsy({gravity: 'sw'});				
			/* end tool tip to map */			
			/* add crests to bottom and set county selections */
			obj.click(function(){	

			/* [MENTION=72512]AUTH[/MENTION]or: Taner DOGAN //START */			
			$("#detail").click();
			$.get(content_dir+"/"+arr[this.id]+".html", function (html){							
				$("#detail").empty().fadeIn(700).append(html).css("display", "block");				
				$("#detail").css({
					"position": "absolute",
					"top": ((($("#detail").parent().height() +100 -  $("#detail").height()) / 2) + "px")
				});
			}).error(function() { 
				warn = "<p style='text-align:center;'>Bu bölgede kayıt bulunamadı</p><a href='#' class='close'></a>";
				$("#detail").empty().fadeIn(700).append(warn).css("display", "block");	
			});
			/* [MENTION=72512]AUTH[/MENTION]or: Taner DOGAN //END */
			
				if(paths[arr[this.id]].value == 'notSelected')
				{
						this.animate({
						fill: '#999'
					}, 200);
			
					paths[previouscountyselected].value = "notSelected";
					paths[arr[this.id]].value = "isSelected";
					//alert(paths[arr[this.id]].value = "isSelected");
					
					//alert(arr[this.id] + previouscountyselected);
					previouscountyselected = paths[arr[this.id]].name;
						
					if (!start && past != this)
					{
						past.animate({ fill: '#e0e0e0'	}, 200);
					}
					past = this;
					start = false;					
				}
	
					
				else if(paths[arr[this.id]].value == 'isSelected')
					{
						this.animate({
							fill: '#999'
						}, 200);
						
						paths[arr[this.id]].value = "notSelected"; /* set path value */	
					}	
				
				});/* end mark selections */
		
			/* county hover bump */
			function hoverin(e){
				if(paths[arr[this.id]].value == 'notSelected')
					this.animate({
						fill: '#ff2525'}, 300);						
			}
			function hoverout(e){			
				if(paths[arr[this.id]].value == 'notSelected')
					this.animate({
						fill: '#e0e0e0'}, 300);
			}
			obj.mouseout(hoverout);
				
			obj.mouseover(hoverin);
			/* end county hover bump */
			

			
			/* hide name div - !important do not delete - ajax uses contents for event search */
			$('#countyInfo').hide();
			
			$('#spinner').hide();
			/* [MENTION=72512]AUTH[/MENTION]or: Taner DOGAN //START */	
			$(".close").live("click", function(){
				$("#detail").css("display", "none").empty();	
				past.animate({ fill: '#e0e0e0'	}, 200);
				past.animate().mouseover( function() {
					this.animate({
						fill: '#262e35'}, 300);	})
				past.animate().mouseout( function() {
					this.animate({
						fill: '#e0e0e0'}, 300);	})				
			});
			
			/* [MENTION=72512]AUTH[/MENTION]or: Taner DOGAN //END */
			
		}/* end check on blank */
		/*Resize Map*/
		r.setViewBox(0,0,1050,620,true);
		r.setSize("100%","100%");	
	} /* end raphael loop */	

});

paths.js Bu js de ben 2 tane il bıraktım konu karakter sayısını aştığı için, ben bu 2 ilden 1ini renkli yapmak istiyorum.

Kod: 
/*
  Raphaël 2.1.0 - JavaScript Vector Library                         
  Copyright © 2008-2012 Dmitry Baranovskiy (http://raphaeljs.com)   
  Copyright © 2008-2012 Sencha Labs (http://sencha.com)             
  Licensed under the MIT (http://raphaeljs.com/license.html) license. 
  ***
  Document   : Interactive Turkey Map with RaphaelJS
  Edited by Selen GORA <http://selengora.com - [email protected]>
*/

var paths = 

{
	blank: {
	name: 'blank',
	path: ''
	
	},
	balikesir: {
	name: 'balikesir',
	county: '10',
	value: 'notSelected',
	path: 'M 141.46624,347.76982 C 140.65523,346.20149 138.88495,344.19317 137.53229,343.30687 C 134.64135,341.41265 131.88945,336.32757 131.88945,332.87978 C 131.88945,330.60453 131.63487,330.48854 127.99208,331.10398 C 125.59855,331.50836 123.8394,331.34935 123.43306,330.69188 C 123.06915,330.10307 121.15295,329.62132 119.17482,329.62132 C 116.87917,329.62132 114.39265,328.71703 112.30056,327.12132 C 108.80148,324.45244 105.95898,323.95179 104.21379,325.69698 C 103.44623,326.46454 101.62355,326.32287 97.850526,325.2024 C 92.07415,323.487 86.237687,324.29187 83.883494,327.1285 C 83.20208,327.94955 81.879823,328.62132 80.945145,328.62132 C 80.010466,328.62132 77.478066,329.9588 75.317589,331.5935 C 70.580585,335.1777 70.118789,335.24512 69.709001,332.41231 C 69.51335,331.05981 68.420121,329.93114 66.88945,329.50135 L 64.38945,328.79938 L 66.63945,328.09372 C 67.87695,327.70561 68.88945,327.04514 68.88945,326.62601 C 68.88945,326.20688 70.23945,325.30477 71.88945,324.62132 C 73.53945,323.93787 74.88945,322.75827 74.88945,322 C 74.88945,321.24173 75.56445,320.62132 76.38945,320.62132 C 77.21445,320.62132 77.88945,319.94632 77.88945,319.12132 C 77.88945,318.29632 78.717218,317.62132 79.728935,317.62132 C 81.801855,317.62132 84.128399,313.40759 83.278437,311.19262 C 82.842679,310.05705 80.994307,309.8022 74.805275,310.02434 C 65.938717,310.34259 65.280293,309.71684 69.077508,304.58083 C 70.88161,302.14065 71.983174,301.62132 75.355002,301.62132 C 77.604192,301.62132 80.437188,300.92597 81.650549,300.0761 C 83.644259,298.67965 84.314676,298.68638 88.613831,300.14598 C 91.230274,301.03429 94.180181,302.62963 95.16918,303.6912 C 97.655126,306.35955 100.5256,306.09801 106.52611,302.65644 C 110.09632,300.60876 111.99503,298.7572 112.75232,296.58486 C 114.26515,292.24513 113.13163,281.75403 110.78878,278.41181 C 109.74415,276.92158 108.88945,275.4009 108.88945,275.03252 C 108.88945,273.73627 118.12599,265.7788 120.24486,265.2496 C 121.42438,264.955 124.13885,265.10969 126.277,265.59336 C 129.58662,266.34201 130.73876,266.11027 134.027,264.03449 C 136.1645,262.68515 137.88945,262.10611 137.88945,262.73794 C 137.88945,263.5435 139.67538,263.6776 143.95519,263.19339 C 149.69246,262.54429 149.96617,262.60944 149.00979,264.39647 C 148.45366,265.43561 147.30139,266.86447 146.4492,267.57173 C 144.40986,269.26424 145.36658,278.8271 148.01669,283.23935 C 149.04671,284.95427 149.89933,287.42927 149.91141,288.73935 C 149.92349,290.04944 150.77934,292.98435 151.8133,295.26139 C 153.25337,298.43278 154.53917,299.68064 157.30873,300.59468 C 159.62281,301.3584 161.48329,302.869 162.47736,304.79133 C 163.94093,307.62156 164.32682,307.77534 169.16915,307.45804 C 174.28162,307.12304 174.3129,307.13916 175.30677,310.62132 C 176.88213,316.14081 179.01964,317.87512 183.26529,317.07864 C 187.84674,316.21915 188.99747,318.39724 185.98516,322.22678 C 184.82613,323.70024 183.88945,326.35536 183.88945,328.16729 C 183.88945,331.81276 179.66393,336.22414 175.31238,337.12161 C 173.97977,337.39645 171.76445,337.85489 170.38945,338.14037 C 167.705,338.69772 167.24071,340.54061 168.97047,343.77271 C 169.56503,344.88366 169.84886,345.99524 169.60121,346.24289 C 169.35356,346.49055 164.9296,347.15944 159.77019,347.72933 C 154.61078,348.29921 149.96195,349.18305 149.43945,349.6934 C 148.91695,350.20376 147.24101,350.62132 145.71513,350.62132 C 143.67607,350.62132 142.55001,349.8656 141.46624,347.76982 z M 133.88945,259.94269 C 131.93243,259.35998 127.74982,252.82565 128.88483,252.12418 C 130.0351,251.41327 138.43378,253.31869 141.70516,255.03275 L 144.2796,256.38163 L 140.12436,258.50148 C 137.83898,259.66739 135.8387,260.56912 135.67929,260.50532 C 135.51988,260.44152 134.71445,260.18833 133.88945,259.94269 z M 121.23453,245.07819 C 120.90884,244.22947 120.87675,243.30069 121.16321,243.01423 C 122.17755,241.99988 127.99922,242.33109 129.13595,243.46782 C 130.00728,244.33915 129.76573,244.62132 128.14847,244.62132 C 126.97093,244.62132 125.72937,245.07132 125.38945,245.62132 C 124.44705,247.14615 121.90033,246.81325 121.23453,245.07819 z '
	},
	bilecik: {
	name: 'bilecik',
	county: '11',
	value: 'notSelected',
	path: 'M 236.86925,316.25782 L 230.38945,314.02059 L 230.4832,308.57095 C 230.53476,305.57366 230.93513,301.40921 231.37291,299.31664 C 231.85808,296.99757 231.75645,294.65475 231.11263,293.31664 C 228.67771,288.25587 228.89804,286.42921 232.44293,282.28781 C 235.4485,278.77647 235.88945,277.57085 235.88945,272.8644 C 235.88945,268.23271 236.30392,267.05301 238.81253,264.5444 C 242.49878,260.85814 243.48962,260.87219 244.23945,264.62132 C 244.68083,266.82823 245.40271,267.62132 246.97009,267.62132 C 248.14195,267.62132 250.45125,268.7577 252.10187,270.1466 C 254.51988,272.18123 255.76101,272.54844 258.48965,272.03654 C 262.60019,271.2654 266.88664,272.21055 266.89715,273.89037 C 266.90139,274.56739 268.70139,276.14726 270.89715,277.40118 C 273.49968,278.88739 274.88945,280.38976 274.88945,281.71692 C 274.88945,282.83666 275.33649,284.58811 275.88288,285.60905 C 276.72162,287.17625 276.43161,287.56297 274.02039,288.09256 C 270.66116,288.83037 266.60161,293.08129 265.88053,296.61614 C 265.56308,298.17229 264.15307,299.68633 262.13294,300.64018 C 260.35168,301.48125 258.19268,303.17109 257.33516,304.39536 C 256.0939,306.16751 254.80379,306.62132 251.00706,306.62132 C 247.31507,306.62132 245.74705,307.144 244.06376,308.93577 C 241.69258,311.45978 241.14386,316.18837 243.13945,316.90108 C 243.82695,317.14662 244.15536,317.60571 243.86925,317.92128 C 243.58314,318.23685 240.43314,317.4883 236.86925,316.25782 z'
	}
}
 
I

ImSorry

Veri Merkezi
İyinet Üyesi
Onaylı Üye
Katılım
15 Aralık 2012
Mesajlar
133
Reaction score
0
Konum
BURSA
Merhaba,
İncelediğim kadarı ile obj. değerlerinin renklendirilmesi gerekiyor.

Kaynagın css dosyalarını yayınlar mısınız ?
Bu şekilde yardımcı olabilirim size..
 
Cevap yazmak için giriş yap yada kayıt ol.

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Üst