پـیش نیازها
برای استفاده از کیت توسعهی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعهدهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وبسایت یا اپلیکیشن تحت وب خود نمایید.
راه اندازی نقشه
۱- قرار دادن 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
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;
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");