LiveCharts GeoMap Kullanımı

Bu yazımızda Geo Chart olarak adlandırılan, coğrafik grafikler Live Chart kontrolü ile nasıl oluşturulur buna değinmek istiyorum. Amacım bir dünya haritası üzerinde belirli değerlere göre ülkelerin renk ölçeği halinde görüntülenmesini sağlamak.

Bir Windows Form uygulaması projesi oluşturdum. Adını GeoChart verdim.

Solution Explorer alanında projeme sağ tıklıyor ve Manage Nuget Packages diyorum.

Daha sonra orta alanda yer alan kısımda Browse sekmesine tıklıyor ve livecharts yazıyorum.

Çıkan sonuçlar içinde LiveCharts.WinForms olan paketi seçiyor ve Install ediyorum.

Yükleme başarılı bir şekilde tamamlanırsa aşağıdaki şekilde bilgilendirme mesajı geliyor zaten.

Geo Map yani coğrafi harita bir ülkenin, bir kıtanın veya spesifik bir bölgenin belirli değerler karşılığında renk ölçeği ile gösterilmesini yani derecelendirmesini sağlayan bir harita grafiğidir aslında.

Şimdi formun load olayında aşağıdaki kodları yazıyorum. Amacım burada haritada görüntülemek istediğim ülkeler için rastgele 0 ile 1000 arasında bir değer oluşturmak. Tabi bu haritaya ilişkin bilgileri almak için bir XML kullanmam gerekiyor. Ben bu örneğimde dünya haritasını kullanacağım için aşağıdaki adreste world.xml dosyasını bilgisayarıma indirdim. Sizlerde aşağıdaki adresi kullanabilirsiniz. Eğer bir ülkeye ait bölgeler için örnek yapıyor iseniz, o ülkeye ait XML dokümanını indiriniz.

İlgili adres: https://github.com/Live-Charts/Live-Maps/tree/master/Maps

Worldü seçtikten sonra açılan XMl dokümanın ham halini almak için RAW’a tılıyorum. Xml dokümanı doğrudan açılıyor. Ya da aşağıdaki link ile world.xml dokümanını tarayıcınızda görüntüleyebilirsiniz. Görüntüledikten sonra buradaki herşeyi CTRL + A ile seçip, kopyalıyorum.

Projeme dönüp, solution explorer alanında Add diyorum New Item seçiyorum. Burada solda Data seçiyorum. Orta kısımda XML File seçip, ismini World.Xml verdim. Add diyerek projeme ekliyorum.

Kopyaladığım xml verilerini bu dokümana yapıştırdım. Sonra solution explorer üzerinde World.Xml sağ tıklıyorum. Properties seçiyorum.

Burada Build Action alanını None yapıyorum. Copy to Output Directory alanını ise Copy Always yapıyorum.

Formuma herhangi bir araç sürükleme işlemi yapmıyorum, XML dokümanın adresini doğru vermiş olmam yeterli. Kodlarım aşağıdaki gibi, kod içinde de açıklamalarımı ekledim.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace GeoChart
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //Livechart üzerinden bir instance alıyor ve nesnemi oluşturuyorum adını geoMap verdim
            LiveCharts.WinForms.GeoMap geoMap = new LiveCharts.WinForms.GeoMap();
            //Rastgele değer oluşturmek için bir değişken oluşturdum.
            Random rastgele = new Random();
            //Rastgele değerlerimi Dictionary  alıyorum.
            Dictionary degerler = new Dictionary();
            degerler["TR"] = rastgele.Next(0, 1000);
            degerler["US"] = rastgele.Next(0, 1000);
            degerler["FR"] = rastgele.Next(0, 1000);
            degerler["CA"] = rastgele.Next(0, 1000);
            degerler["GB"] = rastgele.Next(0, 1000);
            degerler["RU"] = rastgele.Next(0, 1000);
            degerler["CN"] = rastgele.Next(0, 1000);
            degerler["NL"] = rastgele.Next(0, 1000);
            degerler["BG"] = rastgele.Next(0, 1000);
            geoMap.HeatMap = degerler;
            //Harita kayanğı olarak kullanacağım xml dokümanı yolunu verdim.
            geoMap.Source = $"{Application.StartupPath}\\World.xml";
            //Forma iligli kontrolü ekliyorum. verileri ile dolduruyorum.
            this.Controls.Add(geoMap);
            
            geoMap.Dock = DockStyle.Fill;

        }
    }
}

Genel Açıklama

Genel bir açıklama yaparsak öncelikle LiveChart.WinForms içinde yer alan GeoMap yani dünya haritası şeklindeki grafiği kullanabilmek için bu sınıftan bir instance alarak yeni bir nesne oluşturdum. Adını geoMap verdim. Rastgele değerler oluşturabilmek için Random sınıfından bir nesne türettim. Dictionary kullanarak eklenen elemanların key ve value olarak kaydedilmesini sağlıyorum. Örneğim de string tipinde bir KEY değeri ile ülke kodlarını tutacağım. (TR, US, CA gibi) Value ile de o ülke için oluşturulan rasgele değeri tutacağım. Sonra yukarıda görüleceği üzere Dictionary classından türettiğim ve içinde string ve double değerler içeren dizime verileri atıyorum.

geoMap nesnemin HeatMap özelliğine değerler Dictionary koleksiyonumun içeriğini attım. Harita kaynağı olarak eklediğim xml dokümanının adresini projem için belirtiyorum. Windows formuna ilgili kontrolü ekliyorum.

Yukarıdaki kodu biraz daha  kurcalarsak kodlarımı aşağıdaki şekilde değiştirdim. Önce kısa bir açıklama yapalım:

EnableZoomingAndPanning ile Mouse üzerinden zoom yapabilme imkanı sağlayabilirsiniz.

LandStrokeThickness ile ülke sınırlarının kalınlığını değiştirebilirsiniz.

Hoverable ile ülkelere ait veri değerlerini Mouse ile gezindiğinizde görebilirsiniz.

Name ile ilgili ülke adını yazdırabilirsiniz.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace GeoChart
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //Livechart üzerinden bir instance alıyorum adını geoMap verdim
            LiveCharts.WinForms.GeoMap geoMap = new LiveCharts.WinForms.GeoMap();
            //Rastgele değer oluşturmek için bir değişken oluşturdum.
            Random rastgele = new Random();
            //Rastgele değerlerimi alıyorum.
            Dictionary degerler = new Dictionary();
            degerler["TR"] = rastgele.Next(0, 1000);
            degerler["US"] = rastgele.Next(0, 1000);
            degerler["FR"] = rastgele.Next(0, 1000);
            degerler["CA"] = rastgele.Next(0, 1000);
            degerler["GB"] = rastgele.Next(0, 1000);
            degerler["RU"] = rastgele.Next(0, 1000);
            degerler["CN"] = rastgele.Next(0, 1000);
            degerler["NL"] = rastgele.Next(0, 1000);
            degerler["BG"] = rastgele.Next(0, 1000);
            degerler["JP"] = rastgele.Next(0, 1000);
            degerler["MX"] = rastgele.Next(0, 1000);
            degerler["IN"] = rastgele.Next(0, 1000);
            degerler["BR"] = rastgele.Next(0, 1000);
            degerler["DE"] = rastgele.Next(0, 1000);
            geoMap.HeatMap = degerler;
            //Harita kayanğı olarak kullanacağım xml dokümanı yolunu verdim.
            geoMap.Source = $"{Application.StartupPath}\\World.xml";
            //Forma iligli kontrolü ekliyorum. verileri ile dolduruyorum.
            this.Controls.Add(geoMap);

            geoMap.Dock = DockStyle.Fill;

            //event handler oluşturuyorum.
            geoMap.LandClick += GeoMap_LandClick;

            //Zoom yapılabilmesine izin veriyorum. Mouse ile zoom yapabilirsiniz.
            geoMap.EnableZoomingAndPanning = true;

            //ülke sınırlarını belirginleştirmek için aşağıdaki metodu kullanabilirsiniz.
            geoMap.LandStrokeThickness = 3;

            //Mouse Hover ile ülkelere ait gelen veri değerlerine okuma iznini açıyorum.
            geoMap.Hoverable = true;

        }

        private void GeoMap_LandClick(object arg1, LiveCharts.Maps.MapData arg2)
        {
            //üzerine tıklanan ülkenin adını göstermesini sağlıyorum.
            MessageBox.Show(arg2.Name);
            
        }
    }
}

Şimdilik bu kadar, bir sonraki yazıda görüşmek üzere 🙂

3 Yorumlar

  1. Hocam Merhaba
    Harita da İllerin isimlerini nasıl yazdırabılırız.
    xml de ID yerıne plaka isim yerine de il ismı verdım.
    yardımcı oalbılırmısınız
    tesekkurler

  2. Merhaba aşağıdaki adresten Türkiye için olan xml dokümanını indiriniz.
    https://github.com/Live-Charts/Live-Maps/tree/master/Maps

    Akabinde gelen Turkey.xml dosyasını projenize ekleyiniz ve refere ediniz. Daha sonra kodlarınız içinde bu sefer xml kısmında id değerini örneğin plaka olarak giriniz.

    Değerleri atadığımız alanda yazıda vermiş olduğumuz örnekteki gibi kendinize uyarlama yapabilirsiniz.

  3. Hocam cevap için çok teşekkur ederim. mousla harita üzerine geldiğimiz de il ismi cıkıyor fakat harita üzerinde yani sınırları çizilmiş alanda il ismi yazdımamız mumkun mudur?
    Ankara İstanbul İzmir gibi mousla uzerıne gelmeden de bu isimler sabit yazdıramazmıyız.
    Tesekkur ederım Saygılarımla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir