Maps JavaScript API-এর জন্য অতিরিক্ত সক্ষমতা প্রদানের উদ্দেশ্যে অনেক ওপেন সোর্স লাইব্রেরি উপলব্ধ রয়েছে। এই লাইব্রেরিগুলো GitHub- এ ভার্সনভুক্ত করা হয় এবং npm- এ প্রকাশিত হয়।
ওয়েব উপাদান
আপনার ওয়েবসাইটে দ্রুত ম্যাপের কার্যকারিতা যোগ করতে ম্যাপস জাভাস্ক্রিপ্ট এপিআই ওয়েব কম্পোনেন্টস ব্যবহার করুন। ওয়েব কম্পোনেন্টস বয়লারপ্লেট কোড, সেরা অনুশীলন এবং রেসপন্সিভ ডিজাইনকে এনক্যাপসুলেট করে, যা জটিল ম্যাপ ইউআই-কে কার্যত একটিমাত্র এইচটিএমএল এলিমেন্টে পরিণত করে।
গুগল ম্যাপস প্ল্যাটফর্ম এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরি হলো ওয়েব কম্পোনেন্টসমূহের একটি সেট যা ডেভেলপারদেরকে আরও ভালো মানচিত্র দ্রুত এবং কম পরিশ্রমে তৈরি করতে সাহায্য করে।
npm i @googlemaps/extended-component-library
এপিআই লোড করা হচ্ছে
আধুনিক ওয়েব অ্যাপ্লিকেশনগুলো Maps JavaScript API লোড করার জন্য নিম্নলিখিত লাইব্রেরিগুলো ব্যবহার করলে উপকৃত হতে পারে।
প্রমিসেস ব্যবহার করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই ডায়নামিকভাবে লোড করুন।
npm i @googlemaps/js-api-loader
টাইপস্ক্রিপ্ট ব্যবহার করে
TypeScript ব্যবহারকারীরা নিম্নলিখিত প্যাকেজগুলো দিয়ে কাজ শুরু করতে পারেন। অতিরিক্ত তথ্যের জন্য TypeScript ব্যবহার নির্দেশিকাটি দেখুন।
ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর জন্য টাইপস্ক্রিপ্ট টাইপসমূহ
npm i -D @types/google.maps
ইউনিয়ন টাইপকে সংকুচিত করার জন্য টাইপস্ক্রিপ্টের গার্ড রয়েছে।
npm i -D @googlemaps/typescript-guards
React ব্যবহার করে
React ব্যবহারকারীরা নিম্নলিখিত প্যাকেজগুলো দিয়ে কাজ শুরু করতে পারেন।
রিঅ্যাক্ট অ্যাপ্লিকেশনে ম্যাপস জাভাস্ক্রিপ্ট এপিআই সংহত করার জন্য কম্পোনেন্ট এবং হুক।
npm i -D @vis.gl/react-google-maps
ম্যাপস জাভাস্ক্রিপ্ট এপিআই ডিক্লারেটিভভাবে লোড করার জন্য একটি র্যাপার কম্পোনেন্ট।
npm i @googlemaps/react-wrapper
মার্কার এবং ওভারলে প্রসারিত করা
নিম্নলিখিত লাইব্রেরিগুলো Marker এবং OverlayView-এর মতো ক্লাসগুলোকে এক্সটেন্ড করে।
বিপুল সংখ্যক মার্কারের জন্য জুম-ভিত্তিক ক্লাস্টার তৈরি ও পরিচালনা করে।
npm i @googlemaps/markerclusterer
ম্যাপ ভিউপোর্টের পরিবর্তনের উপর ভিত্তি করে মার্কার যোগ ও অপসারণ করে।
npm i @googlemaps/markermanager
একটি মানচিত্রে ওপেন জিওস্পেশিয়াল কনসোর্টিয়াম (OGC)-এর লেয়ার, যেমন ওয়েব ম্যাপ সার্ভিস (WMS), যোগ করুন।
npm i @googlemaps/ogc
মার্কারগুলিতে কাস্টম এইচটিএমএল লেবেল যোগ করুন।
npm i @googlemaps/markerwithlabel
উচ্চ কর্মক্ষমতা সম্পন্ন ভিজ্যুয়ালাইজেশনের জন্য WebGL এবং ThreeJS ব্যবহার করুন।
npm i @googlemaps/three
কাস্টম গুগল ম্যাপস ওভারলে হিসেবে Deck.gl ব্যবহার করুন।
npm i @deck.gl/google-maps
পরীক্ষা এবং লিন্টিং
Maps JavaScript API-এর জন্য সর্বোত্তম অনুশীলন নিশ্চিত করতে এবং টেস্টিং সহজ করতে এই লাইব্রেরিগুলো ব্যবহার করুন।
আপনার কোড লিন্ট করতে কাস্টম ESLint নিয়ম ব্যবহার করুন।
npm i -D eslint-plugin-googlemaps
Jest টেস্টিং লাইব্রেরির সাথে ব্যবহার করার জন্য মকগুলো।
npm i -D @googlemaps/jest-mocks
নোড.জেএস লাইব্রেরি
ক্লাউড ফাংশন বা সার্ভারসাইড কোড থেকে কল করার জন্য Node.js ক্লায়েন্ট লাইব্রেরি।
npm i @googlemaps/google-maps-services-js
Node.js-এ পলিলাইন এনকোড এবং ডিকোড করুন।
npm i @googlemaps/polyline-codec
অতিরিক্ত নিরাপত্তার জন্য Node.js-এ URL সাইন করুন।
npm i @googlemaps/url-signature
