Google Maps API ব্যবহার করে আপনি Custom Drawing Tools তৈরি করতে পারেন যা ব্যবহারকারীদের মানচিত্রে কাস্টম শেপ (যেমন, পলিগন, রেকটাঙ্গেল, লাইন, মার্কার ইত্যাদি) আঁকতে সহায়তা করে। এই ফিচারটি বিশেষভাবে ব্যবহৃত হয় ম্যাপিং অ্যাপ্লিকেশন বা ওয়েবসাইটে যেখানে ব্যবহারকারীদের জন্য একটি ইন্টারেকটিভ মানচিত্রে শেপ বা ড্রয়িং তৈরি করার সুযোগ দেওয়া হয়।
এই গাইডে, আমরা দেখব কিভাবে Google Maps API এর Drawing Library ব্যবহার করে Custom Drawing Tools তৈরি করা যায়।
Custom Drawing Tools তৈরি করার জন্য পদক্ষেপ
- Google Maps API Key সংগ্রহ করা: প্রথমে, আপনার Google Maps API Key তৈরি করতে হবে এবং তারপর Google Maps JavaScript API এবং Drawing Library ইন্টিগ্রেট করতে হবে।
HTML এবং JavaScript কোড তৈরি করা: নিচে একটি উদাহরণ দেওয়া হয়েছে, যেখানে Drawing Tools ব্যবহার করে পলিগন এবং লাইন আঁকানো হয়েছে।
<!DOCTYPE html> <html> <head> <title>Custom Drawing Tools</title> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap" async defer></script> <style> /* মানচিত্রের সাইজ */ #map { height: 500px; width: 100%; } </style> </head> <body> <h3>Google Maps Custom Drawing Tools</h3> <div id="map"></div> <script> // মানচিত্র এবং ড্রয়িং টুলস ইনিশিয়ালাইজ করার ফাংশন function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: {lat: 23.8103, lng: 90.4125}, // ঢাকার অবস্থান mapTypeId: 'roadmap' }); // Drawing Manager তৈরি করা var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, // ডিফল্ট ড্রয়িং টুল পলিগন drawingControl: true, // ড্রয়িং কন্ট্রোল প্রদর্শন করা drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.RECTANGLE ] }, polygonOptions: { fillColor: '#FF0000', fillOpacity: 0.5, strokeWeight: 2, strokeColor: '#FF0000', clickable: false, editable: true, zIndex: 1 } }); // ড্রয়িং ম্যানেজারকে মানচিত্রে অ্যাড করা drawingManager.setMap(map); // ড্রয়িংয়ের পরে পলিগন, রেকটাঙ্গেল বা লাইন তৈরি হলে তাদের ডেটা লগ করা google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { var newShape = event.overlay; var shapeType = event.type; console.log('Shape drawn: ' + shapeType); if (shapeType === google.maps.drawing.OverlayType.POLYGON) { console.log('Polygon coordinates:', newShape.getPath().getArray()); } }); } </script> </body> </html>
কোডের ব্যাখ্যা
- Google Maps API এবং Drawing Library ইন্টিগ্রেট করা:
<script>ট্যাগের মাধ্যমে Google Maps API লোড করা হয়েছে এবংlibraries=drawingপ্যারামিটার ব্যবহার করে Drawing Library যোগ করা হয়েছে। এটি ড্রয়িং টুলসকে মানচিত্রে যুক্ত করতে সহায়তা করে।
- Map তৈরি করা:
google.maps.Mapফাংশন ব্যবহার করে একটি নতুন মানচিত্র তৈরি করা হয়েছে, যার সেন্টার ঢাকায় এবং জুম লেভেল ১২ রাখা হয়েছে।
- Drawing Manager:
google.maps.drawing.DrawingManagerএকটি কাস্টম ড্রয়িং টুলস ম্যানেজার তৈরি করে যা মানচিত্রে বিভিন্ন ধরনের শেপ আঁকতে সাহায্য করে। এখানেdrawingModeদিয়ে পলিগন ড্রয়িং শুরু করা হয়েছে, এবংdrawingControlOptionsএ বিভিন্ন ধরনের শেপ (মার্কার, পলিগন, পলিলাইন, রেকটাঙ্গেল) নির্বাচন করা যাবে।polygonOptionsএর মাধ্যমে পলিগনের স্টাইল কাস্টমাইজ করা হয়েছে, যেমন রঙ, স্ট্রোকের পুরুত্ব ইত্যাদি।
- Drawing Event Listener:
overlaycompleteইভেন্ট ব্যবহার করে নতুন ড্রয়িং (যেমন পলিগন, লাইন বা রেকটাঙ্গেল) আঁকার পরে তার তথ্য লগ করা হচ্ছে।getPath()ফাংশন ব্যবহার করে পলিগনের কণ্ঠনির্দেশ (coordinates) বের করা হয়েছে।
Drawing Tools এর অন্যান্য ফিচার
- Marker Drawing: ব্যবহারকারীরা মানচিত্রে একটি স্থান চিহ্নিত করতে মার্কার (Marker) আঁকতে পারেন।
- Polyline Drawing: লাইনের মাধ্যমে দুটি বা তার বেশি পয়েন্টকে যুক্ত করা হয়।
- Polygon Drawing: পলিগন একটি কয়েনসেপ্টের মতো বন্ধ রেখা তৈরি করে যা নির্দিষ্ট অঞ্চল চিহ্নিত করতে ব্যবহৃত হয়।
- Rectangle Drawing: মানচিত্রে একটি আয়তাকার অঞ্চল তৈরি করতে ব্যবহৃত হয়।
- Editable and Draggable Shapes: ড্রয়িং করা শেপ গুলি এডিটেবল (editable) এবং ড্র্যাগযোগ্য (draggable) হতে পারে, যাতে ব্যবহারকারীরা সেগুলি সহজে পরিবর্তন বা স্থানান্তর করতে পারে।
সারাংশ
Google Maps API ব্যবহার করে Custom Drawing Tools তৈরি করা খুবই সহজ এবং এটি বিশেষভাবে ইন্টারেকটিভ মানচিত্রে শেপ আঁকতে সাহায্য করে। আপনি ড্রয়িং ম্যানেজার ব্যবহার করে পলিগন, লাইন, রেকটাঙ্গেল, এবং মার্কার আঁকতে পারেন এবং এসব শেপের মধ্যে কাস্টম স্টাইল, ইডিটেবল এবং ড্র্যাগেবল ফিচার যোগ করতে পারেন। এই ফিচারটি নানা ধরনের ম্যাপিং অ্যাপ্লিকেশন যেমন জোন বা এলাকা চিহ্নিত করার জন্য ব্যবহৃত হতে পারে।
Read more
