Map Viewport কী? Center, Zoom এবং দৃশ্যমান Tile Window

যদি আপনি কোনো map library-র সাথে কথা বলে এমন কোনো code লিখে থাকেন, তাহলে আপনি viewport touch করে এমন code লিখেছেন। Viewport হল map-এর runtime state: এটি কোথায় centred, কতটা zoomed in, কোন দিকে pointing এবং optionally কতটা tilted। প্রতিটি pan, zoom, rotate এবং click এর উপর নির্ভর করে।

এই গাইডে viewport আসলে কী, এটি বর্ণনা করা চারটি core মান, কীভাবে এটি tile এবং bounding box-এর সাথে interact করে এবং viewport state save, restore এবং share করার production pattern ব্যাখ্যা করা হয়েছে।

চারটি Core মান

একটি আধুনিক web-map viewport চারটি পর্যন্ত মান দ্বারা বর্ণনা করা হয়:

• Center ({ lat, lng }): screen-এর মাঝখানে geographic coordinate।
• Zoom (একটি সংখ্যা, প্রায়ই float): map কতটা zoomed in। বড় সংখ্যা বেশি বিস্তারিত কম area দেখায়।
• Bearing (ডিগ্রিতে একটি সংখ্যা, default 0): "north up" থেকে map-এর rotation। ৯০ মানে east উপরে।
• Pitch (ডিগ্রিতে একটি সংখ্যা, ০ থেকে ~৮৫): 3D tilt। ০ হল flat top-down, ৬০ হল strong perspective view।

প্রতিটি আধুনিক map library (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) এগুলো readable এবং writable state হিসেবে expose করে। Leaflet-এর মতো 2D-only library bearing বা pitch expose নাও করতে পারে।

Zoom Level বিস্তারিত

চারটির মধ্যে সবচেয়ে বেশি জিজ্ঞেস করা হল zoom level। এটি একটি integer (বা fractional) সংখ্যা যা বিশ্বকে tile pyramid-এ map করে:

• Zoom 0: একটি ২৫৬x২৫৬ tile-এ পুরো বিশ্ব
• Zoom 1: বিশ্ব ৪টি tile-এ split
• Zoom 2: ১৬টি tile
• ...
• Zoom 14: ~২৬৮ মিলিয়ন tile, neighbourhood scale
• Zoom 18: building scale
• Zoom 22+: সাধারণত fresh tile data-র পরিবর্তে vector style upscaling দিয়ে render করা হয়

বিষুবরেখায় একটি useful rule of thumb: প্রতিটি zoom level increase screen-এ দৃশ্যমান width অর্ধেক করে। Zoom 14-এ একটি screen সাধারণত কয়েক city block দেখায়। Zoom 10-এ, একটি metropolitan area। Zoom 6-এ, একটি দেশ। কার্যকর resolution screen size এবং projection-এর উপর নির্ভর করে (Web Mercator মেরুর দিকে north-south বিকৃত করে)।

বেশিরভাগ production code zoom float হিসেবে সংরক্ষণ করে (যেমন 14.5) কারণ smooth zooming animation integer zoom-এর মধ্যে interpolate করে। Tile fetch library convention-এর উপর নির্ভর করে নিচে বা উপরে rounded integer level-এ হয়।

Viewport বনাম Bounding Box

Viewport হল camera state। Bounding box হল বর্তমানে দৃশ্যমান geographic rectangle। সার্ভারকে "এই view-এর ভেতরে কী দেখাব?" জিজ্ঞাসা করার প্রয়োজন হলে প্রতিবার viewport থেকে bbox গণনা করেন।

Code-এ:

const bbox = map.getBounds(); // returns { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
  bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());

এই pattern (viewport থেকে bbox গণনা, server-এ পাঠান, ফেরত আসা feature render) হল প্রতিটি viewport-based search experience-এর heartbeat: real estate, listing, store locator, fleet tracking, ride-share।

Viewport কীভাবে Tile Loading চালায়

Viewport পরিবর্তিত হলে, map library বের করে current zoom level-এ কোন tile নতুন দৃশ্যমান area cover করে, server (বা তার in-memory cache) থেকে missing tile fetch করে এবং render করে। ইতোমধ্যে cached tile পুনরায় ব্যবহার হয়; viewport-এর বাইরের tile রাখা হয় ব্যবহারকারী back pan করলে।

Smooth pan এবং zoom seamless মনে হয় কারণ library asynchronously এই কাজ করছে: যা আছে draw করে, যা দরকার fetch করে এবং নতুন tile আসলে canvas update করে। Vector tile pipeline GPU-তে geometry pixel-এ render করতে extra কাজ করে, যে কারণে আধুনিক web map যেকোনো zoom এবং rotation-এ sharp থাকে।

Viewport State Save এবং Share করা

URL-এ viewport সংরক্ষণ করা shareable map link-এর standard pattern। বেশিরভাগ product একটি URL hash যেমন #map=14.5/52.5200/13.4050 ব্যবহার করে (zoom, lat, lng)। Page load-এ hash parse করুন এবং viewport apply করুন। Viewport change-এ কয়েক শত millisecond debounce করুন এবং hash update করুন যাতে browser back button useful থাকে।

Tab বা session জুড়ে browser-internal state-এর জন্য, একই shape-এর localStorage key কাজ করে। Server-rendered page-এর জন্য, viewport প্রায়ই SEO-friendly URL-এর জন্য query param হিসেবে দেখা যায় (?zoom=14&lat=52.52&lng=13.405)।

Search এবং Autocomplete-এর জন্য Viewport Bias

Geocoding API viewport (বা এর bbox) bias parameter হিসেবে accept করে। MapAtlas hard filter-এর জন্য boundary.rect.* এবং soft bias-এর জন্য focus.point.* expose করে। Bias ছাড়া, "Springfield"-এর জন্য autocomplete সবচেয়ে globally popular Springfield ফেরত দেয়। Viewport bias সহ, Massachusetts-এর map-এর ভেতরে টাইপ করা ব্যবহারকারী Massachusetts result আগে পায়।

প্রতিটি keystroke-এ এই bias apply করুন। Cost হল একটি parameter এবং উল্লেখযোগ্যভাবে বেশি relevant suggestion।

Initial Viewport: কোথায় শুরু করবেন

প্রতিটি map app-কে প্রথমে যা decide করতে হয় তা হল কোথায় শুরু করতে হবে। সাধারণ pattern:

• ব্যবহারকারীর locale-এ default: জার্মানিতে ব্যবহারকারী Berlin-এর উপর viewport-এ land করে, ফ্রান্সে Paris-এর উপর।
• ব্যবহারকারীর শেষ viewport-এ default: session জুড়ে viewport persist করুন।
• Data-এ default: map search result দেখালে, initial render-এ সেই result-এর bbox fit করুন।
• ব্যবহারকারীর IP geolocation-এ default: low precision, কোনো permission দরকার নেই, ভালো fallback।
• ব্যবহারকারী explicitly opt in করলেই browser geolocation চাইবেন: UI consent ছাড়া first load-এ কখনো না।

একটি sensible initial viewport বেছে নেওয়া perceived quality-তে বড় প্রভাব ফেলা একটি ছোট detail।

MapAtlas কীভাবে Viewport State Expose করে

MapAtlas Dynamic Maps component প্রতিটি developer-grade web map প্রদান করে একই getCenter, getZoom, getBearing, getPitch এবং setView API expose করে, EU-only hosting এবং Geocoding এবং Search endpoint জুড়ে consistent viewport bias parameter সহ। Viewport tile এবং projection-এর সাথে কীভাবে interact করে তার গভীর বিশ্লেষণের জন্য What Is a Vector Tile এবং What Is Web Mercator দেখুন।