Gapi Class ile jVectorMap

vmapp

Gapi class ile elde etmiş olduğumuz verilerden illeri,ülkeleri,kıtaları alabiliyorduk buna bağlı olarak longitude latitude konumlarını alarak haritalara entegre etmek uygun ilk etapta hightcharts sitesnin sunmuş olduğu dünya haritası çok ilgimi çekti fakat biraz fazla kastırdı

anlayamadım daha önce bu sitedeki haritayla uğraşanlar benimle paylaşabilirler.Amaç kıta dan -> ülkeye -> şehire olucaktı ama yapamadım.Konuya dönücek olursak jVectorMap’i uygun gördüm markerse kısmına ltd lng konumlarını belirterek istediğiniz yerlere erişim sağlamanız mümkün.Çalışmayı indirerek inceleyebilirsiniz.

Demo

Çalışmayı İndir

Kaynaklar

http://jvectormap.com/

 jQuery(document).ready(function($)
	{
	var map = $("#world-map");
	map.vectorMap({
		map: 'world_mill_en', 
		backgroundColor: '#f4f4f4',
		focusOn: { x:0.56, y: 0.4, scale: 4 },
		markers: [
			 {latLng: [41.90, 12.45], name: 'Vatican City'},
                         {latLng: [43.73, 7.41],  name: 'Monaco'},
                         {latLng: [-0.52, 166.93], name: 'Nauru'},
                         {latLng: [-8.51, 179.21], name: 'Tuvalu'},
		],
		markerStyle: {
		  initial: {
			fill: '#ff4e50',
			stroke: '#ff4e50',
			"stroke-width": 6,
			"stroke-opacity": 0.3,
			  }
		},	
		regionStyle: 
			{
			  initial: {
				fill: '#e9e9e9',
				"fill-opacity": 1,
				stroke: 'none',
				"stroke-width": 0,
				"stroke-opacity": 1
			  },
			  hover: {
				"fill-opacity": 0.6
			  },
			  selected: {
				fill: 'orange'
			  },
			  selectedHover: {
				  
			  }
		},
		onRegionTipShow: function (e, tip, code) {
			e.preventDefault();
		}
		
	});

});

Yorum Bırak.