Google Maps API - Overlay
بسم الله الرحمن الرحيم
In the name of Allah, the Most Gracious, the Most Merciful
أثناء عملي في أحد المشاريع، طُلب مني إضافة overlay لمنطقة الباحة في المملكة العربية السعودية.
تذكرت أني قمت بتنفيذ نفس الطلب في مشروع آخر قبل حوالي 4 سنوات وتذكرت رحلة البحث الطويلة عن إحداثيات للحدود. وجدت ملف KML (تستخدم لعرض البيانات الجغرافية) يحتوي على الإحداثيات على موقع ويب يوفر ملفات KML لحدود الدول والمناطق، وحولت البيانات في الملف إلى خطوط طول وعرض lng/lat، ثم أضفتها إلى الخريطة overlay.
// const contains lat/lng coordinates
const overlayPath = [{lat:20.40994682,lng:42.11893877},{lat:20.40954332,lng:42.11729597},...];
// Create overlay from coordinates + adding style
const Overlay = new google.maps.Polygon({
paths: overlayPath,
strokeColor: "#0099dd",
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: "#0099dd",
fillOpacity: 0.3,
});
// Applying overlay to your map instance
Overlay.setMap(mapInstance);
هذه المرة، قارنت الحدود باستخدام نفس الإحداثيات القديمة مع الخريطة الفعلية لمنطقة الباحة على خرائط Google، ووجدت اختلافًا قد يكون غير ملحوظ لكنه كان يزعجني بعض الشيء! بدأت البحث مرة أخرى عن إحداثيات الحدود التي تطابق خرائط Google - لسوء الحظ ، لا توفر Google هذه الإحداثيات - حتى وجدت مستودعًا على GitHub يوفر إحداثيات حدود دقيقة لجميع المناطق والمدن والأحياء الإدارية في المملكة.
مجهود جميل وجبار يشكرون عليه.