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