Map Viewport क्या है: Center, Zoom, और Visible Tile Window

अगर आपने कभी map library से बात करने वाला कोई code लिखा है, तो आपने viewport को touch करने वाला code लिखा है। Viewport map की runtime state है: यह कहाँ centred है, कितना zoom in है, किस दिशा में pointing है, और optionally कितना tilted है। हर pan, zoom, rotate, और click इस पर निर्भर करता है।

यह गाइड बताती है कि viewport वास्तव में क्या है, इसे describe करने वाले चार core values, यह tiles और bounding boxes से कैसे interact करता है, और viewport state save, restore, और share करने के production patterns।

चार Core Values

Modern web-map viewport को चार values तक describe किया जाता है:

• Center ({ lat, lng }): screen के middle पर geographic coordinate।
• Zoom (एक number, अक्सर float): map कितना zoom in है। Higher numbers smaller areas को ज़्यादा detail में show करते हैं।
• Bearing (degrees में एक number, default 0): map का "north up" से rotation। 90 का मतलब east ऊपर है।
• Pitch (degrees में एक number, 0 से ~85): 3D tilt। 0 flat top-down है, 60 एक strong perspective view है।

हर modern map library (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) इन्हें readable और writable state के रूप में expose करती है। Leaflet जैसी 2D-only library bearing या pitch expose नहीं कर सकती।

Zoom Levels विस्तार से

Zoom level चारों में सबसे ज़्यादा पूछा जाने वाला है। यह एक integer (या fractional) number है जो दुनिया को tile pyramid में map करता है:

• Zoom 0: एक 256x256 tile में पूरी दुनिया
• Zoom 1: 4 tiles में दुनिया
• Zoom 2: 16 tiles
• ...
• Zoom 14: ~268 million tiles, neighbourhood scale
• Zoom 18: building scale
• Zoom 22+: आमतौर पर fresh tile data के बजाय vector style upscaling से render

Equator पर एक useful rule of thumb: हर zoom level increase screen पर visible width को half करता है। Zoom 14 पर, एक screen आमतौर पर कुछ city blocks show करती है। Zoom 10 पर, एक metropolitan area। Zoom 6 पर, एक country। Effective resolution screen size और projection पर निर्भर करती है (Web Mercator north-south को poles की ओर distort करती है)।

अधिकतर production code zoom को float के रूप में store करता है (जैसे 14.5) क्योंकि smooth zooming animations integer zooms के बीच interpolate करती हैं।

Viewport बनाम Bounding Box

Viewport camera state है। Bounding box currently visible geographic rectangle है। आप हर बार bbox viewport से compute करते हैं जब server से पूछना हो "इस view के भीतर मुझे क्या show करना चाहिए?"

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 compute करें, server को send करें, returned features render करें) हर viewport-based search experience का heartbeat है: real estate, listings, store locators, fleet tracking, ride-share।

Viewport Tile Loading को कैसे Drive करता है

Viewport बदलने पर, map library figure out करती है कि current zoom level पर कौन सी tiles नए visible area को cover करती हैं, server (या in-memory cache) से missing tiles fetch करती है, और उन्हें render करती है। Already cached tiles reuse होती हैं; viewport के बाहर की tiles around रखी जाती हैं case में user back pan करे।

Smooth pan और zoom seamless feel होता है क्योंकि library यह काम asynchronously कर रही है: जो है उसे draw करती है, जो चाहिए उसे fetch करती है, और new tiles arrive होने पर canvas update करती है।

Viewport State Save और Share करना

URL में viewport store करना shareable map links का standard pattern है। अधिकतर products #map=14.5/52.5200/13.4050 जैसा URL hash use करते हैं (zoom, lat, lng)। Page load पर, hash parse करें और viewport apply करें। Viewport change पर, कुछ hundred milliseconds debounce करें और hash update करें ताकि browser back button useful रहे।

Tabs या sessions में browser-internal state के लिए, same shape के साथ localStorage key काम करती है। Server-rendered pages के लिए, viewport अक्सर SEO-friendly URLs के लिए query params में दिखता है (?zoom=14&lat=52.52&lng=13.405)।

Search और Autocomplete के लिए Viewport Bias

Geocoding APIs viewport (या इसकी bbox) को bias parameter के रूप में accept करती हैं। MapAtlas hard filter के लिए boundary.rect.* और soft bias के लिए focus.point.* expose करता है। Bias के बिना, "Springfield" के लिए autocomplete जो भी Springfield globally सबसे popular है उसे return करता है। Viewport bias के साथ, Massachusetts का map देख रहा user typing करने पर Massachusetts results पहले पाता है।

इस bias को हर keystroke पर apply करें। Cost एक parameter है और suggestions significantly ज़्यादा relevant होते हैं।

Initial Viewport: कहाँ से Start करें

हर map app को पहली चीज़ यह decide करनी होती है कि कहाँ start करें। Common patterns:

• User के locale पर default करें: Germany का user Berlin पर viewport से land करता है, France का user Paris पर।
• User के last viewport पर default करें: viewport को sessions में persist करें।
• Data पर default करें: अगर आपका map search results show करता है, तो initial render पर उन results का bbox fit करें।
• User के IP geolocation पर default करें: low precision, no permission required, good fallback।
• Browser geolocation तभी ask करें जब user explicitly opt in करे: कभी भी first load पर UI consent के बिना नहीं।

Sensible initial viewport pick करना एक छोटा detail है जिसका perceived quality पर बड़ा effect है।

MapAtlas Viewport State कैसे Expose करता है

MapAtlas Dynamic Maps component वही getCenter, getZoom, getBearing, getPitch, और setView API expose करता है जो हर developer-grade web map provide करता है, EU-only hosting और Geocoding और Search endpoints में consistent viewport bias parameters के अलावा। Viewport tiles और projections के साथ कैसे interact करता है इसकी deeper look के लिए, What Is a Vector Tile और What Is Web Mercator देखें।