Connect API


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.

Сonnection 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>

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 API

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= (used to layer or map) 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= (if parameters icon, layer or map is not specified, mark is not displayed) layer=spshels&icon=icon-red, icon, icon=icon-green
name name of the object name= (displayed when you click on mark) name=Hello world
xname name of the object in Hex format xname= (used instead of the name, if the encoding is not UTF-8) xname=d09fd180d0b8d0b2d0b ...
note description of the object note= (displayed when you click on mark) note=Welcome! GISFile
xnote description of the object in Hex format xnote= (used instead of the name, if using special characters) xnote=d09fd180d0b8d0b2d0b5 ...
lon longitude lon= lon=49.03787
lat latitude lat= lat=2.28516
z map scale z= (default 6) z=5
s display the search panel of objects s= (default 1) s=0

Using the GISFile and LeafLet

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>

Gisfile repository

You can free download the JavaScript Gisfile from the Github repository and use in their own projects.

Readiness API

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.