Tools for development of GIS-applications

GIS WebToolKit SE

GIS WebToolKit SE – a tool for web application development. It is a library of components and classes in JavaScript.

Allows you to create web applications that display of cartographic information about the area, get information about the characteristics of map objects, create new and edit existing objects. The Toolkit provides access to the spatial data infrastructure (vector, raster, matrix maps, remote sensing data), performing special calculations. Can be used on open Linux-based systems.

GIS WebToolKit SE supports Open Geospatial Consortium (OGC) spatial data exchange protocols: Web Map Tile Service (OGC WMTS), Web Map Service (OGC WMS), Web Feature Service (OGC WFS), Web Coverage Service (OGC WCS) and additional requests to perform special calculations. Requests are performed asynchronously over HTTP using AJAX technology. The toolkit requires a jQuery and w2ui.

The GIS WebService SE map service is used as a source of geospatial data. It provides a graphical image of the map, geometry of objects and various reference information about map objects, spatial information about the terrain, calculations and measurements on the map.

To use GIS WebToolKit SE, just connect its library to the html page so that the components are loaded into the browser along with the page code as normal JavaScript files.

To work, you need a browser that supports HTML5 - Microsoft Internet Explorer 10.0 and higher, Mozilla Firefox 3.6 and higher, Opera 11.0 and higher, Apple Safari 5.0 and higher, and Chrome.

GIS WebToolKit SE is used as the basis for the GIS WebServer SE application. This application is intended for publication in the Internet environment of spatial information in the form of a graphic image, as well as for providing semantic information about objects.

Example of using the Toolkit

An example of the work of other classes of tools can be found here>>

How to use the Toolkit (how to connect)

  • to connect the library of scripts and styles;
  • to configure the component;
  • to create component instance.

Connecting a library of scripts and styles

<!-- connection jquery -->
<link href="jquery/jquery-ui.css" rel="stylesheet"/>
<script src="jquery/jquery-1.11.0.min.js" ></script>
<script src="jquery/jquery.browser.min.js" ></script>
<script src="jquery/jquery-ui-1.11.2.min.js" ></script>
<script src="jquery/modernizr-2.5.3.js" ></script>
<script src="jquery/jquery.maskedinput.js"></script>

<!-- connection w2ui -->
<link href="w2ui/w2ui-1.4.2.min.css" rel="stylesheet" />
<script src="w2ui/w2ui-1.4.2.min.js"></script>

<!-- connection GWTK SE -->
<link href="gwtk.css" rel="stylesheet" />
<script src="gwtkse.js"></script>

* using tools requires libraries jQuery version 1.11.0 and w2ui version 1.4.2

Configure component settings

var options = { "url": "", "id": "200", "center": [55.86, 38.349], "tilematrix": 13, "crs": 3857, "tilematrixset": "GoogleMapsCompatible", "count": 2, "maxzoom": 17, "minzoom": 0, "layers": [ { "id": "Worldmap", "alias": "Карта мира", "selectObject": 0, "url": "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=Worldmap&STYLE=default&TILEMATRIXSET=%tilematrixset&TILEMATRIX=%z&TILEROW=%y&TILECOL=%x&FORMAT=image%2Fpng", "keyssearchbyname": [] }, { "id": "googleMap", "alias": "Google карта", "selectObject": 0, "url": "" }, { "id": "osmMap", "alias": "OpenStreetMap", "selectObject": 0, "url": "" }, { "id": "dealers", "alias": "Дилеры КБ Панорама", "sheet": "Дилеры", "selectObject": 1, "legend": "*", "url": "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=dealers&STYLE=default&TILEMATRIXSET=%tilematrixset&TILEMATRIX=%z&TILEROW=%y&TILECOL=%x&FORMAT=image%2Fpng", "keyssearchbyname": ["ObjName"] }, { "id": "NoginskEdit", "alias": "Ногинский район", "sheet": "NoginskEdit", "selectObject": 1, "selectsearch": 1, "legend": "*", "url": "SERVICE=WMS&REQUEST=GetMap&VERSION=1.3.0&FORMAT=image%2Fpng&LAYERS=NoginskEdit&BBOX=%bbox&HEIGHT=%h&WIDTH=%w&CRS=%crs&dt=%dt", "keyssearchbyname": ["ObjName"] } ], "controls": [*], "url_addresssearch": ["", "Search in Yandex"] };

Creating a component instance

Map = new GWTK.Map("MapCanvas", options);

* where MapCanvas is the identifier of the HTML control on which the map will be displayed,
for example <div id="MapCanvas" style="width:600px; height:300px;"></div>