کتابخانه Leaflet مبتنی بر JavaScript بوده و 

 است. این کتابخانه دارای حجمی حدود 39 کیلو بایت است که برای ارائه نقشه‌های تعاملی با تمامی اجزاء جهت توسعه، در صفحات وب استفاده می‌شود.

کتابخانه Leaflet مبتنی بر JavaScript بوده و open-source است. این کتابخانه دارای حجمی حدود 39 کیلو بایت است که برای ارائه نقشه‌های تعاملی با تمامی اجزاء جهت توسعه، در صفحات وب استفاده می‌شود.

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

دستورالعمل‌های قرار گرفته در اینجا تنها مراحل اولیه راه‌اندازی نقشه است. جهت اطلاع داشتن از نحوه عملکرد نقشه، نمونه‌ها و پیادسازی کامل آن، می‌توانید به مستندات مرجع، مراجعه فرمائید.

دستورالعمل‌های قرار گرفته در اینجا تنها مراحل اولیه راه‌اندازی نقشه است. جهت اطلاع داشتن از نحوه عملکرد نقشه، نمونه‌ها و پیادسازی کامل آن، می‌توانید به مستندات مرجع، مراجعه فرمائید.[::ignore=true]

شروع سریع[::slug=&quot;quickstart&quot;]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parsimap Geocoder</title>
    <script src="{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.js"></script>
    <link
      href="{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="map" style="width: 100%; height: 400px"></div>
    <style>
      * {
        margin: 0;
      }
    </style>
    <script src="{::BASE_CDN_URL}/third-party/leaflet/plugins/parsimap-tile/{::LEAFLET_PARSIMAP_TILE_VER}/parsimap-tile.js"></script>
    <script>
      const map = new L.Map('map', {
        center: [35.7575, 51.41],
        zoom: 6,
      })

      L.parsimapTileLayer('parsimap-streets-v11-raster', {
        key: '{::PMI_MAP_TOKEN}',
      }).addTo(map)
    </script>
  </body>
</html>


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta
      name=&quot;viewport&quot;
      content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;
    /&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
    &lt;title&gt;Parsimap Geocoder&lt;/title&gt;
    &lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.js&quot;&gt;&lt;/script&gt;
    &lt;link
      href=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.css&quot;
      rel=&quot;stylesheet&quot;
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;
    &lt;style&gt;
      * {
        margin: 0;
      }
    &lt;/style&gt;
    &lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/plugins/parsimap-tile/{::LEAFLET_PARSIMAP_TILE_VER}/parsimap-tile.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      const map = new L.Map(&#39;map&#39;, {
        center: [35.7575, 51.41],
        zoom: 6,
      })

      L.parsimapTileLayer(&#39;parsimap-streets-v11-raster&#39;, {
        key: &#39;{::PMI_MAP_TOKEN}&#39;,
      }).addTo(map)
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;


<code class="language-html[::compile=true,source=false]">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta
      name=&quot;viewport&quot;
      content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;
    /&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
    &lt;title&gt;Parsimap Geocoder&lt;/title&gt;
    &lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.js&quot;&gt;&lt;/script&gt;
    &lt;link
      href=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.css&quot;
      rel=&quot;stylesheet&quot;
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;
    &lt;style&gt;
      * {
        margin: 0;
      }
    &lt;/style&gt;
    &lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/plugins/parsimap-tile/{::LEAFLET_PARSIMAP_TILE_VER}/parsimap-tile.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      const map = new L.Map(&#39;map&#39;, {
        center: [35.7575, 51.41],
        zoom: 6,
      })

      L.parsimapTileLayer(&#39;parsimap-streets-v11-raster&#39;, {
        key: &#39;{::PMI_MAP_TOKEN}&#39;,
      }).addTo(map)
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

CDN پارسی‌مپ[::slug=&quot;parsimap-cdn&quot;]

افزودن فایل‌های کتابخانه

افزودن فایل‌های کتابخانه[::slug=&quot;include-lib-files&quot;]

فایل‌های JavaScript و CSS را  در تگ 

فایل‌های JavaScript و CSS را  در تگ head فایل HTML اضافه کنید.

&lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.js&quot;&gt;&lt;/script&gt;
&lt;link
  href=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/mapbox-gl.css&quot;
  rel=&quot;stylesheet&quot;
/&gt;


<code class="language-html">&lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/leaflet.js&quot;&gt;&lt;/script&gt;
&lt;link
  href=&quot;{::BASE_CDN_URL}/third-party/leaflet/{::LEAFLET_JS_VERSION}/mapbox-gl.css&quot;
  rel=&quot;stylesheet&quot;
/&gt;
</code>

افزودن نقشه به وب سایت[::slug=&quot;add-map-to-website&quot;]

کد زیر را در تگ body فایل HTML قرار دهید.

&lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/plugins/parsimap-tile/{::LEAFLET_PARSIMAP_TILE_VER}/parsimap-tile.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;
&lt;script&gt;
  const map = new L.Map(&#39;map&#39;, {
    center: [35.7575, 51.41],
    zoom: 6,
  })

  L.parsimapTileLayer(&#39;parsimap-streets-v11-raster&#39;, {
    key: &#39;PMI_MAP_TOKEN&#39;,
  }).addTo(map)
&lt;/script&gt;


<code class="language-html">&lt;script src=&quot;{::BASE_CDN_URL}/third-party/leaflet/plugins/parsimap-tile/{::LEAFLET_PARSIMAP_TILE_VER}/parsimap-tile.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px&quot;&gt;&lt;/div&gt;
&lt;script&gt;
  const map = new L.Map(&#39;map&#39;, {
    center: [35.7575, 51.41],
    zoom: 6,
  })

  L.parsimapTileLayer(&#39;parsimap-streets-v11-raster&#39;, {
    key: &#39;PMI_MAP_TOKEN&#39;,
  }).addTo(map)
&lt;/script&gt;
</code>

برای استفاده از تایل‌های پارسی مپ، پلاگین 

 را به تگ body اضافه کرده  و بجای عبارت 

برای استفاده از تایل‌های پارسی مپ، پلاگین parsiamp-tile را به تگ body اضافه کرده  و بجای عبارت PMI_MAP_TOKEN توکن معتبری را قرار دهید.