ArcGIS Map Server verileri ile Google Chart çizdirilmesi

Bir önceki yazıda ASP.NET Web API ile  tarafından servis edilen JSON verileri ile Google grafiklerinin çizimini yapmıştık. Bu yazıda da yine Google grafik çizimi üzerinde duracağız. Grafik çizimi için kullanacağımız veri ise uzak bir sunucu üzerinde elde edilecek. Uzak sunucu verileri ise ArcGIS firmasının sunmuş olduğu örnek REST servislerinden elde edilecek.

ArcGIS firmasının sunduğu örnek servislere buradan ulaşmak mümkündür. Biz bu servislerden nüfus ile alakalı olan demografik yapı servislerini kullanacağız. Demografik yapıya ait şu anda üç farklı MapServer hizmeti açılmış durumda. Biz bunlardan Demographics/ESRI_Census_USA servisi tarafından sunulan verilerle çalışacağız. USA’de bölgeler ya da eyaletler(states) adı altında sunulan Feature Layer üzerinden bir istatistik alarak örnek bir grafik çizdirmeye çalışalım. Bu örnek istatistiğimiz “2007 yılında nüfusu 9 milyondan büyük olan bölgelerin listesi.” şeklinde olsun.

Örnek uygulamamız, sunucu üzerinde çalışan tek bir HTML dosyası da olabilir, bir ASP.NET uygulaması üzerinden de çalışabiliriz. Yapacağımız şey ArcGIS Server sunucusuna bir sorgu gönderip gelen veriyi işlemek.

Feature Layer Servisi: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5

Bu servise bir sorgu gönderdiğimizde gelen verinin JSON şekli aşağıdaki gibidir.

Bize grafik çizimi için gerekli olan kısım, kırmızı çerçeve içerisine alınmış features dizisidir. Bu dizi içerisinde her bir attribute, nüfus(POP2007) ve bölge adı(STATE_NAME) bilgileri bulunmaktadır. Bu bilgiler ışığında sorgulama ve çizim işlemlerini javascript ortamında aşağıdaki gibi gerçekleştirebiliriz.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript">

function getMap() {

   var mapserverUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5/query";
   var parameters = { f: "json", where: "POP2007 > 9000000", returnGeometry: false, outFields: "POP2007,STATE_NAME" };

   $.ajax({
          url: mapserverUrl,
          data: parameters,
          dataType: "jsonp",
          jsonpCallback: "callback",
          success: function (response) {
             createGraphics(response.features);
          }
   });
 }

function createGraphics(data) {

    var table = new google.visualization.DataTable();
    table.addColumn('string', 'STATE');
    table.addColumn('number', '2007 POP');

    for (var i = 0; i < data.length; i++)
        table.addRow([data[i].attributes.STATE_NAME, data[i].attributes.POP2007]);

    var options = { title: 'Population of 2007 in the USA, Bigger than 9 Million' };
    var chart = new google.visualization.ColumnChart(document.getElementById('cbs'));
    chart.draw(table, options);
 }

 google.load("visualization", "1", { packages: ["corechart"] });
 google.setOnLoadCallback(getMap);

</script>

Yaptığımız sorgu standart bir ajax sorgusudur. parameters olarak belirlenen veri kümesi servis URL’i için queryString verilerini barındırmaktadır. Gerisi zaten Google grafik API işlemleri Bu örnek uygulamanın çıktısı aşağıdaki şekilde olacaktır.