Швидкий старт


GISFile JavaScript API - це набір JavaScript-компонентів, що дозволяє розміщати на сторінках сайту інтерактивні карти. Для того, щоб вставити карту на Веб-сторінку, виконайте дії описані нижче.

Крок 1. Підключіть API

Перш ніж використовувати функції API, необхідно вставити JavaScript-файл.
Для цього додайте в тіло body HTML-сторінки рядок наступного виду:

<body>
    ...
    <script src="http://gisfile.com/api/1.0/?lat=50.450&lon=30.524&z=11&width=100%&height=300" type="text/javascript" charset="utf-8"></script>
    ...
</body>

За адресою http://gisfile.com/api/1.0/ знаходиться JavaScript завантажувач, який при зверненні до нього підключає потрібні JavaScript API компоненти.

Крок 2. Заповніть параметри відображення карти

У рядку src для завантаження JavaScript, заповніть параметри відображення карти: lat=50.450 - широта, lon=30.524 - довгота, z=11 - масштаб, width=100% - ширина контейнера карти, height=300 - висота контейнера.


Порада. Унікальний ідентифікатор (id) контейнера також можна використовувати, тільки в цьому випадку необхідно JavaScript-файл з параметром id вставити в блок head, а в тілі body вставити контейнер.
<head>
    ...
    <script src="http://gisfile.com/api/1.0/?icon=gisfile&name=Київ&note=Столиця України&lat=50.450&lon=30.524&z=16&id=map" type="text/javascript" charset="utf-8"></script>
    ...
</head>
<body>
    ...
    <div id="map" style="width: 100%; height: 300px"></div>
    ...
</body>
Крок 3. Додайте мітку на карту

Відобразити мітку, можна за допомогою параметра icon. Значення icon=gisfile-blue дозволяє вказати найменування іконки для мітки. Щоб при натисканні кнопкою миші на мітці, відображалася додаткова інформація можна заповнити параметри name та/або note. Для відображення шару використовуйте параметр layer=найменування шару, для відображення карти map=найменування карти.


Порада. Якщо Ви використовуєте кириличний текст в параметрах name або note, для коректного відображення, кодування Веб-сторінки має бути UTF-8. При іншому кодуванні тексту або тексту з елементами Html використовуйте параметри xname або xnote в Hex форматі.

Результат

Повний текст прикладу:

<html>
<head>
    <title>Швидкий старт. Розміщення інтерактивної карти на сторінці</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <script src="http://gisfile.com/api/1.0/?icon=gisfile&name=Київ&note=Столиця України&lat=50.450&lon=30.524&z=16&width=100%&height=300" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Не вдалося?

Якщо при роботі з JavaScript API у Вас виникли додаткові питання, подивіться за посиланнями додаткову інформацію або надішліть нам Ваше питання за допомогою форми зворотнього зв'язку.