اضافة خاصية تحديد احداثيات قطعة ارض من openstreetsmaps مع صورة المشروع فوقها php JavaScript

عند قيام المستخدم ببيع قطعة أرض (من خلال نموذج البيع الموجود حالياً)، يجب إضافة حقل جديد لتحديد موقع القطعة على الخريطة، بحيث يتم: عرض خريطة OpenStreetMap داخل نموذج البيع خريطة المشروع التي تحتوي القطع فوقها تمكين المستخدم من النقر على الخريطة لتحديد موقع القطعة تخزين الإحداثيات (خط الطول والعرض) في قاعدة البيانات مع بيانات البيع لإضافة هذه الميزة بشكل احترافي ودقيق، إليك تفصيل للمهام التقنية والخطوات التي يجب على المستقل تنفيذها، مما يضمن وضوح العمل المطلوب وتفادي أي لبس: 1. تجهيز بيئة الخريطة (OpenStreetMap) المهمة ليست مجرد عرض خريطة عادية، بل دمج "خريطة المشروع" (Project Master Plan) فوق خريطة OpenStreetMap. ربط المكتبات: استخدام مكتبة مثل Leaflet.js كونها الأخف والأكثر توافقاً مع OpenStreetMap. تركيب المخطط (Overlay): تحويل ملف الـ PDF أو الصورة الخاصة بمخطط المشروع إلى طبقة (Layer) يتم إسقاطها فوق الإحداثيات الجغرافية الصحيحة على الخريطة، بحيث تظهر قطع الأراضي في مكانها الحقيقي. 2. تطوير واجهة المستخدم (Frontend) داخل نموذج البيع إضافة الحقل الجديد: إدراج حاوية (Div) للخريطة داخل نموذج البيع الحالي. أداة التحديد (Marker): تفعيل خاصية النقر (Click Event) بحيث يظهر "دبوس" أو علامة عند نقر المستخدم على قطعة الأرض المعنية. التحديث التلقائي: عند تحريك العلامة أو النقر، يتم تحديث حقول مخفية (Hidden Inputs) بقيم خط الطول (Latitude) وخط العرض (Longitude) فوراً. واسقاط مخطط المشروع بإحداثيات دقيقه