17 Ocak 2018

ArcGIS Web API' ye giriş

ArcGIS Web API, ESRI fimasının Web tabanlı harita projeleri geliştirebilmemiz için geliştirmiş oldukları bir kütüphanedir. Bu yazımızda bu kütüphaneyi kullanarak ilk projemizi oluşturacağız.

İlk olarak basit html yapısını oluşturalım.

<!DOCTYPE html>
<html>
 
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
   
<title>Simple Map</title>
 
</head>
 
<body>

 
</body>
</html>

ArcGIS API ile çalışabilmemiz için gerekli link ve script dosyalarımızı <head> etiketimizin içerisine dahil edelim.

<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/">

Eklediğimiz Script etiketi kütüphanemizin fonksiyonlarını projemizde kullanabilmemizi sağlıyor. Şu an güncel versiyon 3.23' ü kullanarak geliştirme yapıyoruz. Javascript API' ye ait yeni bir versiyon yayınlandığı zaman yukarıda koyu olarak belirttiğim versiyon numarasını yeni versiyon numarası ile değiştirerek kütüphane için geliştirilen yenilikleri kullanabilirsiniz. Referansladığımız esri.css stil dosyasi ise Esri' nin widgetlarını ve bileşenlerinin stillerini içeriyor.

Şimdi <body> etiketimizin içerisine harita objemizi yansıtacağımız bir bölüm tanımlıyoruz.

<div id="map">

Bir sonraki adımımız modüllerin projeye dahil edilmesi.

Aşağıda tanımladığımız global require fonksiyonu, projemize modülleri yüklemek için kullanılır. Bu fonksiyon içerisinde ilk parametre modül yolunu, ikinci parametre ilgili tanımlamalarımızı yazmamızı sağlayacak. Modül listesine buradan ulaşabilirsiniz.

require(["esri/map", "dojo/domReady!"], function(Map) {
       

});

DOM ' un kullanılabilirliğinin kontrolü

Fonksiyondaki dojo/domReady! ifadesi yazılan kodları çalıştırmadan önce DOM'un kullanılabilirlik durumunu kontrol ediyor.

Bu kontrolümüzden sonra artık haritamızı tanımlayabiliriz.

var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
  map
= new Map("map", {
    //harita katmanının tanımlanması ("satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic")
basemap
: "topo",
//merkez koordinatı (boylam,enlem şeklinde)
    center
: [35.487246,38.722278],
//harita zoom seviyesi
    zoom
: 13
 
});
});

Öncelikle map adında bir değişken tanımlıyoruz. Global require fonksiyonumuzda dosya yolu ve DOM kontrolünü de yapıp haritamızı tanımlayacağımız Map() fonksiyonunu yazıyoruz. Map fonksiyonunun yapısı aşağıdaki gibidir.

Map(divId, options?)

Bu fonksiyonun ilk parametresi <body> etiketimizin içerisine açtığımız bölümün id sini, ikinci parametresi ise harita katmanı, harita merkez koordinatları ve harita zoom seviyesi gibi tanımlamaları içeriyor. İlgili diğer tanımlamalara buradan ulaşabilirsiniz.

Sonuç olarak Esri firmasının Javascript dilinde web uygulamaları geliştirebilmemiz için sunmuş olduğu kütüphaneyi projemize dahil ettikten sonra bir global fonksiyon ile modülleri dahil ederek web haritamızı kolay bir şekilde oluşturmuş olduk.

Şu ana kadar anlattıklarımızın uygulamasını aşağıda önizleyebilirsiniz. Umarım faydalı bir yazı olmuştur. İyi kodlamalar..