.NET Core ile Fotoğraflardan GPS Koordinatlarını Okuma

Merhabalar;
Bu yazımda çektiğimiz fotoğraflardan nasıl GPS koordinatlarını alabiliriz bunu anlatmaya çalışacağım bunu yaparken .NET Core kullanacağız.

Fotoğraflardan GPS datalarını alabilmek için EXIF verilerini okumamız gerekmektedir. Artık çoğu dijital fotoğraf makineleri, tabletler ve akıllı telefonlarımız ile çektiğimiz fotoğraflarımız EXIF verilerini saklar ve çoğu bu bilgilerin içerisine koordinatları da yazar.

Exif verilerini okumak için .NET Core’da kullanabileceğimiz kütüphaneler vardır ben ExifLib.Standard isimli kütüphaneyi kullanacağım.

Burada yapacağımız proje dosyalarına Github adresimden ulaşabilirsiniz.

ExifLib.Standart kullanmamızın nedeni diğer kütüphanelere oranla daha hızlı çalışması, diğer kütüphaneler 4mb üzeri büyüklükte ki fotoğraflarda sorunlar ve çok aşırı yavaş çalışma sıkıntıları ortaya çıkarabiliyor.

Öncelikle Asp.NET Core projesi oluşturarak başlıyoruz,

Proje bilgilerimizi girdikten sonra hazır bir MVP projesi oluşturarak hızlıca başlayabiliriz, Web Application (Model-View-Controller) seçerek projeyi başlatıyoruz.

İlk işimiz, Nuget Manager‘da ExifLib.Standart kütüphanesini kurmak olacak, Browse alanında arayarak Install yapıyoruz.

Artık fotoğraflarımızda bulunan Exif verilerini okuyacak kütüphanemizi projemize ekledik,
Proje kökünde ExifLibExtensions isminde bir class oluşturarak devam edebiliriz, class kodlarımız aşağıdaki gibi olacak.
Haritalarda koordinatları bulabilmek için Latitude ve Longitude değerlerini dönüştürmemiz gerekiyor, bunun için
latitudeReal = latitude[0] + latitude[1] / 60 + latitude[2] / 3600 formülünü kullanıyoruz.

public static class ExifLibExtensions
    {
        public static double? GetLatitude(this ExifReader reader)
        {
            return reader.GetCoordinate(ExifTags.GPSLatitude);
        }

        public static double? GetLongitude(this ExifReader reader)
        {
            return reader.GetCoordinate(ExifTags.GPSLongitude);
        }

        private static double? GetCoordinate(this ExifReader reader, ExifTags type)
        {
            if (reader.GetTagValue(type, out double[] coordinates))
            {
                return ToDoubleCoordinates(coordinates);
            }

            return null;
        }

        private static double ToDoubleCoordinates(double[] coordinates)
        {
            return coordinates[0] + coordinates[1] / 60f + coordinates[2] / 3600f;
        }
    }

Şimdi, Models klasörümüz içerisinde PhotoCoordinatesModel isminde bir class daha oluşturuyoruz onun kodları da aşağıda

public class PhotoCoordinatesModel
    {
        public double? Lat { get; set; }
        public double? Lon { get; set; }
        public string Error { get; set; }

        public bool HasValidCoordinates()
        {
            return Lat.HasValue && Lon.HasValue;
        }
    }

Son olarak, Controllers dizinimiz altında proje ile birlikte otomatik olarak oluşan HomeController dosyamızı değiştiriyoruz;
Burada resim dosyamızda Exif verilerini okuyarak konum bilgilerimizi alıyoruz.

public IActionResult Index()
        {
            var model = new PhotoCoordinatesModel();
            try
            {
                using (var reader = new ExifReader("20190111_172310.jpg"))
                {
                    model.Lat = reader.GetLatitude();
                    model.Lon = reader.GetLongitude();
                    ViewBag.Lat = model.Lat;
                    ViewBag.Lon = model.Lon;
                }
            }
            catch (ExifLibException exifex)
            {
                model.Error = exifex.Message;
            }
            return View();
        }

Resimden gördüğümüz üzere fotoğrafımızdan koordinatları aldık, burada ki Latitude ve Longitude değerlerini aşağıdaki siteye girerek fotoğrafın çekildiği adresi harita üzerinde bulabiliriz.
https://www.latlong.net/Show-Latitude-Longitude.html

Google Map Ekleme;

Evet, artık web sayfamızda fotoğraftan aldığımız konum bilgilerini bir haritada gösterebiliriz, ben Google Maps JavaScript api kullanarak harita ekleyeceğim, bunun için Google Api hesabımızdan Maps JavaScript API‘nin etkinleştirilmiş olması gerekli, ayrıca bir api key ihtiyacımız var bunlarını nasıl alacağımızı bu makalede anlatmayacağım bir Google araması ile kolayca bulabilirsiniz.

Şimdi Controllers dizini altına GoogleMapsController isminde bir controller oluşturarak kodlarımızı yazıyoruz;

public class GoogleMapsController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }

Daha sonra projemizle birlikte otomatik olarak oluşan Index.cshtml dosyasını açarak içeriğini aşağıdaki şekilde değiştiriyoruz;

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <p>
        <title>@ViewBag.Title</title>

        <h2 style="background-color: rgb(73,171,210);color: white; text-align: center; height:50px;padding-top:10px">ASP.NET Core – Google Maps API</h2>
        <fieldset>
            <legend style="font-family: 'Segoe UI'; color: rgb(73,171,210); font-size: large;">Fotoğraf Adresim;</legend>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            <div id="googleMap" style="height:500px;width:100%;"></div>

            <script>
            
                function myMap() {
                    var myCenter = new google.maps.LatLng(@ViewBag.Lat, @ViewBag.Lon);
                    var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
                    var marker = new google.maps.Marker({ position: myCenter });
                    marker.setMap(map);
                }
            </script>
            <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
        </fieldset>
        <footer>
    <p style="background-color: rgb(73,171,210); font-weight: bold; color:white; text-align: center;height:50px; padding-top:15px">© @DateTime.Now.ToLocalTime()</p>
    </footer></p>
</div>

Burada YOUR_API_KEY yazan alana kendi Google Api keyinizi girmeniz gerekmektedir.

Şimdi projemizi çalıştırarak test edebiliriz.

Burada yaptığımız proje dosyalarına Github adresimden ulaşabilirsiniz.