Store locator হলো সেই ছোট feature যা প্রতিটি multi-branch business-এর শেষ পর্যন্ত দরকার হয়ে পড়ে: সেই "আপনার কাছের store খুঁজুন" box যা একটি postcode-কে map-এ দোকানের ছোট, rank করা list-এ বদলে দেয়। বাইরে থেকে এটি সাধারণ মনে হয়, আর happy path সত্যিই সহজ, কিন্তু একটি ভালো locator চুপচাপ তিনটি কাজ ভালোভাবে করে: এটি এলোমেলো location input বোঝে, branch-গুলিকে আসল নৈকট্য অনুযায়ী rank করে, আর ফলাফল এমন map-এ render করে যেখানে একজন মানুষ কাজ করতে পারেন।
এই guide দেখায় store locator আসলে কীভাবে কাজ করে, maps API দিয়ে এটি বানানোর চারটি step কী, এবং কোন detail একটি demo-কে ship করার মতো জিনিস থেকে আলাদা করে। এই article-এর প্রতিটি map খোদ MapAtlas API দিয়ে render করা।
Store Locator আসলে কী করে
Styling সরিয়ে দিলে store locator তিনটি stage-এর একটি pipeline:
- Visitor-এর input geocode করুন। "1012 Amsterdam", "SW1A 1AA", বা share করা GPS position, সবাইকে একটিমাত্র latitude ও longitude হতে হবে।
- কাছের store rank করুন। সেই coordinate এবং আপনার branch location-এর list দিয়ে, যুক্তিসঙ্গত radius-এর মধ্যে সবচেয়ে কাছেরগুলি খুঁজুন।
- ফলাফল render করুন। Rank করা store-গুলি map-এ marker হিসাবে বসান, প্রতিটির সঙ্গে address, opening hours এবং directions-এর link।
নিচের map ঠিক সেই তৃতীয় stage, MapAtlas tiles দিয়ে render করা: central Amsterdam-এর ছয়টি branch, visitor থেকে distance অনুযায়ী pin করা। এখানে এগুলি supermarket, কিন্তু marker কোনো POI dataset থেকে আসুক বা আপনার নিজের store list থেকে, map একই থাকে।
রঙের ক্রমই হলো ranking। Visitor map-এর কেন্দ্র থেকে search করেছেন, আর marker-গুলি ক্রম অনুসারে সবচেয়ে কাছের branch, সবচেয়ে কাছেরটি আগে।
Step 1: Visitor-এর Input Geocode করুন
Visitor একটি postcode, শহর বা পূর্ণ address type করেন, আর আপনার একটি coordinate দরকার। সেটিই forward geocoding।
// Turn what the visitor types into a coordinate (autocomplete geocoding)
const res = await fetch(
`https://gateway.mapmetrics-atlas.net/autocomplete/` +
`?token=${API_TOKEN}&text=${encodeURIComponent(query)}` +
`&focus.point.lat=52.37&focus.point.lon=4.89` // bias toward your service area
);
const { features } = await res.json();
const [lon, lat] = features[0].geometry.coordinates; // [lon, lat]
const label = features[0].properties.label; // "Damrak, Amsterdam, North Holland, Netherlands"
এখানে দুটি detail গুরুত্বপূর্ণ। আপনার service area-এর কাছাকাছি একটি focus.point পাঠান যাতে "Cambridge" সঠিকটিতে resolve হয়, আর সেই ক্ষেত্রটি handle করুন যেখানে visitor type করার বদলে device GPS share করেন: তখন coordinate আপনার কাছে আগেই আছে এবং এই step পুরোপুরি বাদ পড়ে।
Step 2: আপনার Store-গুলি Distance অনুযায়ী Rank করুন
এখন আপনার কাছে visitor-এর coordinate আছে। Store-গুলি নিজেই আপনার data: branch-এর একটি list, প্রতিটির latitude ও longitude সহ, যা আপনার database-এ থাকে। এগুলি rank করা মানে একটি straight-line (haversine) distance হিসাব, কোনো API call লাগে না:
// Your branches, each with a lat/lon. Rank by distance from the visitor.
const ranked = stores
.map(s => ({ ...s, distance_m: haversine(lat, lon, s.lat, s.lon) }))
.sort((a, b) => a.distance_m - b.distance_m)
.slice(0, 6);
একটি basic locator-এর এটুকুই দরকার। বড় network-এর জন্য আপনি আগে visitor-এর চারপাশে একটি bounding box-এ filter করবেন যাতে প্রতিটি request-এ প্রতিটি branch-এর distance মাপতে না হয়, তারপর বাকিগুলি sort করবেন। Output হলো সবচেয়ে কাছের branch-গুলির একটি ছোট list, প্রতিটির সঙ্গে একটি distance_m।
Step 3: আগে Distance-এ Rank, তারপর Travel Time দিয়ে Refine
Straight-line distance সঠিক default। এটি দ্রুত, বাড়তি call লাগে না, আর ঘন network-এর জন্য সাধারণত সঠিকও। কিন্তু সরলরেখায় সবচেয়ে কাছের দোকানে পৌঁছানো সবসময় দ্রুততম নয়: নদীর ওপারে ৪০০ মিটার দূরের একটি store কাছের সেতু পর্যন্ত ঘুরে যেতে দশ মিনিটের পথ হয়ে যেতে পারে।
যে locator-এ "সবচেয়ে কাছে" মানে আসলে "সবচেয়ে দ্রুত পৌঁছানো যায়", সেখানে top কয়েকটি candidate একটি directions বা matrix call দিয়ে আসল travel time অনুযায়ী পুনরায় rank করুন:
// Re-rank the closest stores by real drive time (MapAtlas Matrix API)
const res = await fetch(`https://gateway.mapmetrics-atlas.net/matrix/?token=${API_TOKEN}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
sources: [{ lat, lon }],
targets: top3.map(s => ({ lat: s.lat, lon: s.lon })),
costing: 'auto', // 'auto' | 'bicycle' | 'pedestrian'
}),
});
const { sources_to_targets } = await res.json();
const row = sources_to_targets[0]; // one entry per target, each with .time (seconds)
const byTime = top3
.map((s, i) => ({ ...s, time: row[i].time }))
.sort((a, b) => a.time - b.time);
আপনি এটি শুধু হাতেগোনা কয়েকটি কাছের candidate-এর জন্য করেন, তাই এটি একটিমাত্র সস্তা call থেকে যায়, প্রতি store-এ একটি নয়।
Step 4: Store-গুলি Map-এ Render করুন
শেষ step হলো map নিজেই। প্রতিটি rank করা store-এর জন্য একটি marker বসান, address ও opening hours সহ একটি popup যোগ করুন, আর view এমনভাবে frame করুন যাতে প্রতিটি ফলাফল দেখা যায়। যে maps API একই provider থেকে tiles, geocoding ও search দেয়, তার সঙ্গে পুরো locator end to end একটি vendor আর একটি coordinate system-এ চলে, আর এই article-এর আগের map ঠিক তার উপরেই তৈরি।
প্রতিটি marker-কে এমন popup দিন যাতে visitor-এর কাজ করার জন্য দরকারি সব থাকে: নাম, address, distance, opening hours, এবং একটি "Directions" link যা coordinate-টি routing engine-এর হাতে তুলে দেয়।
যে Detail-গুলি Demo-কে Production থেকে আলাদা করে
খালি ফলাফল। কেউ এমন অঞ্চল থেকে search করেন যেখানে আপনার কোনো branch নেই। আগেই ঠিক করুন radius স্বয়ংক্রিয়ভাবে বাড়াবেন, যত দূরেই হোক সবচেয়ে কাছের একটি store দেখাবেন, নাকি সৎভাবে বলবেন "৫০ কিমি-এর মধ্যে কোনো store নেই"।
Opening hours. যে locator বন্ধ থাকা দোকানকে সবচেয়ে কাছের option হিসাবে দেখায়, তা বিরক্তিকর। Opening hours দিয়ে filter বা flag করুন যাতে "এখন খোলা" একটি first-class option হয়।
অস্পষ্ট input. "Cambridge" England-এ আছে, Massachusetts-এও আছে; "Springfield" আছে কয়েক ডজন বার। Geocode step-এ country biasing এর বেশিরভাগ সরিয়ে দেয়, আর visitor type করার সময় autocomplete দেওয়া বাকিটা সরায়।
Mobile GPS এবং consent. Mobile-এ সবচেয়ে শক্তিশালী experience হলো "আমার location ব্যবহার করুন" button, কিন্তু device GPS পড়া মানে location data এবং তার জন্য consent দরকার। আগে জিজ্ঞাসা করুন, আর visitor রাজি না হলে text input-এ fall back করুন।
Privacy. Visitor-এর location সেই মুহূর্তেই personal data হয়ে যায় যখন তা তাঁর সঙ্গে যুক্ত হয়। On demand geocode করুন, raw coordinate store করা এড়ান, আর EU-ভিত্তিক API ব্যবহার করুন যাতে location কখনও EEA ছেড়ে না যায়। পুরো ছবিটির জন্য আমাদের GDPR-compliant maps-এর guide দেখুন।
MapAtlas দিয়ে Store Locator বানানো
MapAtlas আপনাকে পুরো pipeline একটি API আর একটি coordinate system থেকে দেয়। Geocoding API country biasing সহ postcode ও শহরকে coordinate-এ বদলায়; আপনি সেই coordinate-এর বিপরীতে নিজের branch list rank করেন; Directions ও Matrix API top candidate-গুলি আসল travel time অনুযায়ী পুনরায় rank করে; আর Dynamic Maps tiles ফলাফল render করে, ঠিক যেমন এই article-এ দেখানো হয়েছে। যেহেতু সবকিছু by default EU-এর ভিতরে চলে, visitor-এর location EEA-তেই থাকে, যা বাড়তি কাজ ছাড়াই locator-কে GDPR-compliant রাখে।
প্রতিটি endpoint-এর সম্পূর্ণ request ও response format আছে MapAtlas API documentation-এ। Search API-ও দেখার মতো, যদি চান locator শুধু আপনার নিজের branch নয়, visitor-এর চারপাশের points of interest-ও খুঁজে বের করুক।
Store locator একটি ছোট feature যার ভিতরে অনেকটা নীরব বিচারবুদ্ধি লুকানো: অস্পষ্ট input বোঝা, আসল নৈকট্য অনুযায়ী rank করা, আর এই সত্যকে সম্মান করা যে location একটি personal data। এই তিনটি ঠিক করুন, তাহলে "আপনার কাছের store খুঁজুন" box আর ফেলে রাখা জিনিস থাকে না, বরং আপনার site-এর সবচেয়ে বেশি ব্যবহৃত জিনিসগুলির একটি হয়ে ওঠে।
সাধারণ জিজ্ঞাসা
Store locator কী?
Store locator হলো কোনো retail বা service website-এর সেই 'আপনার কাছের দোকান খুঁজুন' feature। Visitor একটি postcode বা শহরের নাম দেন, কিংবা নিজের location share করেন, আর locator distance অনুযায়ী rank করা সবচেয়ে কাছের branch-গুলি ফিরিয়ে দেয়, প্রতিটি map-এ pin করা, সঙ্গে address, opening hours এবং route link। ভিতরে এটি তিনটি step: input-কে geocode করে coordinate বানানো, আপনার location list-এর উপর nearby search চালানো, এবং ফলাফল map-এ render করা।
Store locator কীভাবে বানাব?
চারটি step-এ store locator বানান। প্রথমত, geocoding API দিয়ে visitor-এর input (postcode বা শহর) latitude ও longitude-এ রূপান্তর করুন। দ্বিতীয়ত, আপনার store coordinate-এর উপর একটি radius বা nearest-neighbour query চালিয়ে সবচেয়ে কাছের branch পান। তৃতীয়ত, সেই ফলাফল distance অনুযায়ী এবং প্রয়োজনে drive time অনুযায়ী sort করুন। চতুর্থত, rank করা store-গুলি popup সহ marker হিসাবে map-এ render করুন। যে maps API একই provider থেকে geocoding, nearby search এবং map tiles দেয়, তা দিয়ে চারটি step-ই আলাদা service জোড়া না লাগিয়ে করা যায়।
আমার কি store locator API দরকার?
আপনার geocoding, map tiles এবং সাধারণত travel-time ranking দরকার; store list নিজেই আপনার নিজস্ব data। আপনি চাইলে অল্প কয়েকটি দোকানের list hardcode করে straight-line distance নিজেই হিসাব করতে পারেন, কিন্তু যে মুহূর্তে আপনি postcode search, drive-time sorting এবং একটি render করা map চান, তখন একই provider থেকে geocoding, matrix ও map rendering একসাথে দেওয়া API আপনাকে তিনটি vendor জোড়া লাগানো এবং তাদের coordinate format মেলানোর ঝামেলা থেকে বাঁচায়।
Store locator কাছের store কীভাবে rank করে?
সবচেয়ে সহজ ranking হলো visitor-এর coordinate থেকে প্রতিটি store পর্যন্ত straight-line (great-circle) distance, ঊর্ধ্বক্রমে sort করা। এটি দ্রুত এবং ঘন শহুরে network-এর জন্য যথেষ্ট। আরও ভালো experience-এর জন্য top candidate-গুলি directions বা matrix API দিয়ে আসল travel time অনুযায়ী পুনরায় rank করুন, কারণ সরলরেখায় সবচেয়ে কাছের দোকানে পৌঁছানো সবসময় দ্রুততম নয়, বিশেষত যখন মাঝে নদী, highway আর one-way system থাকে।
Store locator কি GDPR compliant?
হতে পারে, আর visitor EU-তে থাকলে হতেই হবে। Store locator একটি location process করে, এবং location কোনো user-এর সঙ্গে যুক্ত হলে সেটি personal data। Compliant রাখতে visitor-এর coordinate store না করে on demand geocode করুন, EU-ভিত্তিক maps API ব্যবহার করুন যাতে location কখনও EEA ছেড়ে না যায়, এবং device GPS পড়ার আগে consent চান। MapAtlas by default location query EU-এর ভিতরেই process করে।
