JavaScript API 1.0

The dynamic layer

To display the vector layer on the map is possible to use the above methods, but they display a objects after loading the entire layer. To perform the download and display of objects in the dynamics or only for the displayed area, can be used the method portioned loading of objects in background.

Connecting a dynamic layer Leaflet

<html>
    <head>
        <link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
        <script src="http://gisfile.com/js/jquery.min.js"></script>
        <script src="http://gisfile.com/js/leaflet.js"></script>
        <script src="http://gisfile.com/js/leaflet.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);

                if (L.GISFileAPI) {
                    new L.GISFileAPI({layer:'areas',popup:false}).addTo(map);
                }
            }
        </script>
    </body>
</html>
 

Download settings API

Download settings allow to simplify the map display on Web pages and applications. By using just one line of code for loading the JavaScript with parameters is possible to solve many common tasks. The line of code can be obtained in the designer maps in just a few mouse clicks. Consider the details the parameters loading JavaScript API.

ParameterDescription FormatExample
layer Displays said layer on the map layer:'<identifier of layer>' layer:'SPworld'
field the name of the field in the layer field:"Field Name" field:"uid"
ids array of identifiers ids:[{"Field Name":"Object code"}] ids:[{ "Id": 125}, { "Id": 20}, { "Id": 435}]
name field name in the array of identifiers name:"Field Name" name:"id"
filter filter of objects filter":{"Field Name":"Value"} filter:"{uid:[728,20]}"
count The packet size of objects count:the number of count:100 (default 100)
caching Caching queries on the server caching: (true, false) default true
inbox Download the objects to the visible region inbox: (true, false) default false
popup Popup window popup: (true, false) default true
minZoom the minimum scale minZoom:the value (value from 1 to 19) minZoom:10
maxZoom the maximum scale maxZoom:the value (value from 1 to 19) maxZoom:19
style Styles function for objects    
onEachFeature function for processing objects    
attribution the information of layer attribution:"html text" attribution:'GISFile.com'

Display the layer with its own display parameters and popup window

<html>
    <head>
        <link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
        <script src="http://gisfile.com/js/jquery.min.js"></script>
        <script src="http://gisfile.com/js/leaflet.js"></script>
        <script src="http://gisfile.com/js/leaflet.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);

                if (L.GISFileAPI) 
                {
                    var gisfile = new L.GISFileAPI({
                        layer : 'USAStates',
                        style: function(feature) {
var color = "#f1e9a0";
                            var styles = [{"value":["California"],"color":"#f2c8e7"},{"value":["Delaware"],"color":"#ebbbde"},{"value":["Washington"],"color":"#850d6d"}];
                            var val = feature.properties[ "state_name"];
                            
                            if (val) {
                                for (var s in styles) {
                                    var st = styles[ s];
                                    
                                    if (st.value == val)
                                        color = st.color;
                                }
                            }

                            return {"fillColor": color,"fillOpacity":0.3,"color":"#e2b823","opacity":0.5,"weight":1};
                        }, 
                        onEachFeature: function(feature, layer) 
                        {
                            var items = feature.properties; 
                            var popupContent = items.state_name;
                            layer.bindPopup(popupContent);
                        }
                    });        
                    gisfile.addTo(map);
                }
            }
        </script>
    </body>
</html>