Skip to main content
ammap change country on click

Ammap dynamically load map of the country on click

Haritaya tıklayınca ilgili ülkenin haritasını değiştirelim.

Bu yazının konusu AmMap haritasında ülkeye tıklayınca, var olan dünya haritasını kaldırıp ilgili ülkenin haritasını yüklemek. (yani dynamicall load map yapıcaz, erik gelirse o da bulsun diye arada ingilizce serpiştiriyoruz:)

Yazıyı da şundan yazdım; Şurada çözümü aranmış fakat pek becerememişler sanki. Birde biz yapalım dedik 🙂

İlk haritamız dünya haritası olduğu için maps kaynağı worldLow

 var dataProvider = {
 mapVar: AmCharts.maps.worldLow,
 getAreasFromMap: true,
 };
 map.areasSettings = {
     autoZoom: true,
     rollOverBrightness: 10,
     selectedBrightness: 20,
     rollOverOutlineColor: "#9FA8DA",
     selectedColor: "#000",
     color: "#E8EAF6",
     rollOverColor: "#9FA8DA",
     outlineColor: "#C5CAE9"
 };
map.smallMap = new AmCharts.SmallMap();
 // write the map to container div
 map.write("mapdiv");

Haritamızı oluşturduk. clickMapObject ‘yi dinleyip tıklama yapıldığını kontrol edeceğiz.
Şimdi Dynamically load map yapalım.

 map.addListener("clickMapObject", function (event) {

 var country = event.mapObject.title;
 country = country.toLowerCase();
 clickCountryId = event.mapObject.id;
 var filename = "path/path/" + country + "Low.js";
 var mapVar = "AmCharts.maps." + country + "Low";
//united states istisna
//other country auto load map
 if (country == "united states")
 {
 filename = "path/js/usaLow.js";
 mapVar = "AmCharts.maps.usaLow";
 }

 $.getScript(filename, function (data, textStatus, jqxhr) {})
 .done(function (script, textStatus)
 {
       var dataProvider = {
       mapVar: eval(mapVar),
       getAreasFromMap: true,
     };
      // ilgili ülkenin haritasını bağlayalım
      map.dataProvider = dataProvider;
      //harita yüklensin
map.validateData();
});

turkey map

Evet bu kadar 🙂 Hani yorumlar…

 

Doğuş Pompa