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

هم چنین توسط متدهای مشخص و استانداردی که در این کیت توسعه در نظر گرفته شده‌اند می‌توان آیتم‌های متفاوتی مانند مارکر، خط، چندضلعی، دایره و … را به نقشه اضافه نمود. کافیست یک instance از نقشه ایجاد کنید و توسط متدهایی که در کلاس Map تعریف شده‌اند با نقشه و قابلیت‌های آن کار کنید.

neshan web sdk intro
به عنوان مثال با فراخوانی متد myMap.setMapType('standard-night'); استایل نقشه را تغییر دهید یا سطح بزرگنمایی (zoom) آن را به دلخواه خود تنظیم کنید. به راحتی می‌توانید یک لایه در نقشه ایجاد و موقعیت‌های دلخواه‌تان را در آن لایه قرار داده و در نقشه نمایش دهید.

کتابخانه ها
زیرساخت توسعه نقشه نشان جهت سهولت کار توسعه‌دهندگان بر پایه‌ی کتابخانه‌های Leaflet و OpenLayers طراحی و پیاده‌سازی شده است به گونه‌ای که تمامی امکاناتی که در افزونه‌ها و کتابخانه‌های متن باز موجود می‌باشند قابل بکارگیری باشند. چنانچه با این کتابخانه‌ها آشنایی دارید، نیاز به انجام هیچ کار جدیدی نیست. تنها کافیست طبق مثال زیر Api Key خود را در هنگام ساخت نقشه جدید تنظیم کنید. همین!

با کتابخانه‌ی OpenLayers یا Leaflet آشنایی ندارید؟ نگران نباشید! خوشبختانه مستندات استفاده از این کتابخانه‌ها بصورت کامل و همراه با مثال‌های متنوع از شیوه‌ی استفاده آن‌ها در اختیار شما قرار گرفته‌اند. با مطالعه‌ی آن‌ها به راحتی می‌توانید نقشه وب موردنظرتان را پیاده‌سازی کنید.

چطور شروع کنم؟
برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.

ثبت نام و کلید دسترسی
قوانین و شرایط استفاده
با توجه به اینکه SDK ‌ نقشه وب نشان در نسخه‌ی جاری بر پایه‌ی کتابخانه‌های OpenLayers (نسخه‌ی 8.1.0) و Leaflet (نسخه‌ی 1.9.4) پیاده‌سازی شده است، لازم است تا مبانی اولیه‌ی کار با این کتابخانه‌ها را بدانید. چنانچه با این کتابخانه‌ها آشنایی ندارید نگران نباشید! خوشبختانه این کتابخانه‌ها مجموعه‌ی کاملی از مستندات و نمونه کدهای آماده در اختیار شما قرار می‌دهند که از طرق آنها به راحتی می‌توان از قابلیت‌های متنوع نقشه استفاده کرد.

از طریق این دو لینک می‌توانید اطلاعات بیشتری در مورد این کتابخانه‌ها کسب کنید:

Leaflet v1.9.4 reference
Leaflet tutorials
OpenLayers v8.1.0 documentation
OpenLayers v8.1.0 examples
راه اندازی نقشه
OpenLayers
Leaflet
۱- قرار دادن ۲ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 1.9.4 کتابخانه‌ی Leaflet می‌باشند. همچنین توجه کنید که از این فایل‌ها نباید بصورت لوکال یا افلاین استفاده کنید:

<link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
<script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>
۲- قرار دادن یک div با id مشخص در صفحه و ایجاد یک instance جدید از نقشه.

۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را می‌توانید مشاهده کنید:

Copy<!DOCTYPE html>
<html lang="fa">
<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>Map</title>

    <link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.css"/>
    <script src="https://static.neshan.org/sdk/leaflet/v1.9.4/neshan-sdk/v1.0.8/index.js"></script>

    <style>
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
        }

        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const testLMap = new L.Map("map", {
        key: "YOUR_API_KEY",
        maptype: "neshan",
        poi: false,
        traffic: false,
        center: [35.699756, 51.338076],
        zoom: 14,
    })
</script>
</body>
</html>
دریافت پروژه نمونه Leaflet نشان
در ادامه یک مثال از چگونگی تغییر استایل نقشه را مشاهده می‌کنید:

تغییر استایل نقشه
در حال حاضر در زیرساخت توسعه‌ی نقشه وب نشان چهار نوع استایل برای نقشه آماده شده است. شما به راحتی می‌توانید از طریق متد setMapType در کلاس Map از آن‌ها استفاده کنید. همچنین امکان استفاده از سایر نقشه‌های زیر دست در این زیرساخت پیش‌بینی شده است. در ادامه شیوه‌ی استفاده از این متد و همچنین قابلیت استفاده از سایر نقشه‌های زیردست را یک مثال برای شما توضیح داده‌ایم.

انواع استایل نقشه در نشان عبارتند از:

dreamy
dreamy-gold
neshan
standard-day
standard-night
osm-bright
Dreamy
myMap.setMapType("dreamy");
Dreamy Gold
myMap.setMapType("dreamy-gold");
Neshan
myMap.setMapType("neshan");
Standard Day
myMap.setMapType("standard-day");
Standard Night
myMap.setMapType("standard-night");
OSM Bright
myMap.setMapType("osm-bright");
Custom Tile Server
myMap.setMapType("https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png");
کلید دسترسی سرویس (api-key)
برای ساخت کلید دسترسی (api-key) مناسب برای این سرویس شما باید در پنل ساخت کلید دسترسی گزینه نقشه وب را انتخاب کنید. این را هم در نظر داشته باشید برای امنیت بیشتر کلید دسترسی خود و جلو گیری از سواستفاده شدن از آن domain سرور خود را نیز میتوانید در فیلد دامنه/Ip های مجاز وارد کنید.