ArcGIS API for JavaScript ile Web Uygulamaları – 5 Arama Aracı

Bu yazımızda ‘ArcGIS World Geocoding Service’ servisini kullanarak adres arama ve konumdan adres bulma işlemini öğreneceğiz.

‘Search’ (arama) aracı kullanarak uygulamalarınızda dünya üzerinde adres ve yer araması yapabilirsiniz. Bu araç ‘ArcGIS World Geocoding Service’ servisini varsayılan olarak kullanarak arama (coğrafi kodlama -geocoing) gerçekleştirmektedir. Arama işlemi esnasında her karakter girişinde servis size önerileri içeren bir liste sunacaktır, böylelikle en uygun eşleşen seçilebilir. Bununla birlikte servis, girdi olarak verilecek enlem ve boylam bilgisinden ters coğrafi kodlama (reverse geocoding) yaparak adres bilgisi sunar.

Adımlar

  1. ‘ArcGIS API for JavaScript ile Web Uygulamaları – 1’ blog yazımızda kullandığımız HTML sayfasını kullanacağız.
  2. ‘require’ Dojo elementi kısmına kullanacağımız ‘Search’ aracın tanımını yapacağız.

require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search"
], function (Map, MapView, Search) {

  1. Uyglamanın ‘main’ fonksiyonunda bir ‘Search’ aracı oluşturup, kullanılacak ‘view’ tanımlaması yapıyoruz. Sonrasında görünüm içerisine aracamızı nasıl konumlandıracağımızı belirtiyoruz.

// Search aracı
var search = new Search({
view: view,
});

view.ui.add(search, "top-right");

  1. Harita üzerine basıldığında ters coğrafi kodlama yapılması için bir olay oluşturuyoruz. Bu olay sayesinde basılan konumun enlem ve boylam bilgisini ‘evt.mapPoint’ kullanarak elde ediyoruz.

  view.on("click", function (evt) {
search.clear();
view.popup.clear();
if (search.activeSource) {
var geocoder = search.activeSource.locator; // World geocode service
var params = {
location: evt.mapPoint
};
geocoder.locationToAddress(params).then(
function (response) {
// Bulunan adres bilgisini göster
var address = response.address;
showPopup(address, evt.mapPoint);
},
function (err) {
// Konumdan adres bulunamadığında
showPopup("Adres bulunamadı.", evt.mapPoint);
}
);
}
});

Arama aracının kullandığı servis kullanılarak (geocoder), ‘locationToAdress’ fonksiyonuna haritada tıklanan konum parametre olarak belirtildiğinde bir sonuç dönmesini sağlayacağız. Eğer bir cevap gelmiş ise açılır pencere içerisinde gelen bilgi görüntülenecek, hata oluştuysa ‘Adres bulunamadı’ olarak bilgi verilecektir.

HTML sayfamızdaki kodun son hali aşağıdaki gibi olmalı:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript API Örnekleri: Harita Uygulaması</title>
<style>
html, body, #haritaBlogu {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search"
], function (Map, MapView, Search) {
var map = new Map({
basemap: "topo-vector"
}); var view = new MapView({
container: "haritaBlogu",
map: map,
center: [32.8442835, 39.9323346], // boylam, enlem
zoom: 11
});

// Search aracı
var search = new Search({
view: view,
label: "Adres veya yer"
});

view.ui.add(search, "top-right");

view.on("click", function (evt) {
search.clear();
view.popup.clear();
if (search.activeSource) {
var geocoder = search.activeSource.locator; // World geocode service
var params = {
location: evt.mapPoint
};
geocoder.locationToAddress(params).then(
function (response) {
// Bulunan adres bilgisini göster
var address = response.address;
showPopup(address, evt.mapPoint);
},
function (err) {
// Konumdan adres bulunamadığında
showPopup("Adres bulunamadı.", evt.mapPoint);
}
);
}
});

function showPopup(address, pt) {
view.popup.open({
title:
+Math.round(pt.longitude * 100000) / 100000 +
"," +
Math.round(pt.latitude * 100000) / 100000,
content: address,
location: pt
});
}
});
</script>
</head>
<body>
<div id="haritaBlogu"></div>
</body>
</html>

ArcGIS JavaScript API ile yazılmış diğer örnekleri incelemek için linke tıklayınız.

Özel çözümler ve profesyonel destek için Esri Türkiye Profesyonel Hizmet birimi ile iletişim kurabilirsiniz.

Uludağ Kayak Bölgesi 3D Haritası Oluşturma

Uludağ Kayak Bölgesi 3D Haritası Oluşturma

Esri’nin ArcGIS Javascript yeteneklerinin gösteriminde yapmış olduğu örnek çalışma baz alınarak, Uludağ kayak alanının 3D haritasını oluşturmayı öğreneceğiz bu yazımızda.

Not: Orijinal harita ve blog sayfasına linklerden ulaşabilirsiniz.

1.      Çalışma alanının belirlenmesi

Uygulama yapacağınız alanınıza ait “extent” değerlerini “config.js” içerisinde belirleyin.

2.      Verilerin oluşturulması

Harita üzerinde gösterimini yapmak istediğiniz bina, teleferik hatları, ağaçlar, v.b. oluşturup ArcGIs Server servis URL’lerini “main.js” içerisinde tanımlamalarını yapın.

3.      Görselliğin belirlenmesi

“renderers.js” içerisinde verilerinizin görselleştirilmesi için gerekli olan “render” nesnelerini isteğinize göre değiştirebilirsiniz.

Bina verilerinin gösterimi, katman içerisinde bulunan ‘Type’ adındaki sütun verilerine göre farklılık göstermektedir. Örneğin restoran sembolü sadece ‘Type’ değeri ‘Restaurant’ olduğunda farklı şekilde gösterimi yapılmaktadır.

Restoran sembolü ise ‘restaurantSymbol’ adlı değişkende belirtilen değerlerdir.

4.      Animasyon desteği

Uygulamaya eklenen animasyon özelliği sayesinde 3D bir objenin sizin belirleyeceğiniz kural doğrultusunda x ve y değerleri hesaplanarak animasyon özelliği katılmış.

‘main.js’ içerisinde bulunana ‘positionAnimation’ ve ‘headingAnimation’ değişkenlerini hesaplayan fonksiyonlarında değişiklik yaparak, kendi konum hesaplama fonksiyonunuzu oluşturabilirsiniz.

5.      Efekt desteği

Bir başka hoş bir yetenekte ekranda kar yağma efektinin bulunması. Bu özellik CSS kullanılarak gerçekleştirilmektedir. ‘style.css’ içerisinde ‘snow’, ‘i-large’, ‘i-medium’ ve ‘i-small’ etiketlerine bakabilirsiniz.

Bu çalışmada kullanılan bina konum verileri OpenStreetMap üzerinden alınmıştır, bunun dışındaki verilere ait konumlar varsayımsal olarak ifade edilmektedir, gerçek değillerdir.

Web uygulaması ArcGIS for JavaScript kullanılarak oluşturulmuş, Esri’nin blog sayfasında belirtilen yönergeler izlenmiştir. Kullanılan 3D modeller “Google Poly” üzerinden edinilmiştir ve tüm hakları ilgili üretenlere aittir. Modeller 12345.

Özel çözümler ve profesyonel destek için Esri Türkiye Profesyonel Hizmet birimi ile iletişim kurabilirsiniz.

Esri Türkiye 2020

ArcGIS API for JavaScript ile Web Uygulamaları – 3

ArcGIS API for JavaScript ile Web Uygulamaları – 3

CSV Layer

Konumsal veri ve bunun bir harita üzerinde görselleştirilmesi son günlerde çok rastlanan bir konu olmaktadır. Bu yazımızda en hızlı şekilde internet üzerinde yayınlanan bir CSV dosyasını nasıl harita üzerinde gösteriminin sağlandığını anlatacağız. Veri olarak Türkiye’deki sağlık tesislerinin konumlarını kullanacağız.

İnternet üzerinde veya kendi web sunucunuzda barındırılan ‘csv’ veya ‘txt’ dosyalarında tablosal veriler, ArcGIS JavaScript API içerisindeki CSVLayer sınıfı kullanılarak bir harita katmanı oluşturulabilmektedir. CSV Layer sınıfına ait önemli birkaç özellik aşağıda belirtilmiştir:

  • delimiter : Sütun ayracı için kullanan karakter değeri. ‘,’, ‘<boşluk>’ veya ‘;’ birkaç örnek değer.
  • latitudeField : Enlem bilgilerinin bulunduğu sütun adı değeri. Eğer belirtilmez ise otomatik olarak API CSV kaynağında ‘lat’, ‘latitude’, ‘y’, ‘ycenter’, ‘latitude83’, ‘latdecdeg’, ‘POINT-Y’ sütun adlarını arar.
  • longitudeField: Boylam bilgilerinin bulunduğu sütun adı değeri. Eğer belirtilmez ise otomatik olarak API CSV kaynağında ‘lon’, ‘lng’, ‘long’, ‘longitude’, ‘x’, ‘xcenter’, ‘longitude83’, ‘longdecdeg’, ‘POINT-X’ sütun adlarını arar.

Adımlar

1. Bilgisayarınızda öncelikle bir web sunucusu bulunmalı. Bu web sunucusunda bir HTML dosyası barındırın ve herhangi bir metin editörü dosyayı açınız.

2. Önceki blog yazılarımızdan HTML şablonu kopyalayınız.

3. Uygulamamızda öncelikle CSVLayer sınıfı kullanarak bir CSV katmanı oluşturuyoruz. Oluşturma esnasında ‘url’ ve ‘popupTemplate’ değerlerini belirliyoruz.

‘url’ değeri olarak Türkiye’de hastane, klinik, eczane gibi sağlık tesislerine ait veriyi ‘data.humdata.org’ sitesinde paylaşılan CSV formatında dosyanın web adresini kullanacağız. ‘popupTemplate’ değeri, harita üzerinde veriye tıklanıldığında bilgilerin gösteriminin nasıl görselleştirileceği belirlenir.

CSV formatındaki verimizi incelediğimizde, birçok sütundan oluştuğunu görmekteyiz.

‘X’ ve ‘Y’ sütunları konum bilgilerini, ‘healthcare’ sütunu sağlık tesisinin çeşidini, ‘name’ sütunu de tesisin adını içermektedir.

Not: Dikkat edilmesi gereken konu, oluşturacağımız web sayfasını bir web sunucusunda barındırmak, parametre olarak belirttiğimiz web adresinden dosya çekmek için. Kullanacağınız web sunucunun CORS desteğini vermesi veya bir Proxy kullanmanız gerekmektedir. Detaylı bilgi için linke tıklayınız.

 

//Eğer CSV dosyası sitenizin domain'i altında değilse CORS yeteneği olan bir sunucu veya bir Proxy kullanmalısınız.
const url = "https://data.humdata.org/dataset/2e45ecbd-7940-4775-a1da-57603118390c/resource/27f8e122-c2df-49b4-97e5-23ba3d4407e5/download/turkey.csv";
//Pop-up gösterim şablonu
const template = {
    title: "Türkiye Sağlık Tesisleri",
    content: ""<b>Tesis Bilgileri</b><br><b>Tip:</b> {healthcare}<br><b>Adı:</b>{name}"
};
//Nokta tabanlı CSV dosyalarından (csv, txt) oluşturulan katman.
const csvLayer = new CSVLayer({
    url: url,
    copyright: "https://data.humdata.org/dataset/turkey-healthsites",
    popupTemplate: template
});

4. Verilerimizin semboloji olarak gösterimini nokta olarak belirleyip, çizim tipini ‘unique-value’ olarak belirledik. Çünkü verilerin gösterimini belirli bir düzen şeklinde istiyoruz; sağlık tesislerinin çeşitlerinin harita üzerinde aynı sembolojiyi kullanılmalı. Böylelikle verilerin görselliğinden de anlam çıkartılabilecek.

//Gösterim sembolojiler. Tekil değereler göre gruplanıp, 'healthcare' sütun değerlerine göre semboloji çizimi belirlenir
const myRenderer = {
    type: "unique-value",
    field: "healthcare",
    defaultSymbol: {
        type: "picture-marker",
        url: "images/other.png",
        width: "16px",
        height: "16px"
    },
    defaultLabel: "Diğerleri",
    uniqueValueInfos: [
        {
            value: "pharmacy",
            symbol: {
                type: "picture-marker",
                url: "images/pharmacy.jpg",
                width: "16px",
                height: "16px"
            },
            label: "Eczane"
        },
        {
            value: "hospital",
            symbol: {
                type: "picture-marker",
                url: "images/hospital.png",
                width: "16px",
                height: "16px"
            },
            label: "Hastane"
        },
        {
            value: "doctor",
            symbol: {
                type: "picture-marker",
                url: "images/doctor.png",
                width: "16px",
                height: "16px"
            },
            label: "Doktor"
        },
        {
            value: "dentist",
            symbol: {
                type: "picture-marker",
                url: "images/dentist.png",
                width: "16px",
                height: "16px"
            },
            label: "Diş Hekimi/Poliklinik"
        }
    ]
};
csvLayer.renderer = myRenderer;

Yukarıdaki kod parçacığına bakıldığında ‘uniqueValueInfos’ değer listesi altında ‘healthcare’ sütunu altında tekil olan değerlerin örneğin ‘pharmacy’ verilerinin gösteriminin nasıl yapılacağı tanımlanmıştır.

        {
            value: "pharmacy",             
             symbol: {       
                  type: "picture-marker",                 url: "images/pharmacy.jpg",
                 width: "16px",
                 height: "16px"
             },             
            label: "Eczane"        
         }

‘value’ etiketi tekil veriyi belirtirken ‘symbol’ değeri sembolojinin nasıl olacağını belirtmektedir. Sembolojinin tipi ‘type’ değeri ile belirlenip, ‘picture-marker’ değerini almıştır. ‘url’ değeri, gösterimde kullanılacak resmin adresini tutmaktadır. ‘width’ ve ‘height’ değerleri de gösterim boyutu bilgilerini tutmaktadır.

Semboloji hakkında daha detaylı bilgi için linke tıklayınız.

5. CSV bilgilerini katman olarak gösterimini sağlayacak harita nesnesini oluşturuyoruz.

//Harita
const map = new Map({
    basemap: "dark-gray"
});
map.add(csvLayer);
‘Map’ sınıfını oluştururken altlık değerini ‘basemap’ özelliğin içerisinde belirtiyoruz. Önceden oluşturduğumuz csv katmanı sınıfında haritamıza ‘add’ özelliğini kullanarak ekliyoruz.

6. Harita görünümünü ve lejantımızı oluşturuyoruz.

//Harita görünümü
const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [34.8442835, 38.9323346], // boylam, enlem
    zoom: 7
});
//Lejant
var legend = new Legend({
    view: view,
    layerInfos: [{
        layer: csvLayer,
        title: "Lejant"
    }]
});
view.ui.add(legend, "bottom-right");

‘MapView’ sınıfını oluştururken HTML bloğunda kullanılacak ‘div’ bloğu kimliği ‘container’ değeri olarak belirtiliyor. Gösteriminden sorumlu olduğu haritayı ‘map’ değeri ile eşleştiriyoruz. Gösterimde merkez nokta olarak koordinat bilgisini ‘center’ değeri olarak, yaklaşma oranını da ‘zoom’ değeri olarak belirtiyoruz.

HTML kodun son hali aşağıdaki gibi olmalı:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>CSVLayer Kullanımı</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: aliceblue;
        }
            #viewDiv canvas {
                filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.5));
            }
        .esri-legend {
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.14/"></script>
    <script>
        require([
            "esri/Map",
            "esri/layers/CSVLayer",
            "esri/views/MapView",
            "esri/widgets/Legend",
            "esri/core/urlUtils"
        ], function (Map, CSVLayer, MapView, Legend, urlUtils) {
            //Eğer CSV dosyası sitenizin domain'i altında değilse CORS yeteneği olan bir sunucu veya bir Proxy kullanmalısınız.
            const url =
                "https://data.humdata.org/dataset/2e45ecbd-7940-4775-a1da-57603118390c/resource/27f8e122-c2df-49b4-97e5-23ba3d4407e5/download/turkey.csv";
           
            //Pop-up gösterim şablonu
            const template = {
                title: "Türkiye Sağlık Tesisleri",
                content: "<b>Tesis Bilgileri</b><br><b>Tip:</b> {healthcare}<br><b>Adı:</b>{name}"
            };
           
            //Nokta tabanlı CSV dosyalarından (csv, txt) oluşturulan katman.
            const csvLayer = new CSVLayer({
                url: url,
                copyright: "https://data.humdata.org/dataset/turkey-healthsites",
                popupTemplate: template
            });
           
            //Gösterim sembolojiler. Tekil değereler göre gruplanıp, 'healthcare' sütun değerlerine göre semboloji belirlenir
            const myRenderer = {
                type: "unique-value",
                field: "healthcare",
                defaultSymbol: {
                    type: "picture-marker",
                    url: "images/other.png",
                    width: "16px",
                    height: "16px"
                },
                defaultLabel: "Diğerleri",
                uniqueValueInfos: [
                    {
                        value: "pharmacy",
                        symbol: {
                            type: "picture-marker",
                            url: "images/pharmacy.jpg",
                            width: "16px",
                            height: "16px"
                        },
                        label: "Eczane"
                    },
                    {
                        value: "hospital",
                        symbol: {
                            type: "picture-marker",
                            url: "images/hospital.png",
                            width: "16px",
                            height: "16px"
                        },
                        label: "Hastane"
                    },
                    {
                        value: "doctor",
                        symbol: {
                            type: "picture-marker",
                            url: "images/doctor.png",
                            width: "16px",
                            height: "16px"
                        },
                        label: "Doktor"
                    },
                    {
                        value: "dentist",
                        symbol: {
                            type: "picture-marker",
                            url: "images/dentist.png",
                            width: "16px",
                            height: "16px"
                        },
                        label: "Diş Hekimi/Poliklinik"
                    }
                ]
            };
           
            csvLayer.renderer = myRenderer;
           
            //Harita
            const map = new Map({
                basemap: "dark-gray"
            });
            map.add(csvLayer);
           
            //Harita görünümü
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [34.8442835, 38.9323346], // boylam, enlem
                zoom: 7
            });
           
            //Lejant
            var legend = new Legend({
                view: view,
                layerInfos: [{
                    layer: csvLayer,
                    title: "Lejant"
                }]
            });
           
            view.ui.add(legend, "bottom-right");
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

Harita görünümü aşağıdaki gibi görüntülenir.

Harita üzerinde bir feature tıklanıldığında aşağıda belirtilen açılı pencere açılacaktır.

Bu yazımızda CSVLayer sınıfı, açılır pencere yapılandırması, semboloji ve lejant gibi konuları işlemiş olduk.

ArcGIS JavaScript API ile yazılmış diğer örnekleri incelemek için linke tıklayınız.