ڕەهڕەو بۆ گەشەپێدەران

نەخشە، ڕێنمایی و پەڕەی شوێن بە چەند هێڵێکی کۆد لە ماڵپەڕەکەت دابنێ.

کردنەوەی دروستکەری جێگیرکردن بەڕێوەبردنی کلیلەکانی API

دەستپێکی خێرا

سکریپتەکە یەک جار لە پەڕەکەدا دابنێ و لە هەر شوێنێک نەخشەت دەوێت توخمێک بە data-rahro-map زیاد بکە. widget.js لە ٥ کیلۆبایت کەمترە، تەنها iframe دروست دەکات و تا توخمەکە دیار نەبێت هیچ بار ناکات.

<script src="https://rahromap.ir/sdk/v1/widget.js" async></script>

<div data-rahro-map data-lat="35.6997" data-lon="51.3380" data-zoom="15"
     data-label="..." data-lang="ckb" style="height:360px"></div>

<div data-rahro-place="x3f8k2m1q9" data-lang="ckb" style="height:320px"></div>

جێگیرکردن بە iframe

سێ پەڕەی ئامادە: نەخشە بە دەرزی، ڕێگا لە نێوان دوو خاڵ و کارتی شوێن. زمان بە ?lang= دیاری دەکرێت؛ یەک کۆد بۆ هەموو پەڕەکانی ماڵپەڕەکەت بەسە.

<iframe src="https://rahromap.ir/embed/map?ll=35.6997,51.338&z=15&lang=ckb"
        width="100%" height="360" style="border:0" loading="lazy"></iframe>
<!-- https://rahromap.ir/embed/directions?from=lat,lon&to=lat,lon&to_name=...&lang=ckb -->
<!-- https://rahromap.ir/embed/place/{id}?lang=ckb -->

SDK ‏@rahro/maps

دروستکردنی ناونیشانی جێگیرکردن، دانانی iframe و واژووکردنی ناونیشانی وێنەی جێگیر. بەبێ npm-یش لە /sdk/v1/maps.mjs import دەکرێت؛ Web Componentـەکان: <rahro-map>، <rahro-directions> و <rahro-place-card>.

<div id="map" style="height:360px"></div>
<script type="module">
  import { mountMap } from "https://rahromap.ir/sdk/v1/maps.mjs";
  mountMap(document.getElementById("map"), { base: "https://rahromap.ir", lat: 35.6997, lon: 51.338, zoom: 15, lang: "ckb" });
</script>

<!-- web components (after widget.js) -->
<rahro-map lat="35.6997" lon="51.338" zoom="15" lang="ckb"></rahro-map>
<rahro-directions to-lat="35.7" to-lon="51.4" to-name="..." lang="ckb"></rahro-directions>
<rahro-place-card place="x3f8k2m1q9" lang="ckb"></rahro-place-card>

کلیلەکانی API

بۆ جێگیرکردن لە وێبگەڕدا کلیلی publishable (pk_) و بۆ ڕاژەکار و واژووکردنی وێنەی جێگیر کلیلی secret (sk_) دروست بکە. کلیلی تەواو تەنها یەک جار پیشان دەدرێت.

Origin دەتوانرێت ساختە بکرێت؛ پاسەوانی ڕاستەقینەی کلیلی گشتی بەش و سنووری خێرایییە. کلیلی نهێنی تەنها لەسەر ڕاژەکارەکەت بهێڵەوە.

وێنەی جێگیری نەخشە

GET /v1/static/map لەگەڵ key و skid (ناسنامەی یەکێک لە کلیلە secretـەکانت) و sig. واژوو HMAC-SHA256 بە base64url لەسەر ڕیزبەندی ڕێکخراوی پرسیار بەبێ sig ە و کلیلی واژوو هاشی SHA-256 (hex)ی کلیلی secretـەکەتە؛ خودی کلیلی secret هەرگیز لە ناونیشاندا نایەت. تەنها لەسەر ڕاژەکار واژوو بکە.

ئێستا وەڵامەکە وێنەیەکی سادەی SVGـە (تۆڕ، دەرزی، ناونیشان و پۆتانەکان)، نەک کاشی ڕاستەقینەی نەخشە؛ وێنەکێشانی ڕاستەقینە بە tileserver-gl دواتر زیاد دەکرێت و ناونیشان و واژوو ناگۆڕێن.

// Node 18+ — sign on your server, never in the browser.
import { createHash, createHmac } from "node:crypto";

const secret = createHash("sha256").update(process.env.RAHRO_SECRET_KEY).digest("hex");
const query = new URLSearchParams({
  ll: "35.6997,51.338", z: "15", w: "600", h: "400",
  key: "pk_...",               // your publishable (or secret) key
  skid: "<secret key id>",     // id of the secret key, shown on the keys page
}).toString();
const canonical = query.split("&").sort().join("&");
const sig = createHmac("sha256", secret).update(canonical).digest("base64url");
const url = `https://rahromap.ir/v1/static/map?${query}&sig=${sig}`;

oEmbed

پەڕەکانی شوێن بەستەری دۆزینەوەی oEmbed یان هەیە؛ ئامرازەکانی وەک وۆردپرێس بە لکاندنی ناونیشانی پەڕەکە کارتی شوێن خۆکارانە جێگیر دەکەن. خاڵی دەستگەیشتن: GET /oembed?url=

GET https://rahromap.ir/oembed?url=https%3A%2F%2Frahromap.ir%2Fplace%2Fx3f8k2m1q9&maxwidth=600