پـیش نیازها
برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.
فهرست مطالب این صفحه
با توجه به اینکه SDK نقشه وب نشان در نسخه‌ی جاری بر پایه‌ی کتابخانه‌های OpenLayers (نسخه‌ی 5.3.0) و Leaflet (نسخه‌ی 1.4.0) پیاده‌سازی شده است، لازم است تا مبانی اولیه‌ی کار با این کتابخانه‌ها را بدانید. چنانچه با این کتابخانه‌ها آشنایی ندارید نگران نباشید! خوشبختانه این کتابخانه‌ها مجموعه‌ی کاملی از مستندات و نمونه کدهای آماده در اختیار شما قرار می‌دهند که از طرق آنها به راحتی می‌توان از قابلیت‌های متنوع نقشه استفاده کرد.
از طریق این دو لینک می‌توانید اطلاعات بیشتری در مورد این کتابخانه‌ها کسب کنید:
راه اندازی نقشه
۱- قرار دادن 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.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 جدید از نقشه.
۳- نقشه وب شما آماده است. به همین سادگی. در ادامه نمونه کد کامل مراحل بالا را می‌توانید مشاهده کنید:
کامپوننت ReactJS
چنانچه از ReactJS برای توسعه وب اپلیکیشن خود استفاده می‌کنید، به سادگی می‌توانید با ایمپورت کردن کامپوننت React نشان، از امکانات نقشه نشان در پروژه‌های ReactJS بهره ببرید. دیگر نیازی به به استفاده از تگ script در پروژه نیست، این کامپوننت به صورت خودکار اسکریپت موردنیاز را بارگذاری و اجرا می‌کند.
مراحل استفاده از کامپوننت React نشان:
۱- ابتدا بسته نرم افزاری
react-neshan-map-leaflet را دانلود و نصب کنید: npm install react-neshan-map-leaflet
۲- کامپوننت
react-neshan-map-leaflet را ایمپورت کنید: import NeshanMap from 'react-neshan-map-leaflet'
۳- ورودی های کامپوننت را تنظیم کرده و از نشان لذت ببرید!
import React from 'react'
import NeshanMap from 'react-neshan-map-leaflet'
import './SimpleMap.css'
function SimpleMap() {
return (
<NeshanMap
options={{
key: 'YOUR_API_KEY',
center: [35.699739, 51.338097],
zoom: 13
}}
/>
);
}
export default SimpleMap;
4- تابعی که به عنوان ورودی
onInit کامپوننت تنظیم می‌کنید، پس از بارگذاری اولیه نقشه اجرا خواهد شد.
از طرفی در این تابع به متغیر اصلی Leaflet (L) و نقشه (map) نیز دسترسی خواهید داشت. <NeshanMap
options={{
key: 'YOUR_API_KEY',
maptype: 'dreamy',
poi: true,
traffic: false,
center: [35.699739, 51.338097],
zoom: 13
}}
onInit={(L, myMap) => {
let marker = L.marker([35.699739, 51.338097])
.addTo(myMap)
.bindPopup('I am a popup.');
myMap.on('click', function (e) {
marker.setLatLng(e.latlng)
});
L.circle([35.699739, 51.348097], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(myMap);
}}
/>
در ادامه یک مثال از چگونگی تغییر استایل نقشه را مشاهده می‌کنید:
تغییر استایل نقشه
- در حال حاضر در زیرساخت توسعه‌ی نقشه وب نشان چهار نوع استایل برای نقشه آماده شده است. شما به راحتی می‌توانید از طریق متد
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");