# আপনার সাইটে মোবিলিটি মানচিত্র কীভাবে সংযুক্ত করবেন?

> আপনার সাইটে রুটের একটি মানচিত্র সংযুক্ত করুন: প্রতিক্রিয়াশীল iframe, সাইকেল, টয়লেট, বাস ও ট্রাম ফিল্টার, শহর অনুসন্ধান এবং প্যারামিটার প্রেরণ।

Source: https://www.roote.ai/bn/guides/mobility-map-integration/
Language: bn
Author: ROOTE

আপনার সাইটে সম্পূর্ণ ইন্টারফেস তৈরি না করেই একটি মোবিলিটি মানচিত্র সংযুক্ত করতে রুটের iframe ব্যবহার করুন। এই এমবেড পৃষ্ঠা অনুযায়ী শহর অনুসন্ধান ও ফিল্টার গ্রহণ করতে পারে: সাইকেল একটি সাইকেল গাইডের জন্য, টয়লেট একটি টয়লেট গাইডের জন্য, বাস ও ট্রাম পরিবহনের জন্য।

এই গাইডের উদাহরণগুলো embed.roote.ai ব্যবহার করে, যা রুটের গাইডে অন্তর্ভুক্ত ডোমেইন। সাধারণ ডকুমেন্টেশন map.roote.ai এর সংযুক্তির বর্ণনা দেয় এবং ক্যামেরার প্যারামিটার ও সম্পূর্ণ অনুসন্ধানের প্যারামিটার আলাদা করে।

## একটি প্রতিক্রিয়াশীল iframe যোগ করা

এই ব্লকটি বোরদোতে সাইকেল অনুসন্ধান খোলে, জুম ১৫ সহ। URL কোডে তৈরি হয়েছে; iframe এর শিরোনাম স্ক্রীন রিডার ব্যবহারকারীদের জন্য এর বিষয়বস্তু ব্যাখ্যা করে। আপনার পৃষ্ঠার ভাষার সাথে এই শিরোনামটি সামঞ্জস্য করুন।

```
<iframe
  title="Carte ROOTE — vélos à Bordeaux"
  src="https://embed.roote.ai/?q=Bordeaux&amp;modes=bicycle&amp;zoom=15"
  width="100%"
  height="480"
  loading="lazy"
  allow="geolocation"
  style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>
```

একটি HTML অ্যাট্রিবিউটে, & বিভাজক &amp; লেখে। ১০০% প্রস্থ ধারকের প্রস্থ অনুসরণ করে। মোবাইলের জন্য ব্যবহারযোগ্য উচ্চতা রাখুন এবং অপরিহার্য নিয়ন্ত্রণগুলি দৃশ্যমান এলাকার বাইরে রাখার পরিহার করুন।

## পৃষ্ঠার সাথে সঙ্গতিপূর্ণ মোড নির্বাচন

| প্রয়োজন | এমবেড প্যারামিটার |
| --- | --- |
| সাইকেল | modes=bicycle |
| টয়লেট | modes=toilets |
| বাস | modes=bus |
| ট্রাম | modes=tram |
| বাস ও ট্রাম | modes=bus,tram |
| সাইকেল ও টয়লেট | modes=bicycle,toilets |

এই মানগুলি রুটের এমবেড রুট যাত্রাপথ মোবিলিটি, সার্ভিস এবং ট্রানজিট পরিবারের সাথে সংযুক্ত। এগুলি REST প্যারামিটার প্রতিস্থাপন করে না: সার্ভিসে types ব্যবহার হয়, আর ট্রানজিটে modes। একটি শহর কেন্দ্রীক মানচিত্র নিশ্চিত করে না যে প্রতিটি পরিবারে ফলাফল থাকবে।

## ক্যামেরা ও অনুসন্ধানের উৎস আলাদা করা

lat এবং lon ক্যামেরা অবস্থান নির্ধারণ করে। এগুলো ম্যাপের ডকুমেন্টেড চুক্তিতে নিকটবর্তী অনুসন্ধান তৈরির জন্য যথেষ্ট নয়। পূর্বে জানা অনুসন্ধান পুনরুদ্ধার করতে search_lat, search_lon এবং search_label ব্যবহার করুন, মোড ও জুম সহ।

```
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram
```

উপরোক্ত স্থানাঙ্কগুলি বোরদোর একটি রেফারেন্স পয়েন্ট, ব্যবহারকারীর অবস্থান নয়। আপনি ক্যামেরার প্যারামিটার যোগ করলে, দূরত্বের জন্য ব্যবহৃত পয়েন্ট অক্ষুণ্ণ রেখে অন্য জোন দেখাতে পারেন। এটি শুধু তখনই করুন যদি এই পৃথককরন প্রয়োজন হয়।

[রুট মানচিত্র প্যারামিটার ডকুমেন্টেশন](https://doc.roote.ai/map)

## বিশেষ অক্ষর হারানো ছাড়াই URL তৈরি

URL ও URLSearchParams ব্যবহার করুন, ম্যানুয়াল সংযুক্তির চেয়ে। এটি স্পেস, উচ্চারণ চিহ্ন ও বিভাজক এনকোড করে। এই কোডটি ব্রাউজারের জন্য এবং একটি স্থান থেকে iframe ঠিকানা তৈরি করে।

```
const embedUrl = new URL('https://embed.roote.ai/');
embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux');
embedUrl.searchParams.set('modes', 'bicycle,toilets');
embedUrl.searchParams.set('zoom', '15');
document.querySelector('iframe').src = embedUrl.toString();
```

## সম্পূর্ণ মানচিত্রের প্রতি প্রসঙ্গ সংরক্ষণ

map.roote.ai এর একটি লিঙ্ক বর্তমান অনুসন্ধানের অবস্থা পুনরুদ্ধার করা উচিত, যদি জানা থাকে। প্যারামিটার ছাড়া URL পুনর্নির্মাণ শহর, মোড বা জুম হারাবে। পৃষ্ঠার আপডেট চলাকালে একটি সাধারণ URL অবজেক্ট রাখুন।

```
const fullMapUrl = new URL('https://map.roote.ai/');
fullMapUrl.search = embedUrl.search;
const link = document.querySelector('[data-open-map]');
link.href = fullMapUrl.toString();
link.target = '_blank';
link.rel = 'noopener noreferrer';
```

এই কোড প্যারামিটারগুলি সংরক্ষণ করে যা প্যারেন্ট পৃষ্ঠা জানে। যদি ব্যবহারকারী iframe এর মধ্যে অনুসন্ধান পরিবর্তন করে, প্যারেন্ট সরাসরি অন্য ডোমেইনে তার URL পড়তে পারে না। এই অবস্থা পুনরুদ্ধার করার জন্য একটি স্পষ্টভাবে বাস্তবায়িত ও ডকুমেন্টেড postMessage মেকানিজম দরকার। এমবেড দ্বারা প্রদান না করা ইভেন্ট নাম তৈরি করবেন না।

## অবস্থান ও মোবাইল ইন্টারঅ্যাকশন নিয়ন্ত্রণ

allow="geolocation" iframe কে অবস্থান চাইতে দেয়, সাইটের সম্মতি ও অনুমতি নীতির অধীন। প্রত্যাখ্যান করলে শহর অনুসন্ধান ব্যবহারের উপযোগী থাকতে হবে। পাঠক নিজে যখন নির্বাচন না করে তখন অবিলম্বে অবস্থান চান না।

একটি নিবন্ধে মানচিত্র সচেতনভাবে সক্রিয় করা জেসচার পড়ার সময় স্ক্রোল বা জুম নেওয়া এড়াতে পারে। কন্ট্রোল কীবোর্ডের জন্য অ্যাক্সেসযোগ্য ও স্পষ্ট নামকৃত থাকা উচিত। কেবল ডেস্কটপ নয়, ওরিয়েন্টেশন পরিবর্তন ও সংকীর্ণ স্ক্রীন পরীক্ষাও করুন।

## ফলাফল ও ত্রুটি অবস্থা পরীক্ষা

প্রতিটি ফিল্টার, পরিচিত শহর, কম তথ্য এলাকা, ত্রুটিপূর্ণ অনুসন্ধান ও অনুপলব্ধ পরিবার পরীক্ষা করুন। মার্কারহীন মানচিত্র শুধু বলে না যে অনুসন্ধান খালি বা ত্রুটিপূর্ণ। এমবেড বার্তা ও সম্পূর্ণ মানচিত্রের ব্যবহারযোগ্য অ্যাক্সেস রাখুন।

[ফলাফলের অভাব ও API ত্রুটির পার্থক্য](https://www.roote.ai/bn/guides/%E0%A6%95%E0%A7%8B%E0%A6%A8-%E0%A6%AB%E0%A6%B2%E0%A6%BE%E0%A6%AB%E0%A6%B2-%E0%A6%AC%E0%A6%BE-%E0%A6%8F%E0%A6%AA%E0%A6%BF%E0%A6%86%E0%A6%87-%E0%A6%A4%E0%A7%8D%E0%A6%B0%E0%A7%81%E0%A6%9F%E0%A6%BF-%E0%A6%95%E0%A6%BF%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-%E0%A6%AD%E0%A7%87%E0%A6%A6-%E0%A6%95%E0%A6%B0%E0%A6%BE-%E0%A6%AF%E0%A6%BE%E0%A6%AF%E0%A6%BC/)

[embed, API এবং MCP থেকে নির্বাচন](https://www.roote.ai/bn/guides/api-or-mcp-kon-integrer-mobility-data/)

[টয়লেট খুঁজে পাওয়ার গাইডের উদাহরণ](https://www.roote.ai/bn/guides/kibhabe-nijer-aspaas-muft-er-sarbojonin-shauchalay-khujen/)

## প্রায়শই জিজ্ঞাসা প্রশ্ন

### iframe এ কি API কী যোগ করতে হবে?

এখানে প্রদত্ত পাবলিক URL গুলোতে কোন API কী নেই। এমবেড URL বা ক্লায়েন্ট কোডে গোপনীয়তা রাখবেন না।

### zoom=15 অনুসন্ধান ব্যাসার্ধ বাড়ায়?

জুম ভিউ নিয়ন্ত্রণ করে। এটিকে API অনুরোধের ব্যাসার্ধ ভাববেন না; ব্যবহৃত ইন্টারফেসের অনুসন্ধান প্যারামিটার যাচাই করুন।

### প্যারেন্ট iframe এর পরিবর্তন জানে?

এটি প্রেরিত প্যারামিটার জানে। অভ্যন্তরীণ পরিবর্তনের জন্য দুটি ডোমেইনের মধ্যে ডকুমেন্টেড বিনিময় মেকানিজম দরকার।