پلتفرم نقشه نشان دارای 2 کیت توسعه برای نمایش نقشه در وب است:
نقشه وب با تایلهای Vector که بر پایه کتابخانه معروف شرکت Mapbox ارائه شده و کیفیت بالاتری دارد. این کیت توسعه علاوه بر بستر وب، در صورتیکه بصورت Web View یا iFrame در محیطهای نرم افزاری همچون ری اکت نیتیو یا فلاتر استفاده شود، از کیفیت بسیار خوبی برخوردار خواهد بود. لذا از این کیت نمایش نقشه در وب میتوان جهت توسعه ی اپلیکیشن های بر پایه وب یا PWA برای کاربران آیفون (سیستم عامل iOS) نیز استفاده کرد. در این صورت شما نقشه نشان را با کیفیت بالا به همراه لایه های ترافیک و مکانها در برنامه آیفون خود خواهید داشت. (جهت نمایش دموی این نقشه وب بصورت زنده اینجا کلیک کنید)
نقشه وب با تایلهای Raster که بر پایه دو کتابخانه معروف جاوا اسکریپتی Leaflet و Openlayers ارائه شده (همین صفحه) و برای کسانی مناسب است که روی یکی از این دو کتابخانه تسلط بیشتری دارند. این کیت توسعه اگر در بستر وب استفاده شود کیفیت خوبی دارد، اما در صورتیکه بصورت Web View یا iFrame در محیطهای نرم افزاری همچون ری اکت نیتیو یا فلاتر استفاده شود، از کیفیت مناسبی برخوردار نخواهد بود.
چطور شروع کنم؟
برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.
با توجه به اینکه SDK نقشه وب نشان در نسخه‌ی جاری بر پایه‌ی کتابخانه‌های OpenLayers (نسخه‌ی 8.1.0) و Leaflet (نسخه‌ی 1.9.4) پیاده‌سازی شده است، لازم است تا مبانی اولیه‌ی کار با این کتابخانه‌ها را بدانید. چنانچه با این کتابخانه‌ها آشنایی ندارید نگران نباشید! خوشبختانه این کتابخانه‌ها مجموعه‌ی کاملی از مستندات و نمونه کدهای آماده در اختیار شما قرار می‌دهند که از طرق آنها به راحتی میتوان از قابلیت‌های متنوع نقشه استفاده کرد.
از طریق این دو لینک میتوانید اطلاعات بیشتری در مورد این کتابخانه‌ها کسب کنید:
راه اندازی نقشه
۱- قرار دادن 2 فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 8.1.0 کتابخانه‌ی OpenLayers می‌باشند.
<link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
<script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></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 rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
<script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></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>
نحوه استفاده در باندلر ها مانند webpack, rollup :
1- ابتدا پکیج openLayer نشان را در پروژه خود نصب نمائید:
در صورتی که از npm استفاده می‌کنید:
// using npm
npm i @neshan-maps-platform/ol
در صورتی که از yarn استفاده می‌کنید:
// using yarn
yarn add @neshan-maps-platform/ol
2- اختصاص یک المنت برای نمایش نقشه در صفحه html مورد نظرتان درون پروژه:
<div id="map"></div>
3- ایجاد نقشه در محیط توسعه:
import '@neshan-maps-platform/ol/ol.css';
import Map from '@neshan-maps-platform/ol/Map';
import View from '@neshan-maps-platform/ol/View';
import {fromLonLat} from '@neshan-maps-platform/ol/proj';
new Map({
mapType: 'neshan',
target: 'map',
key: 'YOUR-WEB-API-KEY',
poi: true,
traffic: true,
view: new View({
center: fromLonLat([51.389, 35.6892]),
zoom: 14
})
});
۱- قرار دادن ۲ فایل اصلی زیر در صفحه. در نظر داشته باشید فایل‌ها مربوط به نسخه‌ی 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 جدید از نقشه.
۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را میتوانید مشاهده کنید:
<!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>
تغییر استایل نقشه
در حال حاضر در زیرساخت توسعه‌ی نقشه وب نشان چهار نوع استایل برای نقشه آماده شده است. شما به راحتی میتوانید از طریق متد
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");