Kamulaştırma Bilgi Sistemi

Merhaba! Saha ekipleriniz için hızlı, güvenilir ve ücretsiz bir coğrafi bilgi sistemi (CBS) çözümü mü arıyorsunuz? İşte Kamulaştırma Bilgi Sistemi 🌟 Bu güçlü web uygulaması, saha operasyonlarınızı kolaylaştırmak, konum verilerinizi anında görselleştirmek ve profesyonel bir şekilde yönetmek için tasarlandı. Kendi sunucularınızda güvenle saklanan verilerle, tamamen özelleştirilebilir ve kullanıcı dostu bir deneyim sunuyor. 📍💻

🗺️ Harita Üzerinde Tam Kontrol: Anlık Konum Takibi ve Daha Fazlası!

Bu uygulama, Leaflet teknolojisiyle güçlendirilmiş interaktif haritalar sunar. 📍 Anlık konum takibi ile saha ekiplerinizin nerede olduğunu gerçek zamanlı olarak görebilirsiniz. Harita, cihazınızın GPS verilerini kullanarak sizi anında bulunduğunuz konuma odaklar. 🚗 ArcGIS, OpenStreetMap, Google Hybrid gibi çeşitli harita altlıkları arasında tek tıkla geçiş yaparak projenize en uygun görselleştirmeyi seçebilirsiniz. Her şey süper hızlı ve tamamen kullanıcı odaklı ! ⚡

✏️ Çizim Araçlarıyla Yaratıcılığınızı Serbest Bırakın! 🎨

Harita üzerinde dilediğiniz gibi çalışın! Nokta, çizgi, çoklu çizgi, alan, daire, dikdörtgen, metin ve not ekleme araçlarıyla coğrafi verilerinizi kolayca işaretleyin. 📌 Çizim işlemi sırasında geçici katmanlar, size rehberlik ederken, tamamlandığında verileriniz kalıcı olarak kaydedilir. Her obje için isim ve notlar ekleyebilir, projenize özel ayrıntılar oluşturabilirsiniz. Üstelik, tüm bu özellikler kendi sunucularınızda güvenle saklanır! 🔒

🛠️ Katman Yönetimi: Verilerinizi Düzenli ve Profesyonel Tutun!

Katman yöneticisi ile verilerinizi organize etmek artık çok kolay! 🗂️ Katmanlarınızı oluşturun, renk, şeffaflık, kalınlık ve çizgi tipi gibi özellikleri özelleştirin. Görünürlüğü açıp kapatarak haritanızı sadeleştirin. Her katman, saha verilerinizi profesyonelce yönetmenizi sağlar ve tamamen kullanıcı odaklı deneyim sunar! 🌈 Katmanlar arasında objeleri taşıyabilir, projenizi dilediğiniz gibi şekillendirebilirsiniz.

📝 Notlar ve Obje Yönetimi: Her Ayrıntıyı Kaydedin!

Her işaretleyiciye ve objeye özel notlar ekleyerek saha bilgilerinizi zenginleştirin. 📋 Notlarınızı tablo formatında düzenleyin, ekleyin veya silin. Objelerinizi isimlendirin ve farklı katmanlara taşıyın. Bu özellikler, saha ekiplerinizin her detayı güvenilir bir şekilde kaydetmesini sağlar. Üstelik, tüm verileriniz kendi sunucularınızda saklanarak tam güvenlik sunar! 🔐

🔍 Parsel Sorgulama ve Yol Tarifi: Saha İşlerinizi Hızlandırın!

Harita üzerinde sağ tıklayarak seçtiğiniz bir konumu anında parsel sorgulama için TKGM’ye ya da yol tarifi için Google Maps’e yönlendirin. 🛤️ Bu özellik, saha ekiplerinizin hızlıca bilgi almasını ve rota planlamasını kolaylaştırır. Her şey tek bir tıkla, süper hızlı ve güvenli! 🚀

📱 Mobil Uyumluluk: Her Yerde, Her Zaman Yanınızda!

Mobil uyumlu tasarımıyla, bu uygulama hem masaüstünde hem de mobil cihazlarda kusursuz çalışır. 📲 Dokunmatik ekran desteğiyle uzun basma hareketleri, bağlam menülerini açar ve saha ekiplerinize her an erişim sağlar. Responsive tasarım, küçük ekranlarda bile mükemmel bir deneyim sunar. 🌐

⚙️ Kullanıcı Dostu Arayüz ve Ayarlar: Sizin Kontrolünüzde!

Modern ve şık bir arayüzle tasarlanan uygulama, Tailwind CSS ve Font Awesome ikonlarıyla profesyonel bir his uyandırır. 🎨 Ayarlar panelinde, haritanın açılışta anlık konuma odaklanmasını seçebilir veya bir ID numarası kaydedebilirsiniz. Verileriniz localStorage ile güvenli bir şekilde saklanır. Bildirimler, hata mesajları ve bilgi popup’ları, kullanıcı deneyiminizi akıcı hale getirir! ✨

🌟 Neden Bu Uygulamayı Seçmelisiniz?

  • Süper Hızlı: Leaflet’in güçlü altyapısıyla anında yanıt. ⚡
  • Ücretsiz: Tüm özellikler tamamen ücretsiz! 🆓
  • Güvenilir: Verileriniz kendi sunucularınızda, tam kontrol sizde. 🔒
  • Kullanıcı Dostu: Modern tasarım, kolay kullanım. 😊
  • Profesyonel: Saha operasyonlarınızı düzenlemek için ideal çözüm. 💼

Bu yazılım, saha ekiplerinizin verimliliğini artırırken, coğrafi verilerinizi profesyonelce yönetmenizi sağlar. Hemen deneyin ve saha operasyonlarınızı bir üst seviyeye taşıyın! 🚀🌍

Genel Özet: Bu Uygulama Neler Yapar?

Bu web uygulaması, saha ekiplerinin coğrafi verilerle çalışmasını kolaylaştırmak için geliştirilmiş bir araçtır. İşte temel işlevleri:

  1. Konum Takibi ve Harita Görselleştirme:
    • Kullanıcının anlık konumunu tespit ederek haritayı bu konuma odaklayabilir.
    • Çeşitli harita altlıkları (ArcGIS, OpenStreetMap, Google Hybrid, vb.) arasında geçiş yapma imkanı sunar.
    • Harita üzerinde zoom, kaydırma ve konum odaklı navigasyon sağlar.
  2. Çizim Araçları:
    • Kullanıcılar harita üzerine nokta, çizgi, çoklu çizgi, alan, daire, dikdörtgen, metin ve not gibi öğeler ekleyebilir.
    • Çizim işlemleri sırasında geçici katmanlar (temp-layer) gösterilir ve tamamlandığında kalıcı katmana eklenir.
  3. Katman Yönetimi:
    • Kullanıcılar, harita üzerindeki objeleri organize etmek için katmanlar oluşturabilir, silebilir ve düzenleyebilir.
    • Katmanların görünürlüğünü açıp kapatabilir, renk, şeffaflık, kalınlık ve çizgi tipi gibi özelliklerini özelleştirebilir.
  4. Obje Yönetimi ve Not Ekleme:
    • Harita üzerindeki her obje (nokta, çizgi, vb.) için bir isim ve notlar eklenebilir.
    • Objeler farklı katmanlara taşınabilir ve silinebilir.
    • Notlar, bir tablo formatında düzenlenir ve her obje için ayrı ayrı kaydedilir.
  5. Parsel Sorgulama ve Yol Tarifi:
    • Harita üzerinde sağ tıklama ile bir konum seçildiğinde, o koordinat için parsel sorgulama (TKGM bağlantısı) veya yol tarifi (Google Maps) açılır.
  6. Ayarlar ve Kullanıcı Deneyimi:
    • Kullanıcı, haritanın açılışta anlık konuma odaklanmasını seçebilir.
    • Bir ID numarası kaydedilebilir ve yerel depolama (localStorage) ile saklanır.
    • Hata mesajları, bildirimler ve bilgi popup’ları ile kullanıcıya geri bildirim sağlanır.
  7. Mobil Uyumluluk:
    • Responsive tasarım sayesinde mobil cihazlarda da kullanılabilir.
    • Dokunmatik ekranlar için uzun basma (touch hold) ile bağlam menüsü açma desteği sunar.
  8. Kullanıcı Arayüzü:
    • Üstte bir başlık çubuğu, altta düğmeler (dosya yöneticisi, harita altlığı, konum, ayarlar, çıkış, çizim araçları), sağda çizim araçları paneli ve katman yöneticisi bulunur.
    • Bağlam menüsü, çizim tamamlandığında veya konum seçildiğinde ilgili işlemleri sunar.

Bu uygulama, saha ekiplerinin coğrafi verilerle çalışmasını kolaylaştırmak, harita üzerinde görselleştirme ve düzenleme yapmak, notlar eklemek ve konum bazlı sorgulamalar gerçekleştirmek için kapsamlı bir çözüm sunar.

Detaylı İnceleme: Uygulamanın Tüm Özellikleri ve Teknik Detayları

1. HTML Yapısı ve Genel Arayüz

  • Başlık Çubuğu (Header):
    • Sabit bir başlık çubuğu (#header), ERG Grup logosu ve proje adı (“AİYHT Projesi Kamulaştırma CBS”) içerir.
    • CSS ile gölgelendirme ve hizalamalar yapılarak modern bir görünüm sağlanmıştır.
    • Mobil cihazlarda logo ve yazı boyutları küçülerek responsive tasarım uygulanmıştır.
  • Harita Alanı:
    • Harita, Leaflet kütüphanesiyle oluşturulmuş ve #map div’i içinde tam ekran (100vh – header yüksekliği) olacak şekilde yerleştirilmiştir.
    • Harita, varsayılan olarak CartoDB Positron altlığına ayarlıdır ve yerel depolamadan kaydedilen konuma (lat, lng, zoom) odaklanır.
  • Alt Düğmeler (Bottom Buttons):
    • Sabit bir alt panel (#bottom-buttons), aşağıdaki işlevlere sahip düğmeler içerir:
      • Dosya Yöneticisi Aç/Kapat: KML ve şekil dosyalarını listelemek için bir yan panel açar.
      • Harita Altlığı Ayarları: Farklı harita altlıklarını seçmek için bir panel açar.
      • Anlık Konuma Git: Kullanıcının cihazından alınan GPS konumuyla haritayı merkezler.
      • Ayarlar: Otomatik odaklama ve ID numarası ayarlarını yapmak için bir panel açar.
      • Çıkış: Sisteme çıkış yapar (şu an sadece bir bildirim gösterir).
      • Çizim Araçları: Çizim araçlarını açar/kapar.
    • Her düğme, Font Awesome ikonları kullanır ve hover efektleriyle (ölçek büyütme, renk değişimi) kullanıcı deneyimi artırılmıştır.
    • Mobil cihazlarda düğme boyutları ve düzen optimize edilmiştir.
  • Yan Paneller:
    • Dosya Yöneticisi Paneli (#side-panel): KML ve diğer şekil dosyalarını listelemek için kullanılır, ancak mevcut kodda yalnızca bir yer tutucu metin içerir.
    • Ayarlar Paneli (#settings-panel): Otomatik konum odaklama ve ID numarası girişi için alan sağlar. Veriler localStorage ile saklanır.
    • Harita Altlığı Paneli (#basemap-panel): ArcGIS, OSM, Google Hybrid, CartoDB, Esri Topo ve OpenTopoMap gibi seçenekleri içerir. Her biri bir önizleme görüntüsüyle gösterilir.
    • Katman Yöneticisi (#layer-manager): Katmanların özelliklerini düzenlemek için bir tablo içerir. Görünürlük, renk, şeffaflık gibi ayarlar yapılabilir.
    • Çizim Araçları Paneli (#drawing-buttons): Nokta, çizgi, çoklu çizgi, alan, daire, dikdörtgen, metin ve not ekleme araçlarını içerir.
  • Bildirim ve Hata Mesajları:
    • Toast Bildirimleri: Yeşil (bg-green-500) veya mavi (loading-toast) renkli bildirimler, işlemleri kullanıcıya bildirir (örn. “Çıkış yapıldı!”, “Katman eklendi!”).
    • Hata Mesajları: Kırmızı (bg-red-500) renkli hata mesajları, sorunları bildirir (örn. “Konum alınamadı”).
    • Bilgi Popup’ları: Harita işlemleri sırasında bilgi mesajları gösterir (örn. çizim talimatları).
  • Bağlam Menüsü:
    • Sağ tıklama veya dokunmatik cihazlarda uzun basma ile açılır.
    • Çizim modunda “Çizimi Bitir” seçeneği, normal modda ise “Parsel Sorgulama” ve “Yol Tarifi” seçenekleri sunar.

2. Harita ve Konum Özellikleri

  • Leaflet Kütüphanesi:
    • Harita, Leaflet 1.9.4 kullanılarak oluşturulmuştur. L.map ile başlatılır ve preferCanvas: true ile performans optimize edilir.
    • Zoom kontrolleri devre dışı bırakılmış (zoomControl: false), ancak kullanıcılar fare veya dokunmatik hareketlerle zoom yapabilir.
    • Harita, yerel depolamadan kaydedilen koordinatlar (mapLat, mapLng, mapZoom) veya varsayılan olarak İstanbul koordinatlarına (41.0082, 28.9784, zoom 15) odaklanır.
  • Konum Takibi:
    • navigator.geolocation ile kullanıcının anlık konumu alınır (enableHighAccuracy: true).
    • Konum alındığında, harita 17 zoom seviyesinde merkeze alınır ve bir pulse-circle animasyonlu işaretçi 5 saniye görüntülenir.
    • Konum alınamazsa, hata mesajı gösterilir ve varsayılan konuma dönülür.
  • Harita Altlıkları:
    • Kullanıcı, aşağıdaki harita altlıkları arasında geçiş yapabilir:
      • ArcGIS World Imagery: Uydu görüntüleri.
      • OpenStreetMap: Açık kaynak sokak haritası.
      • Google Hybrid: Uydu ve sokak haritası kombinasyonu.
      • CartoDB Positron: Minimalist vektör harita.
      • Esri World Topographic: Topografik harita.
      • OpenTopoMap: Detaylı topografik harita.
    • Seçilen altlık, localStorage ile kaydedilir ve sayfa yenilendiğinde korunur.

3. Çizim Araçları

  • Çizim Modu:
    • Çizim araçları, sağ altta bir düğme (#drawing-toggle-btn) ile açılır/kapanır.
    • Aktif araç seçildiğinde, harita imleci değişir (özel SVG çapraz imleç) ve bir talimat paneli (#drawing-panel) görünür.
  • Desteklenen Çizim Türleri:
    1. Nokta: Tek tıkla bir işaretçi ekler. İşaretçi, profesyonel bir görünüm için professional-marker stili kullanır.
    2. Çizgi: İki noktayla bir doğru çizilir.
    3. Çoklu Çizgi (Polyline): Birden fazla noktayla birleştirilmiş doğrular çizilir. Sağ tıklama ile tamamlanır.
    4. Alan (Polygon): Üç veya daha fazla noktayla bir alan çizilir. Sağ tıklama ile tamamlanır.
    5. Daire: Merkez ve bir nokta ile daire çizilir, yarıçap mesafe olarak hesaplanır.
    6. Dikdörtgen: İki köşegen noktası ile dikdörtgen çizilir.
    7. Metin: Kullanıcıdan alınan metin, seçilen konuma yerleştirilir.
    8. Not: Özel bir not işaretçisi (note-marker) ekler, genellikle not eklemek için kullanılır.
  • Çizim Süreci:
    • Çizim sırasında geçici katmanlar (tempLayer) kullanılır ve noktalar kırmızı işaretçilerle (temp-marker) gösterilir.
    • Çizim tamamlandığında, obje aktif katmana (activeLayer) eklenir ve kalıcı olarak drawingLayer’a kaydedilir.
    • Her obje, bir popup ile ilişkilendirilir ve kullanıcı bu popup üzerinden isim, notlar ve katman değişiklikleri yapabilir.

4. Katman Yönetimi

  • Katman Tablosu:
    • Katmanlar, bir tablo (#layer-table) içinde listelenir. Her katman için şu özellikler düzenlenebilir:
      • Seçim: Katmanı seçmek için onay kutusu.
      • Görünürlük: fa-eye/fa-eye-slash ile açılır/kapanır.
      • Katman Adı: Metin girişiyle düzenlenir (varsayılan “SAGUL” katmanı düzenlenemez).
      • Obje Rengi: Renk seçici ile ayarlanır.
      • Arka Plan Rengi: Alanlar için dolgu rengi.
      • Obje Şeffaflığı: %0-100 arası.
      • Arka Plan Şeffaflığı: %0-100 arası.
      • Kalınlık: 1-10 piksel arası.
      • Çizgi Tipi: Düz, kesikli veya çeşitli kesik çizgi desenleri.
  • Katman İşlemleri:
    • Ekleme: Yeni bir katman varsayılan özelliklerle eklenir.
    • Silme: Seçilen katmanlar silinir (varsayılan “SAGUL” katmanı silinemez).
    • Tümünü Seç/Kaldır: Katman seçimini toplu yönetir.
    • Gösterme/Gizleme: Tüm katmanları görünür/gizli yapar.
    • Aktif Katman: Seçilen ilk katman, yeni objelerin ekleneceği katman olarak belirlenir.
  • Objelerin Katmanlara Bağlanması:
    • Objeler, katmanlara bağlıdır ve katman özellikleri (renk, şeffaflık, vb.) objelere uygulanır.
    • Katman görünürlüğü kapatıldığında, ilgili objeler haritadan kaldırılır.

5. Obje ve Not Yönetimi

  • Popup İçeriği:
    • Her obje, bir popup (custom-popup) ile ilişkilendirilir. Popup şunları içerir:
      • Obje türü (nokta, çizgi, vb.).
      • Obje adı giriş alanı.
      • Katman seçimi için açılır menü.
      • Notlar için bir tablo (ekleme, düzenleme, silme).
      • Kaydet ve Objeyi Sil düğmeleri.
  • Notlar:
    • Notlar, bir metin alanı (textarea) ile eklenir ve otomatik olarak kaydedilir (autoSaveNote).
    • Her not, bir silme düğmesiyle kaldırılabilir.
    • Notlar, objeye özel _popupData nesnesinde saklanır.
  • Obje Silme:
    • Kullanıcı, bir objeyi silmek için onay istemiyle karşılaşır.
    • Silinen obje, hem drawingLayer’dan hem de ilgili katmanın objects dizisinden kaldırılır.

6. Parsel Sorgulama ve Yol Tarifi

  • Parsel Sorgulama:
    • Sağ tıklama ile seçilen koordinatlar, Türkiye Kadastro Parsel Sorgulama (TKGM) sitesine yönlendirilir (https://parselsorgu.tkgm.gov.tr).
    • URL, seçilen lat/lng koordinatlarıyla dinamik olarak oluşturulur.
  • Yol Tarifi:
    • Google Maps’e yönlendirme linki (https://www.google.com.tr/maps/dir/) açılarak seçilen koordinatlara rota çizilir.

7. Mobil Uyumluluk ve Kullanıcı Deneyimi

  • Responsive Tasarım:
    • CSS medya sorguları (@media max-width: 640px) ile mobil cihazlar için optimize edilmiş bir arayüz sunulur.
    • Düğme boyutları küçülür, popup’lar ekran genişliğine göre ayarlanır, yazı boyutları küçültülür.
  • Dokunmatik Desteği:
    • Uzun basma (touchstart, 500ms) ile bağlam menüsü açılır.
    • touchend ve touchmove olayları, yanlışlıkla menü açılmasını önler.
  • Animasyonlar:
    • Bağlam menüsü, toast bildirimleri ve bilgi popup’ları için animasyonlar (fadeIn, slideIn) kullanılır.
    • Pulse animasyonu, anlık konum işaretçisi için görsel bir efekt sağlar.

8. Hata Yönetimi ve Geri Bildirim

  • Hata Mesajları:
    • showError fonksiyonu, kırmızı renkli hata mesajlarını 5 saniye gösterir (örn. “Harita yüklenemedi”).
  • Toast Bildirimleri:
    • Yeşil (başarılı işlem) veya mavi (yükleniyor) bildirimler, 3 saniye görünür.
  • Bilgi Popup’ları:
    • Çizim talimatları veya diğer bilgiler için kullanılır, 5 saniye sonra kaybolur.

9. Yerel Depolama Kullanımı

  • Kaydedilen Veriler:
    • Harita konumu (mapLat, mapLng, mapZoom).
    • Seçilen harita altlığı (selectedBasemap).
    • Ayarlar: Otomatik odaklama (autoFocusLocation) ve ID numarası (idNumber).
  • Veriler, localStorage ile saklanır ve sayfa yenilendiğinde geri yüklenir.

10. Teknik Detaylar ve Kütüphaneler

  • Leaflet: Harita oluşturma ve yönetimi için kullanılır.
  • toGeoJSON: KML dosyalarını GeoJSON’a çevirmek için (ancak mevcut kodda KML işleme aktif değil).
  • Tailwind CSS: Hızlı stil oluşturma için.
  • Font Awesome: İkonlar için.
  • CSS Animasyonları: Pulse, fadeIn ve slideIn efektleri için.
  • JavaScript:
    • Tüm işlevsellik, vanilla JavaScript ile yazılmıştır.
    • Olay dinleyicileri (click, contextmenu, touchstart, vb.) ile etkileşim sağlanır.
    • Dinamik DOM manipülasyonu, popup’lar ve katman tablosu için kullanılır.