ИспользуйOSM

Верни контроль над своими картами

Начинаем работать с Leaflet


Введение

Leaflet - это легкая библиотека на JavaScript, позволяющая встраивать карты в web. Она распространяется под лицензией BSD для программного обеспечения с открытым исходным кодом, что позволяет ее использовать абсолютно на любом сайте без каких-либо дополнительных юридических ограничений. Ее исходный текст доступен на GitHub.

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

Начало работы

Создайте файл leaflet.html, скопируйте в него нижеприведенный код, сохраните и откройте в браузере:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // initialize Leaflet
      var map = L.map('map').setView({lon: 0, lat: 0}, 2);

      // add the OpenStreetMap tiles
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);

      // show the scale bar on the lower left corner
      L.control.scale().addTo(map);

      // show a marker on the map
      L.marker({lon: 0, lat: 0}).bindPopup('The center of the world').addTo(map);
    </script>
  </body>
</html>

Дополнительные ссылки

Если вы хотите:

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