Finder خرید قالب

نقشه

نقشه های ریسپانسیو با پلاگین Leaflet.js

کامپوننت سایت
ساختار اصلی
ویژگی خطی :
<div class="interactive-map" style="height: 300px;" data-map-options='{<!--json options goes here-->}'></div>
فایل JSON :
<div class="interactive-map" style="height: 300px;" data-map-options-json='{<!--link to external local .json file-->}'></div>
API
data-map-options = '{}':
  • "mapLayer": "https://..." (link to API) - این یک سبک (لایه) بصری از نقشه شما است. ما از Maptiler در این الگو برای بدست آوردن پوسته های نقشه استفاده کردیم https://cloud.maptiler.com/maps. پوسته موردنظر خود را میتوانید انتخاب کنید.اطمینان حاصل کنید که لینک Raster (HiDPI) را کپی کرده و آن را به ویژگی "mapLayer" منتقل کرده باشید.
  • "coordinates": [51.5, -0.09] - آرایه ای با 2 مقدار: عرض و طول جغرافیایی.
  • "zoom": 1 - بزرگنمایی (مقیاس) نقشه را تنظیم می کند. مقدار پیش فرض: 1
  • "markers": [{...}, {...}] - آرایه ای از آبجکت ها.هر آبجکت یک شی با marker جداگانه است. شما میتوانید نشانگر مورد نظر را روی نقشه خود تنظیم کنید.
  • "markers": [
  {
    "coordinates": [51.5, -0.09],
    "iconUrl": "path-to-map-marker-icon.png",
    "className": null || "custom-marker-icon" || "custom-marker-dot",
    "popup": "<div class='p-3'>I'm a popup!</div>"
  }
]
  • markers[0].coordinates - موقعیت نشانگر روی نقشه. آرایه ای از 2 مقدار: عرض و طول جغرافیایی
  • markers[0].iconUrl - مسیر نماد نشانگر سفارشی. در صورت عدم ارائه از نماد پیش فرض (پین) استفاده می شود. می توانید همه نمادهای نشانگر را در داخل پیدا کنید dist/img/map folder
  • markers[0].className - کلاس CSS سفارشی برای نشانگر. در صورت نیاز به سبک متفاوت ، مفید است. 2 کلاس از پیش تعریف شده وجود دارد: custom-marker-icon (در صورت استفاده از یکی از نمادهای نشانگر دایره که همراه الگو ارائه شده است) و custom-marker-dot (نشانگر سبک نقطه جایگزین). اگر تنظیم نشده باشد ، از پین نقشه پیش فرض استفاده می شود.
  • markers[0].popup - . پنجره های بازشو با کلیک بر روی نشانگر (marker) نشان داده می شود.
  • برای مشاهده سایر امکانات به این لینک مراجعه کنید: https://leafletjs.com/

پیش فرض (بدون امکانات)

<!-- Basic map example (no options passed) -->
<div class="interactive-map" style="height: 400px;"></div>
// Basic map example (no options passed)
.interactive-map(style='height: 400px;')

نشانگر پیش فرض + popup

<!-- Inline options: Default marker + alternative map style -->
<div class="interactive-map" data-map-options='{"mapLayer": "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [51.5074, -0.1278], "zoom": 10, "markers": [{"coordinates": [51.5074, -0.1278], "popup": "<div class='p-3'><h6>Hi, I'm in London</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}]}' style="height: 400px;"></div>
// Inline options: Default marker + alternative map style
.interactive-map(data-map-options='{"mapLayer": "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [51.5074, -0.1278], "zoom": 10, "markers": [{"coordinates": [51.5074, -0.1278], "popup": "<div class=\'p-3\'><h6>Hi, I\'m in London</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}]}', style="height: 400px;")

نشانگر نقطه ای + popup

<!-- Inline options: Dot markers + popups -->
<div class="interactive-map" data-map-options='{"mapLayer": "https://api.maptiler.com/maps/pastel/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [40.7128, -74.0060], "zoom": 11, "markers": [{"coordinates": [40.702, -74.006], "className": "custom-marker-dot", "popup": "<div class='p-3'><h6>Hi, I'm in New York</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.716, -74.078], "className": "custom-marker-dot", "popup": "<div class='p-3'><h6>Hi, I'm in Jersey Cty</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.650, -74.209], "className": "custom-marker-dot", "popup": "<div class='p-3'><h6>Hi, I'm in Elizabeth</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}]}' style="height: 400px;"></div>
// Inline options: Dot markers + popups
.interactive-map(data-map-options='{"mapLayer": "https://api.maptiler.com/maps/pastel/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [40.7128, -74.0060], "zoom": 11, "markers": [{"coordinates": [40.702, -74.006], "className": "custom-marker-dot", "popup": "<div class=\'p-3\'><h6>Hi, I\'m in New York</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.716, -74.078], "className": "custom-marker-dot", "popup": "<div class=\'p-3\'><h6>Hi, I\'m in Jersey Cty</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.650, -74.209], "className": "custom-marker-dot", "popup": "<div class=\'p-3\'><h6>Hi, I\'m in Elizabeth</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}]}', style="height: 400px;")
بالا