Подключение API


При использовании GISFile JavaScript API необходимо, чтобы API классы и функции были загружены вместе с кодом страницы. Самым простым способом является подключение внешних JavaScript-файлов в заголовке или теле HTML-документа.

Подключение JavaScript API

<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">

Параметры загрузки API

Параметры загрузки позволяют максимально упростить отображение карты на Веб-страницах и в приложениях. Используя всего одну строчку кода для загрузки 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= (применяется вместо name, если кодировка не UTF-8) xname=d09fd180d0b8d0b2d0b ...
note описание объекта note=<текст> (отображается при нажатии на метку) note=Welcome! GISFile
xnote описание объекта в Hex формате xnote= (применяется вместо name, если используются специальные символы) 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

Использование GISFile и LeafLet

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>

Репозиторий Gisfile на Github

JavaScript GISFile можно бесплатно загрузить из репозитория на Github и использовать в собственных проектах.

Готовность API

JavaScript API компоненты и проекты карт всегда загружаются асинхронно, даже в случае, когда используется тег script без параметров для асинхронной загрузки.