Skip to main content
Vector Tile क्या है: Modern Web Maps का format समझें
Guides

Vector Tile क्या है: Modern Web Maps का format समझें

Vector tile एक छोटी binary file होती है जिसमें एक map tile के geographic features होते हैं। जानें vector tiles कैसे काम करते हैं, क्यों इन्होंने raster tiles की जगह ली

Brent van der Heiden6 min read
#vector tile#mvt#web maps#map rendering#mapbox#openstreetmap

अगर आपने पिछले एक दशक में Google Maps, OpenStreetMap, या कोई modern web map use की है, तो आपने जो भी road और building देखी वह probably vector tile के रूप में load हुई थी। यह format modern web cartography का unsung hero है। यही web maps को fast load, किसी भी screen पर sharp दिखने, और designers को पूरी दुनिया को हर brand के लिए re-render किए बिना beautiful styled maps ship करने देता है।

यह गाइड बताती है कि vector tile क्या है, यह कैसे काम करती है, क्यों इसने अधिकतर use cases के लिए raster tiles की जगह ली, और MapAtlas इन्हें production में कैसे serve करता है।

एक Sentence में Definition

Vector tile एक छोटी binary file है जिसमें एक specific zoom level पर map के एक tile के geographic features हैं, जो pre-rendered image के बजाय data के रूप में encoded हैं।

"Data बनाम image" part ही पूरा point है। Raster tile के साथ, server ने already decide कर लिया है कि हर pixel कैसा दिखेगा। Vector tile के साथ, client underlying geometry (lines, polygons, points) और labels receive करता है, और उन्हें fly पर जो भी style user ने choose की है उसमें render करता है।

Web Maps Tiles कैसे Use करते हैं

आपने जो भी web map use की है वह दुनिया को tile grid में divide करती है। Zoom 0 पर, पूरी दुनिया एक tile में fit होती है। Zoom 1 पर 4 tiles हैं, zoom 2 पर 16, और इसी तरह। हर tile तीन numbers से identify होती है: zoom (z), column (x), और row (y)। जब आप pan या zoom करते हैं, तो map library केवल visible tiles fetch करती है, उन्हें cache करती है, और वे discard करती है जो viewport छोड़ चुके हैं।

Raster tiles के लिए, server हर (z, x, y) के लिए एक PNG pre-render करता है। यह काम करता है लेकिन limitations हैं: style render time पर fixed होती है, हर style change का मतलब पूरी दुनिया re-render करना है, और retina screens पर sharp दिखने के लिए images 1x और 2x resolution पर ship करनी होती हैं।

Vector tiles model flip करती हैं। Server geometry ship करता है। Client render करता है। एक tileset कितनी भी styles support करता है, किसी भी DPI पर crisp दिखता है, और wire पर small रहता है।

MVT Format

De facto standard format MVT है, Mapbox Vector Tile specification। MVT एक Protocol Buffers encoding है जो features को named layers में organize करती है, आमतौर पर:

  • transportation (roads, railways)
  • buildings (footprints)
  • places (named cities, towns, neighbourhoods)
  • landuse (parks, residential, commercial)
  • water (oceans, lakes, rivers)
  • boundaries (admin areas)

किसी layer में हर feature में एक geometry (point, line, polygon) और attributes का एक set होता है (name, type, importance, language variants)। Geometry coordinates tile-local coordinate space में integers हैं, 0 से 4096 तक, जो MVT को compact size देता है।

MVT fully open, vendor-neutral है, और हर major rendering engine द्वारा supported है: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, और iOS और Android Mapbox SDKs।

Vector Tiles ने Raster Tiles की जगह क्यों ली

Modern web maps लगभग universally base layer के लिए vector tiles क्यों use करते हैं, इसके पाँच कारण हैं:

Style flexibility। एक tileset से आप light theme, dark theme, print-optimised style, satellite-overlay style, और marketing के लिए brand-coloured style render कर सकते हैं। Server पर re-rendering नहीं।

किसी भी DPI पर pixel-perfect। 1x पर raster tile Retina screen पर fuzzy दिखती है। Vector tile client पर device की native resolution पर fresh render होती है।

Smaller payloads। एक complex urban tile अक्सर high-quality PNG से MVT के रूप में छोटी होती है, खासकर gzipped होने पर।

Runtime interactivity। आप hover पर specific road highlight कर सकते हैं, unused layers fade out कर सकते हैं, transitions animate कर सकते हैं, और feature clicks पर respond कर सकते हैं क्योंकि client जानता है कि हर pixel क्या represent करता है।

Smooth zooming और rotation। Vector geometry बिना aliasing के rotate और scale होता है। Raster tiles integer zoom levels के बीच zoom करने पर या off-axis rotate करने पर pixelated दिखती हैं।

Cost client CPU और GPU work है, जो पिछले एक दशक में बने किसी भी device पर non-issue है।

Runtime पर क्या Style करते हैं

एक style document (आमतौर पर Mapbox Style Spec में JSON, जिसे MapLibre ने भी adopt किया है) describe करता है कि हर layer कैसे draw होगी। Tile data छुए बिना आप क्या बदल सकते हैं इसके examples:

  • हर road class का colour
  • Road lines की width, zoom के अनुसार varying
  • कौन से place labels किस zoom पर show होते हैं
  • हर text label का font, size, और halo
  • पूरी layers की visibility (एक toggle से सभी admin boundaries off करें)
  • Pattern fills, dashed lines, gradients, blur effects

यही branded maps को possible बनाता है। एक design team Mapbox style JSON, MapLibre style JSON, या MapAtlas style preset ship कर सकती है और वही tileset उनकी brand identity में render होती है।

Caching और Performance

Vector tiles extremely well cache होती हैं क्योंकि दुनिया की geometry हर minute नहीं बदलती। CDN edge caches आमतौर पर MVT tiles को घंटों या दिनों तक hold करते हैं। Map library user के likely pan direction से पहले tiles prefetch करती है और recently viewed tiles memory में रखती है। Result यह है कि किसी city में pan करने वाले user को smooth experience मिलता है क्योंकि अगले viewport की tiles already loaded हैं।

Production tile services आमतौर पर /{z}/{x}/{y}.pbf जैसे path पर tiles expose करती हैं (PBF protobuf binary extension है)। Modern HTTP/2 या HTTP/3 connection parallel में दर्जनों tile requests multiplex करता है।

MapAtlas कहाँ Fit होता है

MapAtlas Dynamic Maps product के लिए MVT-compatible vector tiles serve करता है, EU-only hosting, predictable pricing, और downstream styling और AI annotation के लिए designed tile schema के साथ। वही data layers जो visible map drive करती हैं (places, transportation, buildings, points of interest) Geocoding और Search APIs के through structured data के रूप में भी exposed हैं, इसलिए map पर दिखने वाला feature अपने logic के लिए typed JSON record के रूप में retrieve किया जा सकता है।

Rendering layer की deeper look के लिए, Custom Map Styling guide cover करती है कि brand-aligned vector tile style end to end कैसे ship करें।

अक्सर पूछे जाने वाले प्रश्न

Vector tile क्या होता है?

Vector tile एक छोटी binary file है जिसमें किसी specific zoom level पर web map के एक tile के geographic features (roads, buildings, points of interest, labels) होते हैं। Raster tile के विपरीत जो एक pre-rendered PNG या JPG image है, vector tile underlying geometry और attributes को data के रूप में hold करती है। Browser या mobile client उस data को runtime पर pixels में render करता है, जिसका मतलब है कि एक ही tile को differently styled, rotated, और किसी भी pixel density पर बिना sharpness खोए render किया जा सकता है।

Vector tile और raster tile में क्या अंतर है?

Raster tile एक fixed PNG या JPG image है, आमतौर पर 256x256 या 512x512 pixels, server पर fixed style के साथ pre-rendered। Vector tile एक binary file है जिसमें geometry और attributes हैं, client द्वारा pixels में render किए जाते हैं। Vector tiles wire पर smaller होते हैं, runtime restyling support करते हैं, किसी भी zoom और DPI पर sharp दिखते हैं, और layers को बिना re-fetching के on और off toggle करने देते हैं।

MVT format क्या है?

MVT Mapbox Vector Tile specification है, vector tiles के लिए de facto standard format। यह Protocol Buffers (protobuf) encoding है जो geographic features को एक single tile के लिए named layers (जैसे roads, buildings, places) में organize करता है। Format open, vendor-neutral है, और हर modern map renderer (Mapbox GL, MapLibre, OpenLayers, deck.gl) द्वारा supported है। MapAtlas अपने dynamic maps endpoint के through MVT-compatible tiles serve करता है।

Vector tiles कितने छोटे होते हैं?

Zoom 14 पर एक typical urban vector tile wire पर 50 KB से 200 KB के बीच होती है, gzip के बाद अक्सर 30-100 KB तक compressed। Size area की data density पर निर्भर करती है: central Paris को cover करने वाली tile Atlantic Ocean को cover करने वाली tile से heavier होती है। अधिकतर production maps smooth panning और zooming achieve करते हैं क्योंकि tiles aggressively cache होती हैं, user के likely pan direction से पहले prefetch होती हैं, और GPU पर render होती हैं।

यह उपयोगी लगा? इसे साझा करें।

लेखक के बारे में

Brent van der Heiden

लेखक

Brent van der Heiden

Co-Founder & CEO at MapAtlas

Brent built MapAtlas out of a conviction that developers deserve location APIs with fair pricing and genuine end-user privacy. He writes about geospatial infrastructure, AI search visibility, and how location data powers the products people rely on every day.

सभी लेख देखें
ब्लॉग पर वापस जाएं