عُنْوَنِي - خريطة العناوين التفاعلية

مشروع MVP لتطوير خريطة افتراضية تفاعلية لعنونة البيوت في سلطنة عُمان.

المميزات

• 🗺️ خريطة OpenStreetMap مجانية لمدينة مسقط مع ترقيم البيوت
• 🏘️ 6 مناطق مختلفة في مسقط: القرم، مطرح، بوشر، الروي، الخور، الغبرة
• 🏠 ترقيم صحيح لكل بيت في كل منطقة (من 1 إلى 8)
• 💧 معالم مائية تفاعلية (بحر، بحيرات، أنهار، برك، نوافير)
• 🔍 بحث محلي عن العناوين حسب رقم المنزل أو المنطقة
• 🎨 أدوات رسم متعددة (جدران، ممرات، مداخل، أكشاك، قطع أرض، ماء)
• 🏠 عارض منازل مع مخططات SVG تفاعلية
• 💾 تخزين محلي للبيانات في localStorage
• 📷 تصدير الخرائط كصور PNG
• 📱 واجهة متجاوبة تدعم جميع الأجهزة
• 🌊 إظهار/إخفاء المعالم المائية
• 🆓 لا حاجة لـ API Key - يعمل مباشرة!

التقنيات المستخدمة

• Runtime: Bun (خفيف وسريع)
• Frontend: React 18 + TypeScript
• Styling: Tailwind CSS
• Map Engine: HTML5 Canvas + Leaflet (OpenStreetMap)
• Storage: localStorage
• Export: html2canvas

التثبيت والتشغيل

المتطلبات

• Bun (أو Node.js 18+)
• متصفح حديث يدعم HTML5 Canvas
• لا حاجة لـ API Key - يعمل مباشرة!

خطوات التشغيل

1. تثبيت التبعيات:

bun install

2. تشغيل المشروع في وضع التطوير:

bun run dev

4. بناء المشروع للإنتاج:

bun run build

5. معاينة البناء:

bun run preview

هيكل المشروع

src/
├── components/
│   ├── MapCanvas/        # الخريطة الافتراضية
│   ├── GoogleMap/        # خريطة Google
│   ├── OpenStreetMap/    # خريطة OpenStreetMap المجانية
│   ├── WaterLayer/       # طبقة المعالم المائية
│   ├── ToolBar/          # شريط الأدوات
│   ├── SearchBox/        # صندوق البحث
│   ├── HouseViewer/      # عارض المنازل
│   └── ExportButton/     # زر التصدير
├── data/
│   ├── oman-houses.json    # بيانات المنازل
│   └── muscat-water.json   # بيانات المعالم المائية
├── hooks/
│   ├── useLocalStorage.ts
│   └── useGridSnap.ts
├── utils/
│   ├── exportPNG.ts
│   └── snapToGrid.ts
├── types/
│   └── index.ts
└── main.tsx

كيفية الاستخدام

البحث عن عنوان

1. اكتب رقم المنزل في صندوق البحث
2. اختر العنوان من القائمة المنسدلة
3. ستنتقل الكاميرا تلقائياً للموقع

رسم على الخريطة

1. اختر أداة من شريط الأدوات
2. ارسم على الخريطة باستخدام الماوس
3. استخدم عجلة الماوس للتكبير والتصغير

تصفح المنزل

1. بعد البحث عن عنوان، اضغط "تصفح المنزل"
2. ستظهر نافذة تحتوي على مخطط المنزل
3. يمكنك إضافة ملاحظات وحفظها

تصدير الخريطة

1. اضغط زر "حفظ صورة الخريطة"
2. ستُحفظ الصورة في مجلد التحميلات

المعالم المائية

1. استخدم زر "إظهار/إخفاء الماء" في شريط الأدوات
2. انقر على أي معلم مائي لعرض معلوماته
3. تتضمن المعالم: بحر عمان، بحيرة القرم، وادي عدي، بركة السلطان قابوس، ونافورة مسقط الكبرى

أنواع الخرائط

1. خريطة افتراضية: خريطة بسيطة قابلة للرسم
2. خريطة Google: خريطة Google الحقيقية (تتطلب API Key)
3. خريطة مجانية: خريطة OpenStreetMap مجانية بدون API

البيانات

بيانات المنازل (src/data/oman-houses.json)

• رقم المنزل
• رقم القطعة
• الإحداثيات (X, Y)
• المساحة بالمتر المربع
• عدد الغرف

بيانات المعالم المائية (src/data/muscat-water.json)

• اسم المعلم المائي
• نوع المعلم (بحر، بحيرة، نهر، بركة، نافورة)
• الإحداثيات الجغرافية
• المساحة
• الوصف

التطوير المستقبلي

• إضافة Google Maps API
• نظام تسجيل دخول
• مشاركة الخرائط عبر الروابط
• تطبيق AI لتحسين المخططات
• طباعة QR codes للعناوين

المساهمة

نرحب بالمساهمات! يرجى فتح issue أو pull request.

الترخيص

هذا المشروع مفتوح المصدر ومتاح للاستخدام العام.

---

تم تطويره بـ ❤️ لسلطنة عُمان