پلتفرم نقشه نشان دارای 2 کیت توسعه برای نمایش نقشه در وب است:
فهرست مطالب این صفحه
نقشه وب با تایلهای Vector که بر پایه کتابخانه معروف شرکت Mapbox ارائه شده و کیفیت بالاتری دارد. این کیت توسعه علاوه بر بستر وب، در صورتیکه بصورت Web View یا iFrame در محیطهای نرم افزاری همچون ری اکت نیتیو یا فلاتر استفاده شود، از کیفیت بسیار خوبی برخوردار خواهد بود. لذا از این کیت نمایش نقشه در وب میتوان جهت توسعه ی اپلیکیشن های بر پایه وب یا PWA برای کاربران آیفون (سیستم عامل iOS) نیز استفاده کرد. در این صورت شما نقشه نشان را با کیفیت بالا به همراه لایه های ترافیک و مکانها در برنامه آیفون خود خواهید داشت. (جهت نمایش دموی این نقشه وب بصورت زنده اینجا کلیک کنید)
نقشه وب با تایلهای Raster که بر پایه دو کتابخانه معروف جاوا اسکریپتی Leaflet و Openlayers ارائه شده (همین صفحه) و برای کسانی مناسب است که روی یکی از این دو کتابخانه تسلط بیشتری دارند. این کیت توسعه اگر در بستر وب استفاده شود کیفیت خوبی دارد، اما در صورتیکه بصورت Web View یا iFrame در محیطهای نرم افزاری همچون ری اکت نیتیو یا فلاتر استفاده شود، از کیفیت مناسبی برخوردار نخواهد بود.
چطور شروع کنم؟
برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.
راه اندازی نقشه
۱- قرار دادن ۳ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 5.3.0 کتابخانه‌ی OpenLayers می‌باشند. همچنین توجه کنید که از این فایل‌ها نباید بصورت لوکال یا افلاین استفاده کنید:
<link href="https://static.neshan.org/sdk/openlayers/5.3.0/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/5.3.0/ol.js" type="text/javascript"></script>
۲- قرار دادن یک div با id مشخص در صفحه و ایجاد یک instance جدید از نقشه.
۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را میتوانید مشاهده کنید.
<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
<link href="https://static.neshan.org/sdk/openlayers/5.3.0/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/5.3.0/ol.js" type="text/javascript"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id='map' class='map'></div>
<script type='text/javascript'>
var map = new ol.Map({
maptype: 'neshan',
target: 'map',
key: 'YOUR_WEB_API',
poi: true,
traffic: true,
view: new ol.View({
center: ol.proj.fromLonLat([51.389, 35.6892]),
zoom: 14
})
});
</script>
</body>
</html>
۱- قرار دادن ۲ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 1.4.0 کتابخانه‌ی Leaflet می‌باشند. همچنین توجه کنید که از این فایل‌ها نباید بصورت لوکال یا افلاین استفاده کنید:
<link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
<script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>۲- قرار دادن یک div با id مشخص در صفحه و ایجاد یک instance جدید از نقشه.
۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را میتوانید مشاهده کنید:
تغییر استایل نقشه
در حال حاضر در زیرساخت توسعه‌ی نقشه وب نشان چهار نوع استایل برای نقشه آماده شده است. شما به راحتی میتوانید از طریق متد
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");