نوشتن یک نظر انتشار نقشه در لیف لت (Leaflet)
leaflet یک کتابخانه‌ی مدرن JavaScript برای کار با نقشه می‌باشد. از خصوصیات بارز این کتابخانه پشتیبانی بسیار خوب آن از موبایل و دستگاههای لمسی است. Leaflet تنها 33 کیلوبایت حجم دارد و ویژگی‌های آن اغلب نیازهای‌های توسعه دهندگان را برای پیاده سازی نرم افزار‌های مبتنی بر نقشه پوشش می‌دهد. از مزایای این کتابخانه می‌توان به مشارکت جامعه‌ی بزرگ توسعه دهندگان، سورس خوانا و تمیز، مستندات خوب و تعداد زیادی پلاگین برای آن اشاره کرد.
نحوه نمایش نقشه پارسی جو با استفاده از لیف لت
نمایش نقشه پارسی جو با استفاده از لیف لت بسیار ساده است. در ادامه نحوه انتشار نقشه پارسی جو با استفاده از لیف لت شرح داده شده است.
گام اول: آماده سازی صفحه:
برای استفاده از Leaflet ابتدا باید فایل Style و JavaScript کتابخانه را در تگ head ارجاع داد:
<script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" />
سپس یک div با یک Id مشخص را به تگ body اضافه می‌کنیم. div مورد نظر باید از ارتفاع مشخصی برخوردار باشد که به سادگی به صورت زیر تعریف میگردد:
<div id="map" style="width: 100%; height: 700px;"></div>
پس از انجام مقدمات اکنون می‌توان یک نقشه را با تنظیمات دلخواه در div تعریف شده نمایش داد.
گام دوم: تنظیمات اولیه نقشه:
با کد زیر ابتدا یک وهله از شیء map ایجاد میشود:
var map = L.map('map').setView([35.70163, 51.39211], 12);همانطور که مشاهده میشود شناسه‌ی div تعریف شده از طریق سازنده به map پاس داده شده است و سپس به کمک تابع setView به محل مختصات جغرافیایی مورد نظر با زوم پیشفرض 12 نمایش داده میشود. طراحی Leaflet به صورتی است که استفاده از متدهای زنجیروار (chainable) را میسر می‌سازد. به عنوان نمونه در کد بالا تابع setView یک شیء map را بر می‌گرداند و توسعه دهنده می‌تواند از توابع دیگر مقدار بازگشتی استفاده کند. این مورد از نظر طراحی شبیه به jQuery می‌باشد.
<html> <head> <meta charset="UTF-8"> <script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"></div> </body> </html>
اگر Google Maps را مشاهده کنید، متوجه می‌شوید که یک نقشه، به صورت مستطیل مستطیل، بارگزاری میشود. به این مستطیل‌ها Tile گفته میشود. tileها همان فایل‌های png هستند و درواقع به ازای زوم‌های مختلف در محل‌های مختلف، tileهای متفاوتی با شناسه‌ی مشخصی وجود دارند. تصویر زیر نقشه‌ی Google می‌باشد؛ قبل از اینکه tileها بارگزاری شوند. اگر با دقت نگاه کنید مستطیل‌های بزرگ و کوچکی را مشاهده می‌کنید که قسمت‌های مختلف یک نقشه یا همان تایل می‌باشند.
برای نمایش نقشه پارسی جو، نیاز است tileها را از منابع پارسی جو، در اختیار نقشه قرار داد.
پس از تعریف اولیه، نیاز است یک Tile Layer ایجاد کرده و آن را به نقشه اضافه کرد:
var map = L.map('map').setView([35.70163, 51.39211], 12);
L.tileLayer('https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306', {
maxZoom: 21,
}).addTo(map);
در کد بالا ابتدا آدرس tile server تعریف شده است. در این مثال از سرویس نقشه پارسی جو برای تهیه‌ی Tileها استفاده شده است. سپس لینک سرویس دهنده، به همراه متن attribution(نوشته‌ای که در زیر نقشه قرار می‌گیرد) به شیء TileLayer پاس داده شد و شیء ایجاد شده از طریق متد addTo به شیء map اضافه شده است.
توجه: در بخش "apikey=" به جای متن مشخص شده کلیدapi دریافتی از پارسی جو را وارد نمایید. (راهنمای دریافت API Key)
توجه: در صورت عدم استفاده از API Key اختصاصی خود، ممکن است نمایش نقشه در وب سایت شما با اختلال مواجه شود.
توجه: [(Setview([lat,long => در این بخش مختصات مرکز نمایش نقشه وارد می شود.
نتیجه‌ی کار اینگونه خواهد بود:
<html> <head> <meta charset="UTF-8"> <script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"></div> <script> var map = L.map('map').setView([35.70163, 51.39211], 12); L.tileLayer('https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306', { maxZoom: 21, }).addTo(map); </script> </body> </html>
نحوه نمایش Marker، دایره و چندضلعی
الف) نمایش مارکر
در کنار نمایش Tileها می‌توان اشکال گرافیکی نیز به نقشه اضافه کرد؛ مثل مارکر(نقطه)، مستطیل، دایره و یا یک Popup. اضافه کردن یک Marker به سادگی، با کد زیر صورت می‌پذیرد:
var marker = L.marker([35.71172, 51.40690]).addTo(map);
محل مورد نظر به شیء مارکر پاس داده شده و مقدار بازگشتی به map اضافه شده است.
<html> <head> <meta charset="UTF-8"> <script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"></div> <script> var map = L.map('map').setView([35.70163, 51.39211], 12); L.tileLayer('https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306', { maxZoom: 21, }).addTo(map); var marker = L.marker([35.71172, 51.40690]).addTo(map); </script> </body> </html>
ب) نمایش دایره
برای ترسیم دایره باید ابتدا مختصات مرکز دایره و شعاع به متر را به L.circle پاس داد:
var circle = L.circle([35.75163, 51.39211], 2000, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
در کد بالا علاوه بر محل و اندازه دایره، رنگ محیط، رنگ داخل و شفافیت (opacity) نیز مشخص شده‌اند.
<html> <head> <meta charset="UTF-8"> <script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"></div> <script> var map = L.map('map').setView([35.70163, 51.39211], 12); L.tileLayer('https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306', { maxZoom: 21, }).addTo(map); </script> </body> </html>
ج) نمایش چند ضلعی (پلیگون)
برای نمایش چند ضلعی‌ها می‌توان به این صورت عمل کرد:
var polygon = L.polygon([ [35.79163, 51.39211], [35.75163, 51.33211], [35.77163, 51.41211] ]).addTo(map);
تمام موارد ذکر شده در کد زیر پیاده سازی شده است:
<html> <head> <meta charset="UTF-8"> <script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"></div> <script> var map = L.map('map').setView([35.70163, 51.39211], 12); L.tileLayer('https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306', { maxZoom: 21, }).addTo(map); var marker = L.marker([35.71172, 51.40690]).addTo(map); var circle = L.circle([35.75163, 51.39211], 2000, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map); var polygon = L.polygon([ [35.79163, 51.39211], [35.75163, 51.33211], [35.77163, 51.41211] ]).addTo(map); </script> </body> </html>
نحوه نمایش پاپ آپ (Popup )
از Popup می‌توان برای نمایش اطلاعات اضافه‌ای بر روی یک محل خاص یا یک عنوان به مانند Marker استفاده کرد. برای مثال می‌توان اطلاعاتی درباره‌ی محل یک Marker یا دایره نمایش داد. در هنگام ایجاد marker، دایره و چندضلعی مقادیر بازگشتی در متغیر‌های جدایی ذخیره شدند. اکنون می‌توان به آن اشیاء یک popup اضافه کرد:
marker.bindPopup("میدان ولیعصر (عج) ").openPopup();
circle.bindPopup("من یک دایره هستم!");
polygon.bindPopup("من یک پلیگون هستم!!");
به علت اینکه openPopup برای Marker صدا زده شده، به صورت پیشفرض popup را نمایش می‌دهد. اما برای بقیه، نمایش با کلیک خواهد بود. البته الزاما نیازی نیست که popup روی یک شیء نمایش داده شود، می‌توان popupهای مستقلی نیز ایجاد کرد:
var popup = L.popup()
.setLatLng([35.71163, 51.49511])
.setContent("من یک پاپ آپ مستقل هستم")
.openOn(map);
شما می توانید نمایش مارکر، دایره، چند ضلعی و پاپ آپ را در کد زیر مشاهده نمائید
<html> <head> <meta charset="UTF-8"> <script src="https://addmap.parsijoo.ir/leaflet/leaflet.js"></script> <link rel="stylesheet" href="https://addmap.parsijoo.ir/leaflet/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"></div> <script> var map = L.map('map').setView([35.70163, 51.39211], 12); L.tileLayer('https://developers.parsijoo.ir/web-service/v1/map/?type=tile&x={x}&y={y}&z={z}&apikey=627973149c2041b184e31259821d1306', { maxZoom: 21, }).addTo(map); var marker = L.marker([35.71172, 51.40690]).addTo(map); var circle = L.circle([35.75163, 51.39211], 2000, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map); var polygon = L.polygon([ [35.79163, 51.39211], [35.75163, 51.33211], [35.77163, 51.41211] ]).addTo(map); marker.bindPopup("میدان ولیعصر").openPopup(); circle.bindPopup("من یک دایره هستم!"); polygon.bindPopup("من یک پلیگون هستم!!"); var popup = L.popup() .setLatLng([35.71163, 51.49511]) .setContent("من یک پاپ آپ مستقل هستم") .openOn(map); </script> </body> </html>
عالی 
