چطور شروع کنم؟
برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.
فهرست مطالب این صفحه
راه اندازی نقشه
۱- قرار دادن ۳ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 4.5.6 کتابخانه‌ی OpenLayers می‌باشند. همچنین توجه کنید که از این فایل‌ها نباید بصورت لوکال یا افلاین استفاده کنید:
<link href="https://static.neshan.org/sdk/openlayers/4.6.5/ol.css" rel="stylesheet" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://static.neshan.org/sdk/openlayers/4.6.5/ol.js" type="text/javascript"></script>۲- قرار دادن یک div با id مشخص در صفحه و ایجاد یک instance جدید از نقشه.
۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را می‌توانید مشاهده ک
۱- قرار دادن ۲ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 1.3.3 کتابخانه‌ی Leaflet می‌باشند. همچنین توجه کنید که از این فایل‌ها نباید بصورت لوکال یا افلاین استفاده کنید:
<link href="https://static.neshan.org/sdk/leaflet/1.3.3/leaflet.css" rel="stylesheet" type="text/css">
<script src="https://static.neshan.org/sdk/leaflet/1.3.3/leaflet.js" type="text/javascript"></script>۲- قرار دادن یک div با id مشخص در صفحه و ایجاد یک instance جدید از نقشه.
۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را می‌توانید مشاهده کنید:
در ادامه یک مثال از چگونگی تغییر استایل نقشه را مشاهده می‌کنید:
تغییر استایل نقشه
setMapType در کلاس Map از آنها استفاده کنید. همچنین امکان استفاده از سایر نقشه‌های زیر دست در این زیرساخت پیش‌بینی شده است. در ادامه شیوه‌ی استفاده از این متد و همچنین قابلیت استفاده از سایر نقشه‌های زیردست را یک مثال برای شما توضیح داده‌ایم.انواع استایل نقشه در نشان عبارتند از:
- dreamy
- neshan
- standard-day
- standard-night
- osm-bright
Dreamy
myMap.setMapType("dreamy");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");