Image Overlay কী এবং কিভাবে তৈরি করবেন?

Image Overlay হল LeafletJS এর একটি কার্যকরী বৈশিষ্ট্য, যা ম্যাপের উপর একটি ইমেজ বা গ্রাফিক্যাল ডেটা প্রদর্শন করতে ব্যবহৃত হয়। Image Overlay এর মাধ্যমে আপনি একটি ইমেজ বা ছবি ম্যাপের উপর একটি নির্দিষ্ট অঞ্চল বা পরিসরে প্রদর্শন করতে পারেন। এটি সাধারণত স্যাটেলাইট ইমেজ, স্ক্যান করা মানচিত্র বা যে কোনো রasters ডেটা সিস্টেমের জন্য ব্যবহৃত হয়।

LeafletJS এ Image Overlay তৈরি করতে L.imageOverlay() ফাংশন ব্যবহার করা হয়, যা একটি ইমেজকে ম্যাপের নির্দিষ্ট সীমানায় স্থাপন করে।

Image Overlay তৈরি করার ধাপ

১. Image Overlay এর জন্য মৌলিক সিস্টেম

L.imageOverlay() ফাংশনটি ব্যবহার করে একটি ছবি ম্যাপে যোগ করা হয়। এই ফাংশনের প্রথম আর্গুমেন্ট হলো ইমেজের ইউআরএল এবং দ্বিতীয় আর্গুমেন্ট হলো সেই ইমেজের সীমানা (bounds), যেটি দুটি কোণ দ্বারা নির্ধারিত হয় (নিচের বাম এবং উপরের ডান কোণ)।

উদাহরণ: Image Overlay তৈরি করা

var map = L.map('map').setView([51.505, -0.09], 13);

// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Image Overlay তৈরি করা
var imageUrl = 'https://www.example.com/your-image.png';
var imageBounds = [[51.49, -0.08], [51.51, -0.06]];  // সীমানা (নিচের বাম এবং উপরের ডান)

L.imageOverlay(imageUrl, imageBounds).addTo(map);

এখানে:

• L.imageOverlay(imageUrl, imageBounds) ফাংশনটি ইমেজ ইউআরএল এবং সীমানা (bounds) দিয়ে একটি ইমেজ ম্যাপে যোগ করছে।
• imageBounds দুটি কোণের মাধ্যমে নির্ধারিত একটি অঞ্চল, যেখানে ইমেজটি প্রদর্শিত হবে।

২. Image Overlay এর স্টাইল কাস্টমাইজেশন

Image Overlay এর জন্য আপনি কাস্টম স্টাইলিং যেমন অপাসিটি, রঙ, এবং ইমেজের পজিশন কাস্টমাইজ করতে পারেন।

উদাহরণ: Image Overlay এর অপাসিটি এবং অন্যান্য স্টাইল

var map = L.map('map').setView([51.505, -0.09], 13);

// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Image Overlay তৈরি করা
var imageUrl = 'https://www.example.com/your-image.png';
var imageBounds = [[51.49, -0.08], [51.51, -0.06]];  // সীমানা (নিচের বাম এবং উপরের ডান)

var overlay = L.imageOverlay(imageUrl, imageBounds, {
    opacity: 0.7,          // ইমেজের স্বচ্ছতা (0 থেকে 1)
    alt: 'Custom Image',   // ইমেজের এল্ট টেক্সট
    interactive: true      // ইন্টারঅ্যাকটিভ কন্ট্রোল
}).addTo(map);

এখানে:

• opacity: ইমেজের স্বচ্ছতা নিয়ন্ত্রণ করে।
• alt: ইমেজের এল্ট টেক্সট, যা SEO এর জন্য উপকারী।
• interactive: যদি true হয়, তবে ব্যবহারকারী ইমেজের সাথে ইন্টারঅ্যাক্ট করতে পারবে।

৩. Multiple Image Overlay (একাধিক Image Overlay তৈরি করা)

আপনি ম্যাপে একাধিক Image Overlay যোগ করতে পারেন, এবং এগুলির সীমানাও আলাদা হতে পারে।

উদাহরণ: একাধিক Image Overlay

var map = L.map('map').setView([51.505, -0.09], 13);

// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// প্রথম ইমেজ ওভারলে
var imageUrl1 = 'https://www.example.com/your-image1.png';
var imageBounds1 = [[51.49, -0.08], [51.51, -0.06]];

L.imageOverlay(imageUrl1, imageBounds1).addTo(map);

// দ্বিতীয় ইমেজ ওভারলে
var imageUrl2 = 'https://www.example.com/your-image2.png';
var imageBounds2 = [[51.50, -0.09], [51.52, -0.07]];

L.imageOverlay(imageUrl2, imageBounds2).addTo(map);

এখানে:

• দুটি আলাদা Image Overlay একসাথে ম্যাপে যোগ করা হয়েছে। তাদের সীমানা আলাদা।

৪. Image Overlay এর Bounds এবং Map Interaction

Image Overlay এর bounds (সীমানা) মানচিত্রের বিভিন্ন অংশের সাথে সম্পর্কিত থাকে। আপনি চাইলে ব্যবহারকারীর স্ক্রোলিং বা জুম ইন/আউট করার সময় ইমেজের অবস্থান পরিবর্তন করতে পারেন।

উদাহরণ: Image Overlay এর Bounds ডাইনামিকভাবে পরিবর্তন

var map = L.map('map').setView([51.505, -0.09], 13);

// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Image Overlay তৈরি করা
var imageUrl = 'https://www.example.com/your-image.png';
var imageBounds = [[51.49, -0.08], [51.51, -0.06]];  // সীমানা (নিচের বাম এবং উপরের ডান)

// Image Overlay যোগ করা
var overlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);

// Image Overlay এর Bounds পরিবর্তন করা (ডাইনামিক)
map.on('zoomend', function() {
    var zoomLevel = map.getZoom();
    var newBounds = zoomLevel > 15 ? [[51.48, -0.09], [51.52, -0.05]] : [[51.49, -0.08], [51.51, -0.06]];
    overlay.setBounds(newBounds);
});

এখানে:

• zoomend ইভেন্টে ম্যাপের জুম লেভেল অনুযায়ী ইমেজের সীমানা পরিবর্তন করা হয়েছে।

সারাংশ

Image Overlay হল LeafletJS এর একটি শক্তিশালী বৈশিষ্ট্য, যা ম্যাপের উপর ছবি, স্যাটেলাইট ইমেজ বা গ্রাফিক্যাল ডেটা প্রদর্শন করতে ব্যবহৃত হয়। L.imageOverlay() ফাংশন ব্যবহার করে আপনি ইমেজকে ম্যাপে নির্দিষ্ট সীমানায় (bounds) স্থাপন করতে পারেন এবং এর স্টাইল ও ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন। আপনি একাধিক Image Overlay যোগ করতে পারেন এবং এগুলোর opacity, alt text, এবং interactive behavior কাস্টমাইজ করতে পারেন। এটি ম্যাপের উপর আরও বেশি ভিজ্যুয়াল তথ্য এবং কার্যকরী কন্ট্রোল যোগ করতে সহায়ক।