Map Tiles এবং Tile Providers (OpenStreetMap, Mapbox)

LeafletJS এর বেসিক কনফিগারেশন - লিফলেটজেএস (LeafletJS) - Web Development

270

LeafletJS ম্যাপ তৈরির জন্য টাইল লেয়ার ব্যবহারের মাধ্যমে ম্যাপের বিভিন্ন অংশ প্রদর্শন করে। টাইলগুলি হল ম্যাপের ছোট ছোট ছবি বা স্ন্যাপশট যা একটি নির্দিষ্ট জুম লেভেলে ম্যাপের অংশ দেখায়। আপনি যেকোনো টাইল প্রোভাইডারের সেবা ব্যবহার করতে পারেন, যেমন OpenStreetMap, Mapbox, বা অন্য যেকোনো টাইল প্রোভাইডার।


ম্যাপ টাইলস কী?

ম্যাপ টাইলস হল ছবির টুকরো যা একটি বড় ম্যাপের অংশ হিসেবে কাজ করে। এগুলি ম্যাপের বিভিন্ন স্তরের (zoom levels) জন্য প্রি-জেনারেটেড করা হয় এবং ব্যবহারকারীর বর্তমান ভিউ বা জুম লেভেল অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়। টাইলগুলোকে সাধারণত 256x256 পিক্সেলের আকারে কাটা হয় এবং এগুলি একসাথে একটি পূর্ণ ম্যাপ তৈরি করতে সাহায্য করে।


টাইল প্রোভাইডার: OpenStreetMap এবং Mapbox

১. OpenStreetMap (OSM)

OpenStreetMap (OSM) হল একটি ওপেন সোর্স ম্যাপিং প্ল্যাটফর্ম, যা সম্পূর্ণ বিনামূল্যে ব্যবহৃত হতে পারে। এটি পৃথিবীর বিভিন্ন জায়গার ম্যাপের ডেটা প্রদান করে, যা সাধারণত জনগণের দ্বারা সমর্থিত এবং আপডেট করা হয়।

LeafletJS এ OpenStreetMap টাইল প্রোভাইডার ব্যবহারের জন্য আপনি সাধারণত এই লিংকটি ব্যবহার করবেন:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

এখানে:

  • {s} হল সাবডোমেন (যেমন a, b, c), যা টাইল প্রোভাইডারের লোড ভারীতা কমানোর জন্য ব্যবহৃত হয়।
  • {z} হল জুম লেভেল, যা ম্যাপের স্কেল নির্দেশ করে।
  • {x} এবং {y} হল টাইলের স্থানিক কোঅর্ডিনেট, যেগুলো প্রতিটি টাইলের সঠিক অবস্থান নির্দেশ করে।

২. Mapbox

Mapbox একটি জনপ্রিয় এবং শক্তিশালী ম্যাপিং সেবা যা কাস্টম টাইল তৈরি করার সুবিধা প্রদান করে। এটি উচ্চমানের ভিজুয়ালাইজেশন এবং ম্যাপ কাস্টমাইজেশনের জন্য বেশ জনপ্রিয়। Mapbox এর মাধ্যমে আপনি নিজস্ব ডিজাইন করা টাইলও ব্যবহার করতে পারেন।

Mapbox ব্যবহারের জন্য আপনাকে প্রথমে একটি API টোকেন প্রয়োজন হবে, যা আপনি Mapbox এর ওয়েবসাইট থেকে পেতে পারবেন। এরপর, LeafletJS এ Mapbox এর টাইল লেয়ার ব্যবহার করতে নিম্নলিখিত কোড ব্যবহার করা যায়:

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> contributors',
    id: 'mapbox/streets-v11',  // এটি হলো স্টাইলের আইডি
    tileSize: 512, // টাইল সাইজ
    zoomOffset: -1,
    accessToken: 'your_mapbox_access_token'  // আপনার Mapbox API টোকেন
}).addTo(map);

এখানে:

  • id হল Mapbox স্টাইলের আইডি (যেমন mapbox/streets-v11, mapbox/satellite-v9 ইত্যাদি)।
  • accessToken হল আপনার ব্যক্তিগত Mapbox API টোকেন।

টাইল প্রোভাইডারের তুলনা

বৈশিষ্ট্যOpenStreetMapMapbox
মূল্যসম্পূর্ণ বিনামূল্যে (Open Source)ফ্রি প্ল্যান আছে, তবে API ব্যবহারের উপর নির্ভরশীল
কাস্টমাইজেশনসীমিত কাস্টমাইজেশনউচ্চমানের কাস্টমাইজেশন এবং ডিজাইন
ভিজুয়ালাইজেশনসাধারণ ম্যাপ ডিজাইনউন্নত ভিজুয়ালাইজেশন এবং থিম
ব্যবহারযোগ্যতাসহজ এবং দ্রুতঅনেক বেশি কাস্টমাইজেবল, তবে API কিপিং প্রয়োজন

সারাংশ

LeafletJS এর মাধ্যমে আপনি সহজে বিভিন্ন টাইল প্রোভাইডার ব্যবহার করতে পারেন, যেমন OpenStreetMap এবং Mapbox। OpenStreetMap একটি ওপেন সোর্স প্ল্যাটফর্ম যা বিনামূল্যে ব্যবহৃত হতে পারে, তবে Mapbox উন্নত কাস্টমাইজেশন এবং ডিজাইনের জন্য ব্যবহৃত হয়। এই টাইল প্রোভাইডারগুলো ব্যবহার করে আপনি অত্যন্ত ইন্টারেকটিভ এবং কাস্টমাইজড ম্যাপ তৈরি করতে পারবেন।

Content added By
Promotion

Are you sure to start over?

Loading...