Як додати карту Leaflet на сайт

Потрібно додати карту з місцезнаходженям офісу чи магазину на сайт? Ви можете скористатись Google Maps чи картами від Яндексу. Але карти від Гугла не зовсім безкоштовні – якщо у Вас сайт з великою відвідуваністю знайте, що ці карти мають ліміт на перегляд. Ну а з картами від Яндексу теж є проблемка, як загалом з Яндексом в Україні. Тому ці карти просто не будуть відображатись на сайті. До того ж вони тормозять сайт взагалі.

Яка ж альтернатива гугл мапс чи картам від яндексу? Пропоную познайомитись з Leaflet. Можливо, вони не такі красиві на перший погляд, але виконують свою функцію досить непогано і не впливають на швидкість чи роботу сайту.

Додати карти Leaflet на сайт можна маючи доступ до файлової структури сайту. При чому не важливо, чи Ви додаєте карти на сайт на WordPress, чи будь яку іншу CMS або взагалі самописний сайт.

Для додавання карт від Leaflet потрібно спочатку між тегами <head></head> вставити посилання на файл стилів:

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

В футер вставляємо посилання на файл скрипту:

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

Наступним кроком буде створення нового файлу з розширенням js. Можете його помістити у папку з іншими скриптами. Назва файлу може бути будь якою, наприклад, leaflet.js. На цьому етапі варто зазначити, що шлях до цього файлу потрібно буде теж добавити в футер перед закриваючим тегом </body>. Також зверніть увагу, що посилання повинно бути нижче того, що зазначене вище. В іншому випадку карти на сайті не працюватимуть.

Якщо у Вас всі скрипти лежать в папці js, яка розміщена в корні сайту,то шлях може виглядати таким чином:

<script src="/js/leaflet.js"></script>

У файл leaflet.js додаємо код:

        var coordinates = [50.450923, 30.522761];

        var map = L.map('mapid', {
            center: coordinates,
            maxZoom: 22,
            scrollWheelZoom: true,
            attributionControl: true,
          preferCanvas: false,
            zoom: 18
        });

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYnV0b3JkIiwiYSI6ImNqdWUxdnNjeTA4M2Y0NHBpeWh0YnkzcTgifQ.fQnb3RrxLCwW5RgGRBFXNw', {
            maxZoom: 18,
            id: 'mapbox.outdoors'
        }).addTo(map);
        var marker = L.marker([50.450923, 30.522761]).addTo(map);

Думаю, варто трохи розібрати код виклику карти для сайту:

  • var coordinates = [50.450923, 30.522761]; – у квадратні дужки вписуємо координати місцевості. У прикладі вписані координати Майдану Незалежності в Києві.
  • var map = L.map(‘mapid’ – тут варто звернути увагу на слово mapid. Про нього почитаєте нижче.
  • maxZoom: 22 – максимальне значення приближення для карти, яка буде на Вашому сайті.
  • scrollWheelZoom: true – може мати значення true чи false. Включає чи відключає можливість приближення чи віддалення з допомогою колесика мишки.
  • zoom: 18 – початкове значення зуму. Чим число більше, тим ближче карта до центру координат.
  • var marker = L.marker([50.450923, 30.522761]).addTo(map); – координати маркера на карті

Це основні налаштування, які Ви можете змінити при додаванні карти Leaflet для сайту.

Додати карту Leaflet на сайті Ви можете в будь якому місці. Для її показу достатньо лише в бажаному місці вставити елемент div:

 <div id="mapid"></div>

Вище я писав, щоб Ви звернули увагу на слово mapid. Це унікальний ідентифікатор. Не обов’язково використовувати саме слово mapid. Можна будь яке інше. Головне, щоб в цих двох кодах виклику карти вони були одинакові.

Останім штрихом додавання карти на сайт буде пропис стилю для карти. У файлі стилів достатньо вказати висоту карти, щоб побачити її. Наприклад, додайте:

#mapid { height: 180px; }

Тут знову ж таки використовуємо унікальний ідентифікатор.

Якщо Ви хочете створити дочірню тему у Вордпресі, то зважайте на те, що при наявності окремого хедера чи футера у дочірній темі саме туди потрібно додавати посилання для підключення стилів і скриптів карти для сайту.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *