When using the GISFile JavaScript API necessary in order to API classes and functions have been loaded together with page code. The easiest way is to connect the external JavaScript-files in the header or body of HTML-document.
<body>
...
<script src="http://gisfile.com/api/1.0/?map=ukraine&width=100%&height=300" type="text/javascript" charset="utf-8"></script>
...
</body>
A note. In a standard browser's mobile operating system Android and Apple iOS versions the map zooms leads to an increase in the scale of the whole page means of a browser. To disable scalability processing, necessary to add to the head tag of the page the following code:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1" />
URL to load has the form
(http|https)://gisfile.com//?map= &
Pay attention. Components of API can be loaded over HTTP protocol, well as by HTTPS. HTTPS protocol is available only at paid access.
<script src="http://gisfile.com/1.0/?map=ukraine" type="text/javascript">
Parameters loading allow to maximally simplify map display on Web pages and applications. Using just one line of code to load JavaScript with parameters possible to solve many common tasks. A line of code can receive in the designer maps in just a few mouse clicks. Consider in more detail parameters loading JavaScript API.
| Parameter | Description | Format | Example |
|---|---|---|---|
| map | Displays specified project map | map= |
map=ukraine |
| layer | displays said layer on the map | layer= |
layer=mp |
| type | view displaying projects of maps and a layer in the form geo-objects (shape) and tiles (tile) | type= |
type=tile (the default type=shape) |
| marker | grouping of displaying objects | marker (without additional values, used with layer) | marker |
| icon | mark displays on the map and lets you specify the name of the icons by the given coordinates lat and lon | icon или icon= |
layer=spshels&icon=icon-red, icon, icon=icon-green |
| name | name of the object | name= |
name=Hello world |
| xname | name of the object in Hex format | xname= |
xname=d09fd180d0b8d0b2d0b ... |
| note | description of the object | note= |
note=Welcome! GISFile |
| xnote | description of the object in Hex format | xnote= |
xnote=d09fd180d0b8d0b2d0b5 ... |
| lon | longitude | lon= |
lon=49.03787 |
| lat | latitude | lat= |
lat=2.28516 |
| z | map scale | z= |
z=5 |
| s | display the search panel of objects | s= |
s=0 |
JavaScript API can connect manually, for this necessary to add in the header of the document opened the library GISFile and LeafLet, as shown in the example below. Such a connection method allows users to solve non-standard tasks and allows be combined display of map layers and projects.
<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 is an addition to the library LeafLet, respectively, can be combined opportunities LeafLet with GISFile. Us rewrite example of the mapped above using components L.map and 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>
You can free download the JavaScript Gisfile from the Github repository and use in their own projects.
JavaScript API components and projects maps are always loaded asynchronously, even in the case where is used a script tag without parameters for asynchronous loading.