Switch2OSM

Керуйте вашими мапами самі

Використання Leaflet

Вступ

Leaflet – легковісна бібліотека JavaScript для показу мап. Вона розповсюджується на умовах дозвільної Ліцензії BSD для коду з відкритими сирцями, тож її можна використовувати на будь-якому сайті без побоювань порушення юридичних норм. Сирці бібліотеки доступні на GitHub.

Тут, ми обмежимо себе невеличким самодостатнім прикладом, що демонструє можливості бібліотеки. Радимо ознайомитись з детальними прикладами та документацією з офіційного сайта для більш детального опрацювання.

Початок роботи

Перенесіть наступний код у файл, наприклад leaflet.html, і відкрийте його у вашому веб-оглядачі або перейдіть за посиланням щоб відкрити файл leaflet.html:

<!DOCTYPE HTML>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin="">
    </script>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* налаштування розміру мапи */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // ініціалізація Leaflet
      var map = L.map('map').setView({lon: 31.4512745, lat: 49.0383902}, 6);

      // додамо тайли OpenStreetMap
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">Учасники OpenStreetMap</a>'
      }).addTo(map);

      // покажемо масштабну лінійку у лівому нижньому куті
      L.control.scale().addTo(map);

      // покажемо позначку на мапі
      L.marker({lon: 31.4512745, lat: 49.0383902}).bindPopup('Географічний центр України').addTo(map);
    </script>
  </body>
</html>

Докладні пояснення щодо коду дивіться на офіційному сайті. 1

Додаткові посилання

Якщо ви бажаєте:

  • використовувати інше тло? → Leaflet має підтримку TMS та WMS. Подивіться тут, які інші можливості має Leaflet.
  • додати розташування всіх офісів вашої компанії? → Збережіть координати у файл GeoJSON та додайте їх на мапу.
  • використовувати іншу картографічну проєкцію? → Втулок Proj4Leaflet допоможе вам в цьому.

  1. Швидкий старт – https://leafletjs.com/examples/quick-start/