نمایش اولین نقشه

در این راهنما یک نقشهٔ تعاملی به صفحهٔ وب اضافه می‌کنید؛ کاربر می‌تواند نقشه را جابه‌جا و بزرگ‌نمایی کند. برای آشنایی با تایل و استایل، نمایش نقشهٔ برداری را ببینید.

پیش‌نیازها

• حساب و سازمان فعال در داشبورد بلد.
• یک مرورگر و Python 3 برای اجرای نمونه روی رایانهٔ خود.
• یک کلید عمومی با دسترسی نقشهٔ برداری؛ در مرحلهٔ بعد آن را می‌سازید.

کلید عمومی بسازید

1. در داشبورد، سازمان خود را انتخاب یا ایجاد کنید.
2. یک کلید عمومی با دسترسی نقشهٔ برداری بسازید.
3. برای اجرای محلی، مبدأ مجاز http://localhost:8000 را به کلید اضافه کنید. نام میزبان و پورت باید با نشانی صفحه یکسان باشند.

کلید عمومی در مرورگر دیده می‌شود؛ دسترسی آن را به سرویس و مبدأهای موردنیاز محدود کنید. کلید خصوصی را در کد مرورگر قرار ندهید.

کد نقشه را قرار دهید

اگر صفحهٔ HTML دارید، قطعهٔ زیر را در آن قرار دهید. در غیر این صورت، تب «HTML کامل» را انتخاب کنید و کد را در فایلی به نام index.html بگذارید. در هر دو حالت، YOUR_PUBLIC_API_KEY را با کلید عمومی خود جایگزین کنید.

قطعه کد

<link href="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.css" rel="stylesheet">
<div id="map" style="height: 400px"></div>
<script src="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.js"></script>
<script>
maplibregl.setRTLTextPlugin(
  "https://tile-vector.services.balad.ir/rtl/mapbox-gl-rtl-text.js", true,
);
const map = new maplibregl.Map({
  container: "map",
  style: "https://tile-vector.services.balad.ir/styles/vector.json?api_key=YOUR_PUBLIC_API_KEY",
  center: [51.389, 35.6892],
  zoom: 12,
  minZoom: 3,
  attributionControl: { compact: false },
});
</script>

HTML کامل

<!doctype html>
<html lang="fa" dir="rtl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>نقشه برداری بلد</title>
<link href="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.css" rel="stylesheet">
<style>html, body, #map { margin: 0; width: 100%; height: 100%; }</style>
<div id="map"></div>
<script src="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.js"></script>
<script>
maplibregl.setRTLTextPlugin(
  "https://tile-vector.services.balad.ir/rtl/mapbox-gl-rtl-text.js", true,
);
const map = new maplibregl.Map({
  container: "map",
  style: "https://tile-vector.services.balad.ir/styles/vector.json?api_key=YOUR_PUBLIC_API_KEY",
  center: [51.389, 35.6892],
  zoom: 12,
  minZoom: 3,
  attributionControl: { compact: false },
});
</script>
</html>

صفحه را اجرا کنید

در پوشه‌ای که فایل index.html قرار دارد، دستور زیر را اجرا کنید:

python3 -m http.server 8000

نشانی http://localhost:8000 را در مرورگر باز کنید. نقشه با نوشته‌های فارسی نمایش داده می‌شود و می‌توانید آن را جابه‌جا و بزرگ‌نمایی کنید.

تصویر، ظاهر نمونه‌ای از نقشه را نشان می‌دهد؛ محدودهٔ آن ممکن است با مرکز کد یکسان نباشد.

نمایش منبع نقشه

طبق قوانین بلد، نام و کپی‌رایت بلد و OpenStreetMap باید روی نقشه قابل مشاهده بماند. حذف آن ممکن است به بسته‌شدن حساب شما منجر شود. نمونه‌های این صفحه اطلاعات منبع را روی نقشه نمایش می‌دهند؛ آن‌ها را حذف یا پنهان نکنید.

اگر نقشه نمایش داده نشد

• مطمئن شوید کلید نمونه را جایگزین کرده‌اید و دسترسی نقشهٔ برداری برای آن فعال است.
• مبدأ ثبت‌شده باید دقیقاً با نشانی صفحه یکسان باشد؛ localhost و 127.0.0.1 دو نام میزبان متفاوت‌اند.
• صفحه را از سرور محلی باز کنید و مطمئن شوید بخش map ارتفاع دارد. اگر نوشته‌های فارسی درست دیده نمی‌شوند، بارگذاری افزونهٔ فارسی را در ابزار شبکهٔ مرورگر بررسی کنید.

قدم بعدی

مرکز و بزرگ‌نمایی را تغییر دهید و نشانگر اضافه کنید · نمایش نقشهٔ تصویری