🗺️ Türkiye UNESCO Dünya Mirasları Haritası

Interactive Map of Türkiye's UNESCO World Heritage Sites

Türkiye'nin UNESCO Dünya Miras Listesi'ndeki kültürel varlıkları etkileşimli bir harita üzerinde tanıtan, TÜBİTAK 4006-B destekli akademik web uygulaması.

A TÜBİTAK 4006-B supported academic web application that presents Türkiye's cultural assets on the UNESCO World Heritage List via an interactive map.

Türkiye'nin UNESCO Dünya Mirası alanlarını; fotoğraf, sesli anlatım, 360° sanal tur ve topluluk yorumlarıyla tek bir interaktif haritada keşfedin.

Explore Türkiye's UNESCO World Heritage sites on one interactive map — with photos, audio narration, 360° virtual tours, and community reviews.

🎬 Projenin çalışışı: haritada gezinme → marker'a tıklama → bilgi penceresi & yorum ekleme. (Buraya kısa bir GIF/ekran kaydı eklenecek — üstteki placeholder'ı docs/demo.gif ile değiştirin.)

---

📑 İçindekiler / Table of Contents

• 🎯 Amaç / Purpose
• 🔍 Özellikler / Features
• 💻 Teknolojiler / Technologies
• 🏗️ Mimari / Architecture
• 🚀 Kurulum / Getting Started
• 🌐 Dağıtım / Deployment
• 🔌 API Uç Noktaları / API Endpoints
• 📷 Ekran Görüntüleri / Screenshots
• 🎪 Proje Sergisi / Project Exhibition
• 🤝 Katkıda Bulunma / Contributing
• 📄 Lisans / License
• 🙋 İletişim / Contact

---

🎯 Amaç / Purpose

Kullanıcıların Türkiye'nin tarihi ve kültürel mirasları hakkında bilgi edinmesini sağlamak; bu yerlerin fotoğraflarını, yazılı ve sesli açıklamalarını, galeri görsellerini ve 360° sanal gezinti bağlantılarını tek bir platformda sunmaktır.

To enable users to learn about Türkiye's historical and cultural heritage; presenting each site's photos, written and audio descriptions, gallery images, and 360° virtual tour links on a single platform.

---

🔍 Özellikler / Features

• 🗺️ Google Maps tabanlı interaktif harita — Google Maps JavaScript API ile işaretlenmiş miras alanları
• 📍 Marker bilgi pencereleri — Bir işaretçiye tıklandığında açılan detay penceresi:
  • 📸 Tanıtım fotoğrafı ve galeri
  • 📖 Yazılı açıklama
  • 🔊 Sesli anlatım (Web Speech API)
  • 🌀 360° sanal tur bağlantısı
• 🗨️ Yorum ve puanlama sistemi — Her yer için kullanıcı yorumları, yıldızlı puanlama ve ortalama puan hesaplama
• 🗃️ Kalıcı veri — Yorumlar SQL Server (MSSQL) veritabanında saklanır
• 🌐 Türkçe arayüz — Akademik sunum için tamamen Türkçeleştirilmiş içerik

Interactive Google Maps, per-marker info windows (photo, gallery, text, audio narration via Web Speech API, 360° tour), a comment & star-rating system with average scores, and persistent storage on SQL Server.

---

💻 Teknolojiler / Technologies

Katman / Layer	Teknoloji / Technology
Frontend	HTML5, CSS3, JavaScript (Vanilla)
Harita / Map	Google Maps JavaScript API
Sesli Anlatım / Narration	Web Speech API
Backend	Node.js, Express.js
Veritabanı / Database	Microsoft SQL Server (MSSQL)

---

🏗️ Mimari / Architecture

Proje iki bileşenden oluşur:

• İstemci (Frontend): Statik HTML/CSS/JS sayfaları. Harita, işaretçiler, bilgi pencereleri ve yorum arayüzü tarayıcıda çalışır.
• Sunucu (Backend): Express tabanlı REST API. Yorumların eklenmesi ve listelenmesi için MSSQL ile konuşur.

Tarayıcı (Google Maps + Web Speech API)
        │  fetch (JSON)
        ▼
Express REST API  ──►  SQL Server (Yorumlar tablosu)

Proje Yapısı / Project Structure

unesco-heritage-turkey/
├── server.js        # Express + MSSQL yorum API'si / comment API
├── web/             # İstemci (statik frontend) / static frontend
│   ├── index.html   # Giriş sayfası / landing page
│   ├── harita.html  # Etkileşimli harita / interactive map
│   ├── harita.js    # Harita, marker ve yorum mantığı / map, markers, comments
│   ├── style.css
│   ├── images/      # Miras alanı görselleri / heritage site images
│   └── *.html       # Şehir/alan detay sayfaları / site detail pages
├── docs/            # Proje notları / project notes
└── README.md

---

🚀 Kurulum / Getting Started

Not / Note: Aşağıdaki adımlar .env tabanlı yapılandırmayı ve npm betiklerini içerir. Yapılandırma ve bağımlılık altyapısı yol haritasındaki ilgili PR'larla eklenmektedir.

Ön Koşullar / Prerequisites

• Node.js >= 18
• Microsoft SQL Server (yerel veya uzak örnek)
• Bir Google Maps JavaScript API anahtarı

Adımlar / Steps

# 1) Depoyu klonlayın / Clone the repository
git clone https://github.com/EmirCobanOfficial/unesco-heritage-turkey.git
cd unesco-heritage-turkey

# 2) Bağımlılıkları kurun / Install dependencies
npm install

# 3) Ortam değişkenlerini ayarlayın / Configure environment variables
cp .env.example .env
#   → .env içindeki veritabanı bilgilerini doldurun

# 4) Sunucuyu başlatın / Start the server
npm start

Google Maps Anahtarı / Google Maps Key

web/harita.html içindeki YOUR_GOOGLE_MAPS_API_KEY placeholder'ını kendi API anahtarınızla değiştirin. Güvenlik için Google Cloud Console'da anahtara HTTP referrer kısıtlaması eklemeniz önerilir.

Replace the YOUR_GOOGLE_MAPS_API_KEY placeholder in web/harita.html with your own key. Restricting the key by HTTP referrer in Google Cloud Console is strongly recommended.

Veritabanı Şeması / Database Schema

Yorumlar için gerekli tablo / Table required for comments:

CREATE TABLE Yorumlar (
    id      INT IDENTITY(1,1) PRIMARY KEY,
    yerAdi  NVARCHAR(255)     NOT NULL,
    yorum   NVARCHAR(MAX)     NOT NULL,
    puan    INT               NOT NULL,
    tarih   DATETIME          NOT NULL
);

---

🌐 Dağıtım / Deployment

⚠️ Bu proje bir Node.js + MSSQL uygulamasıdır ve statik dosya barındıran GitHub Pages'te çalışmaz. Yorum/puanlama özelliği bir Node sunucusu ve SQL Server gerektirir.

• 🖥️ Çalışma ortamı: Uygulama, Node.js çalıştırabilen bir sunucuda barındırılmalıdır (örn. Render, Railway, Azure App Service veya bir VPS) ve erişilebilir bir SQL Server (MSSQL) veritabanına bağlanmalıdır.
• 🧩 Statik vs. dinamik: Harita, galeri, sesli anlatım ve 360° tur tarayıcıda çalışır; ancak yorum sistemi backend (server.js) olmadan çalışmaz. Bu nedenle proje tek başına statik olarak yayınlanamaz.
• 🔧 Yapılandırma: Dağıtımdan önce .env dosyasını oluşturun (cp .env.example .env) ve veritabanı bilgilerini doldurun. Ayrıca web/harita.html içindeki YOUR_GOOGLE_MAPS_API_KEY placeholder'ını geçerli bir anahtarla değiştirin.
• ▶️ Başlatma: npm install → npm start (sunucu, PORT ortam değişkenindeki portu dinler).

This is a Node.js + MSSQL application — it will not run on GitHub Pages (static-only). Deploy it to a Node-capable host (Render, Railway, Azure, or a VPS) connected to a SQL Server database. Create your .env and set a valid Google Maps API key before deploying.

---

🔌 API Uç Noktaları / API Endpoints

Metot / Method	Uç Nokta / Endpoint	Açıklama / Description
POST	/api/yorum-ekle	Bir yere yorum ve puan ekler / Adds a comment and rating to a site
GET	/api/yorumlar/:yerAdi	Bir yerin yorumlarını ve ortalama puanını döndürür / Returns a site's comments and average rating

Örnek / Example — yorum ekleme:

POST /api/yorum-ekle
Content-Type: application/json

{
  "yerAdi": "Göbekli Tepe",
  "yorum": "Muhteşem bir arkeolojik alan!",
  "puan": 5
}

---

📷 Ekran Görüntüleri / Screenshots

📍 Marker	📌 Marker'a Tıklama	✍️ Yorum Ekleme	🗨️ Yorumlar	🖼️ Galeri

---

🎪 Proje Sergisi / Project Exhibition

TÜBİTAK 4006-B Bilim Fuarı kapsamında okulumuzda gerçekleşen proje sergisinden kareler (14–15 Mayıs 2025). Moments from the project exhibition held at our school within the TÜBİTAK 4006-B Science Fair (May 14–15, 2025).

Sergiye katılan değerli konuklar / Distinguished guests at the exhibition:

• Demirci Belediye Başkanı / Mayor of Demirci: Erkan Kara
• Demirci Ticaret ve Sanayi Odası Başkanı / President of the Chamber of Commerce: Kasım Kabak
• Demirci İlçe Millî Eğitim Müdürü / District Education Director: Bilal Çetinkaya
• Demirci Ahi Evran M.T.A.L. Müdürü / School Principal: Ahmet Raşit Petekci

---

🤝 Katkıda Bulunma / Contributing

Katkılarınızı memnuniyetle karşılıyoruz! Katkı süreci şu şekilde işler:

1. Depoyu fork'layın.
2. Bir özellik dalı oluşturun (git checkout -b ozellik/harika-ozellik).
3. Değişikliklerinizi anlamlı commit mesajlarıyla kaydedin.
4. Dalınızı push'layıp bir Pull Request açın.

main dalı korumalıdır: tüm değişiklikler PR incelemesinden ve durum kontrollerinden (status checks) geçtikten sonra birleştirilir.

Contributions are welcome. Fork the repo, create a feature branch, commit with meaningful messages, and open a Pull Request. The main branch is protected — all changes are merged after PR review and passing status checks.

Detaylı yönergeler için CONTRIBUTING.md dosyasına bakın. Katılımcılardan CODE_OF_CONDUCT.md kurallarına uyması beklenir.

---

📄 Lisans / License

Bu proje MIT Lisansı ile lisanslanmıştır. Serbestçe kullanabilir, değiştirebilir ve dağıtabilirsiniz; tek koşul telif bildiriminin korunmasıdır. Ayrıntılar için LICENSE dosyasına bakın.

This project is licensed under the MIT License — free to use, modify, and distribute, provided the copyright notice is retained. See the LICENSE file for details.

---

🙋 İletişim / Contact

Emir Çoban — Demirci Ahi Evran Mesleki ve Teknik Anadolu Lisesi

Bu proje, TÜBİTAK 4006-B Bilim Fuarı kapsamında okulumuz tarafından başvurusu yapılıp kabul edilmiş; tüm yazılım geliştirme süreci bireysel olarak tarafımdan yürütülmüştür.

This project was applied for and accepted within the TÜBİTAK 4006-B Science Fair by our school; the entire software development process was carried out individually by me.

⭐ Projeyi beğendiyseniz yıldız vermeyi unutmayın! / If you like the project, please leave a star!