کیت توسعه Leaflet نشان

اطلاع

برای استفاده از کیت‌های توسعه‌ی نشان، ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.

برای نمایش یک نقشه داینامیک در وب‌سایت یا اپلیکیشن تحت وب به یک کیت توسعه‌ی نرم‌افزار SDK نیاز است. این کیت توسعه که با زبان جاوااسکریپت نوشته شده است این امکان را به توسعه‌دهندگان می‌دهد تا به سادگی و بتوانند نقشه ها را به پروژه های خود اضافه کنند.هم چنین توسط متدهای مشخص و استانداردی که در این کیت توسعه در نظر گرفته شده‌اند می‌توان آیتم‌های متفاوتی مانند مارکر، خط، چندضلعی، دایره و … را به نقشه اضافه نمود. کافیست یک instance از نقشه ایجاد کنید و توسط متدهایی که در کلاس Map تعریف شده‌اند با نقشه و قابلیت‌های آن کار کنید. با توجه به اینکه SDK نقشه وب نشان در نسخه‌ی جاری بر پایه‌ی کتابخانه‌ Leaflet (نسخه‌ی 1.9.4) پیاده‌سازی شده است، لازم است تا مبانی اولیه‌ی کار با این کتابخانه‌ها را بدانید. چنانچه با این کتابخانه‌ها آشنایی ندارید نگران نباشید! خوشبختانه این کتابخانه‌ها مجموعه‌ی کاملی از مستندات و نمونه کدهای آماده در اختیار شما قرار می‌دهند که از طرق آنها به راحتی می‌توان از قابلیت‌های متنوع نقشه استفاده کرد. برای اطلاعات بیشتر در مورد کتابخانه Leaflet می‌توانید به منابع زیر مراجعه کنید:

نکته

در حال حاضر دو لایه ترافیک آنلاین و لایه مکان‌ها (POIs) در این کتابخانه بروزرسانی نمی‌شوند. در صورت تمایل برای استفاده از این دو لایه می‌توانید از کیت توسعه Mapbox GL نشان استفاده کنید.

راه‌اندازی نقشه

این کتابخانه به دو روش CDN و نصب پکیج NPM قابل راه‌اندازی است.

روش اول: استفاده از CDN

۱. ابتدا فایل‌های CSS و JavaScript مربوط به SDK را با افزودن لینک‌های زیر به صفحه HTML خود اضافه کنید:

<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 مشخص در صفحه قرار دهید و یک نمونه جدید از نقشه ایجاد کنید.

<div id="map"></div>

۳. نمونه کد کامل:

<!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>نقشه نشان با Leaflet</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 myMap = new L.Map("map", {
            key: "<YOUR_API_KEY>",
            maptype: "neshan",
            poi: false,
            traffic: false,
            center: [35.699756, 51.338076],
            zoom: 14,
        });
    </script>
</body>
</html>

روش دوم: نصب از طریق NPM

ابتدا پکیج را با استفاده از مدیر بسته دلخواه خود نصب کنید:

npm
yarn

npm i @neshan-maps-platform/leaflet

yarn add @neshan-maps-platform/leaflet

پس از نصب، می‌توانید نقشه را به طریق زیر در فایل جاوااسکریپت خود تعریف نمایید:

import L from '@neshan-maps-platform/leaflet';
import '@neshan-maps-platform/leaflet/dist/leaflet.css';

document.addEventListener('DOMContentLoaded', () => {
    const map = new L.Map("map", {
        key: "<YOUR_API_KEY>",
        maptype: "neshan",
        poi: false,
        traffic: false,
        center: [35.699756, 51.338076],
        zoom: 14,
    });
});

دریافت پروژه نمونه Leaflet نشان

تغییر استایل نقشه

کیت توسعه Leaflet نشان از شش استایل نقشه پیش‌فرض پشتیبانی می‌کند. شما می‌توانید به راحتی از طریق متد setMapType استایل نقشه را تغییر دهید.

dreamy
dreamy-gold
neshan
standard-day
standard-night
osm-bright

همچنین می‌توانید از سرور کاشی (Tile Server) دلخواه خود استفاده کنید.

مثال تغییر استایل:

// تغییر به استایل Dreamy
myMap.setMapType("dreamy");

// تغییر به استایل Standard Night
myMap.setMapType("standard-night");

// استفاده از سرور کاشی دلخواه (مثلاً OpenStreetMap)
myMap.setMapType("https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png");