При использовании 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 ... |
| lat | широта | lat=<число> | lat=49.03787 |
| lon | долгота | lon=<число> | lon=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 без параметров для асинхронной загрузки.