При використанні GISFile JavaScript API необхідно, щоб API класи та функції були завантажені разом з кодом сторінки. Найпростішим способом є підключення зовнішніх JavaScript-файлів у заголовку або тілі HTML-документа.
<body>
...
<script src="http://gisfile.com/api/1.0/?map=ukraine&width=100%&height=300" type="text/javascript" charset="utf-8"></script>
...
</body>
Примітка. У стандартному браузері мобільної операційної системи Android і Apple iOS версії масштабування карти призводить до збільшення масштабу всієї сторінки засобами браузера. Для того, щоб відключити обробку масштабування, необхідно додати в тег head сторінки наступний код:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1" />
URL для завантаження має вигляд
(http|https)://gisfile.com/<номер версії>/?map=<ідентифікатор карти>&<додаткові параметри>
Зверніть увагу. Компоненти API можуть бути завантажені як по протоколу HTTP, так і по HTTPS. HTTPS протокол доступний тільки при платному доступі.
<script src="http://gisfile.com/1.0/?map=ukraine" type="text/javascript">
Параметри завантаження дозволяють максимально спростити відображення карти на Веб-сторінках та в програмах. Використовуючи всього один рядок коду для завантаження JavaScript з параметрами можна вирішити безліч стандартних завдань. Рядок коду можна отримати в дизайнері карт всього в кілька кліків мишки. Розглянемо докладніше параметри завантаження JavaScript API.
| Параметр | Опис | Формат | Приклад |
|---|---|---|---|
| map | відображає зазначений проект карти | map=<ідентифікатор проекту карти> | map=ukraine |
| layer | відображає зазначений шар на карті | layer=<ідентифікатор шару> | layer=mp |
| type | вид відображення проекти карти і шару у вигляді гео-об'єктів (shape) і тайлів (tile) | type=<вид відображення> (використовується з layer або map) | type=tile (за замовчуванням type=shape) |
| marker | групування відображення об'єктів | marker (без додаткових значень, використовується з layer) | marker |
| icon | відображає мітку на карті і дозволяє вказати найменування іконки за заданими координатами lat і lon | icon або icon=<найменування іконки або повний шлях до неї> (якщо параметри icon, layer або map не задані, мітка не відображається) | layer=spshels&icon=icon-red, icon, icon=icon-green |
| name | найменування об'єкта | name=<текст> (відображається при натисканні на мітку) | name=Hello world |
| xname | найменування об'єкта в Hex форматі | xname= |
xname=d09fd180d0b8d0b2d0b ... |
| note | опис об'єкта | note=<текст> (відображається при натисканні на мітку) | note=Welcome! GISFile |
| xnote | опис об'єкта в Hex форматі | xnote= |
xnote=d09fd180d0b8d0b2d0b5 ... |
| lon | довгота | lon=<число> | lon=49.03787 |
| lat | широта | lat=<число> | lat=2.28516 |
| z | масштаб карти | z=<число від 0 до 19> (за замовчуванням 6) | z=5 |
| s | відображення панелі пошуку об'єктів | s=<значення 0 або 1> (за замовчуванням 1) | s=0 |
JavaScript API можна підключати в ручну, для цього необхідно додати в заголовку документа відкриті бібліотеки GISFile і LeafLet, як показано в прикладі нижче. Такий спосіб підключення надає користувачам можливість вирішення не стандартних завдань і дозволяє комбінувати відображення на карті проектів і шарів.
<html>
<head>
<link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
<link rel="stylesheet" href="http://gisfile.com/css/gisfile.css" />
<script src="http://gisfile.com/js/leaflet.js"></script>
<script src="http://gisfile.com/js/gisfile.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<script type="text/javascript">
var gis = new L.gis("map", {
center: [48.546, 31.201],
zoom: 5
});
if (gis) {
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
gis.addLayer( osm);
gis.map( 'ukraine');
}
</script>
</body>
</html>
JavaScript GISFile є доповненням до бібліотеки LeafLet, відповідно, можна комбінувати можливості LeafLet з GISFile. Перепишемо приклад відображений вище з використанням компонентів L.map і L.GisFile.
<html>
<head>
<link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
<link rel="stylesheet" href="http://gisfile.com/css/gisfile.css" />
<script src="http://gisfile.com/js/leaflet.js"></script>
<script src="http://gisfile.com/js/gisfile.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<script type="text/javascript">
var map = new L.map("map", {
center: [48.546, 31.201],
zoom: 5
});
if (map) {
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer( osm);
var project = new L.GisFile.Map( 'ukraine');
map.addLayer(project);
}
</script>
</body>
</html>
JavaScript GISFile маєте можливість безкоштовно завантажити з репозиторія на Github та використовувати у власних проектах.
JavaScript API компоненти та проекти карт завжди завантажуються асинхронно, навіть у випадку, коли використовується тег script без параметрів для асинхронного завантаження.