KqWebMap
KqWebMap is the web client of KqGisServer developped by Javascript. It can help you to build rich, interactive maps.
Features
Theme Setting
KqWebMap can use the setting page of sidebar to set the theme. The new theme can show different display effects.
Screenshot of the Map
KqWebMap can capture the current map. You can keep the UI or remove the UI for screenshots.
Display and Tracking of Real-time Point Data
KqWebMap provides the ability to display and track real-time point data. It can move the marker point along the line, and it can lock the point for tracking.
Presentation of Buildings
KqWebMap can display 2.5D effect buildings on a map. You will be able to zoom in to a certain scale to see the 2.5D building graphics.
Author
Overview
Include Files
Add the map dom element and the script needed.
<body>
<div id="map"></div>
<script src="../../dist/jquery.min.js"></script>
<script src="../../dist/jquery-ui.min.js"></script>
<script src="../../dist/kqlibs.js"></script>
<script src="../../dist/kqwebmap.min.js"></script>
</body>
Basic Usage
- Get the configuration information that has been configured before.
- Create mapView object and set center and zoom.
- Initialize mapView object.
- After mapView object initialized, output some information.
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
KQ.Local.setLanguage('cn');
var mapView = new KQ.Map.MapView({
center: [ 30.56, 114.30 ],
zoom: 12,
maxZoom: 16,
}, 'google', 'vector');
mapView.initAsync(function () {
console.log('mapview initialized!');
});
});
Namespace
A full function name is Kq.module.class.function.
example: KQ.Map.MapConfig.getInstance()
- KQ is root namespace.
- Map is module name.
- MapConfig is class name.
- getInstance is function name.
Theme
Usage
There are two method to use theme:
Use config.xml to set the initialize theme.
<config> <theme name="default-red"></theme> </config>Use the setting page of sidebar to set the theme. When the theme is set, you can see the new theme after refreshing the page.
- If user delete the cache of browser, the theme will return back to the initialize one when you refresh the page.
Theme List
You do not need to include any theme files. The system will automatically load it.
- default-blue:
<script src="../../dist/kqcss-default-blue.js"></script> - default-red:
<script src="../../dist/kqcss-default-red.js"></script> - black-black:
<script src="../../dist/kqcss-black-black.js"></script> - blueopal-blue:
<script src="../../dist/kqcss-blueopal-blue.js"></script> - bootstrap-blue:
<script src="../../dist/kqcss-bootstrap-blue.js"></script> - fiori-blue:
<script src="../../dist/kqcss-fiori-blue.js"></script> - flat-black:
<script src="../../dist/kqcss-flat-black.js"></script> - highcontrast-purple:
<script src="../../dist/kqcss-highcontrast-purple.js"></script> - material-blue:
<script src="../../dist/kqcss-material-blue.js"></script> - materialblack-black:
<script src="../../dist/kqcss-materialblack-black.js"></script> - metro-green:
<script src="../../dist/kqcss-metro-green.js"></script> - metroblack-black:
<script src="../../dist/kqcss-metroblack-black.js"></script> - moonlight-black:
<script src="../../dist/kqcss-moonlight-black.js"></script> - nova-red:
<script src="../../dist/kqcss-nova-red.js"></script> - office365-blue:
<script src="../../dist/kqcss-office365-blue.js"></script> - silver-blue:
<script src="../../dist/kqcss-silver-blue.js"></script> - uniform-gray:
<script src="../../dist/kqcss-uniform-gray.js"></script>
Screenshot
default-blue
default-red
black-black
blueopal-blue
bootstrap-blue
fiori-blue
flat-black
highcontrast-purple
material-blue
materialblack-black
metro-green
metroblack-black
moonlight-black
nova-red
office365-blue
silver-blue
uniform-gray
UI Garage
default-blue
default-red
black-black
blueopal-blue
bootstrap-blue
fiori-blue
flat-black
highcontrast-purple
material-blue
materialblack-black
metro-green
metroblack-black
moonlight-black
nova-red
office365-blue
silver-blue
uniform-gray
Basic Function
Set Map Loading
Display a loading message when files are loading. This function is used for the network speed is very very slow.
How To Set
- Add css file in the head of html file.
<head> <link href="../../dist/kqmaploading.min.css" rel="stylesheet" type="text/css"> </head> - Add 'loading' class on map div.
<div id="map" style="height: 100%;" class="loading"> </div> - Add loading text in the map div and add 'kqmaploadingtxt' class on it.
<div id="map" style="height: 100%;" class="loading"> <div class="kqmaploadingtxt">Loading...</div> </div>
Set Draw Option
See: setDrawOption
Export / Import Txt
You can set draw option to enable export / import txt function. The setting must be done before the initialization of mapview.
- After config object is initialized, set the draw option:
config.initAsync('', false, function () { config.setDrawOption({ isUseTxt: true, importTxtFunction: function () { console.log('my importTxt!!!'); }, exportTxtFunction: function () { console.log('my exportTxt!!!'); }, }); }); - Then the export / import toolbar will have 'txt' mode.
- When export or import button is clicked, will run the function in option.
Export / Import Excel
You can set draw option to enable export / import excel function.
- After config object is initialized, set the draw option:
config.initAsync('', false, function () { config.setDrawOption({ isUseExcel: true, importExcelFunction: function () { console.log('my importExcel!!!'); }, exportExcelFunction: function () { console.log('my exportExcel!!!'); }, }); }); - Then the export / import toolbar will have 'excel' mode.
- When export or import button is clicked, will run the function in option.
Export / Import Dwg, Dxf
You can set the draw option to enable the export / import Dwg, Dxf function.
When the config object is initialized, set the draw option:
config.initAsync('', false, function () { config.setDrawOption({ dataFormatList: ['D']; importExcelFunction: function () { console.log('my importDwgDxf!!!'); config._resetDrawImportFileHtml(); }, exportExcelFunction: function () { console.log('my exportDwgDxf!!!'); }, }); });- If normal, the export / import toolbar will have the DWG, DXF mode.
- When the export or import button is clicked, the function will be run.
Import post processing
You can set the draw option to set the import postprocessing function.
When the config object is initialized, set the draw option:
config.initAsync('', false, function () { config.setDrawOption({ onImportedFunction: function (geojson) { console.log('onImported!'); geojson.eachLayer(function (layer) { layer.bindPopup('Hello', { autoClose: false, closeOnClick: false, }); layer.openPopup(); }); }, }); });- If normal, the function will be executed when GeoJSON and Shape are imported.
Use screenshot
You can screenshot the map screen，can capture UI or remove UI for a screenshot Screenshot support KqMapping，WMTS，Mark，GeoJSON...
Add Screenshot Control
Enable the screenshot function in the configuration file:
<control position="topright" type="screenshot"/>
Functional Specification
Click the screenshot button to take the screenshot. Click the display button to control whether the UI is displayed in the screenshot.There are two modes: keep the UI or remove the UI.
Result:
Use API
You can screenshot by API. Function prototype: doRectScreenShot(x, y, w, h)，(x, y):topleft w:width h:height
See the following code:
var screenshot = KQ.Control.Manager.getInstance().getControl('screenshot');
screenshot.doRectScreenShot(100, 100, 400, 400);
Icons
Add icon to the web control
Add Icon
Using font awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
PS: you can also add icons by yourself with common css and picture.
Example
Basic Icons
You can place Font Awesome icons just about anywher e using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a is more semantically correct).
<i class="fa fa-camera-retro"></i> fa-camera-retro
Larger Icons
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Set Rubber Band Option
See: setRubberBandOption
Custom Callback Function
You can customize the callback function of the box selection button. The setting must be done before the initialization of mapview.
In the config.xml configuration file, add the rubber band control: <subcontrol type="rubber-band"/>
After config object is initialized, set the rubber band option:
config.initAsync('', false, function () { // customize callback function config.setRubberBandOption({rubberBandFunction: function (bounds) { // bounds 105.00828568080212,29.978604497692796,105.58946814211257,30.361803043687907 console.log('bounds ' + bounds.toBBoxString()); }}); });
Query
Query information from the server
See: InfoQuery
Info Query
Query information of the specific layers in the particular range
var queryInfo = KQ.Query.InfoQuery.getInstance();
console.log(queryInfo);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
layerId: 145,
pageSize: '200',
geometry: '{"type":"Polygon","coordinates":[[[104.94105475249448,29.97276304931208],
[104.94105475249448,30.028839993667194],
[105.00551176529433,30.028839993667194],
[105.00551176529433,29.97276304931208],
[104.94105475249448,29.97276304931208]]]}',
fields: 'OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ',
f: 'json',
where: '',
};
queryInfo.queryAsync(options,
function query_good () {
console.log('query_good');
var data = queryInfo.data();
console.log('data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
SQL Query
SQL query information from the server.
See: SqlQuery
var sql_query = KQ.Query.SqlQuery.getInstance();
console.log(sql_query);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
sql: "select distinct " + "XZBM" + " from " + "$$" + 145 + "$$",
};
sql_query.queryAsync(options,
function query_good () {
console.log('query_good');
var data = sql_query.data();
console.log('sql query data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Overlay Analysis
Overlay analysis from the server.
See: OverlayAnalysis
var overlay_analysis = KQ.Query.OverlayAnalysis.getInstance();
console.log(overlay_analysis);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
layerId: 145,
pageSize: '200',
geometry: '{"type":"Polygon","coordinates":[[[104.94105475249448,29.97276304931208],[104.94105475249448,30.028839993667194],[105.00551176529433,30.028839993667194],[105.00551176529433,29.97276304931208],[104.94105475249448,29.97276304931208]]]}',
fields: 'OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ',
f: 'json',
where: '',
};
overlay_analysis.queryAsync(options,
function query_good () {
console.log('query_good');
var data = overlay_analysis.data();
console.log('overlay analysis data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Legend Query
Legend query information from the server.
See: LegendQuery
var legend_query = KQ.Query.LegendQuery.getInstance();
console.log(legend_query);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
layerId: 137,
};
legend_query.queryAsync(options,
function query_good () {
console.log('query_good');
var data = legend_query.data();
console.log('legend query data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Buffer Analysis
Buffer analysis of the specific graphics from the server.
See: BufferAnalysis
var buffer_analysis = KQ.Query.BufferAnalysis.getInstance();
console.log(buffer_analysis);
try {
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services',
data: '{"type":"Polygon","coordinates":[[[104.94105475249448,29.97276304931208],[104.94105475249448,30.028839993667194],[105.00551176529433,30.028839993667194],[105.00551176529433,29.97276304931208],[104.94105475249448,29.97276304931208]]]}',
geoSRS: 'EPSG:4326',
outSRS: 'EPSG:4326',
sideType: 'outer',
radius: 10000.0,
};
buffer_analysis.queryAsync(options,
function query_good () {
console.log('query_good');
var data = buffer_analysis.data();
console.log('buffer analysis data.length:' + data.length);
data.forEach(function (d) {
console.log(d);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Feature Import
Import a given feature dataset into the specific layer.
See: FeatureImport
var feature_import = KQ.Query.FeatureImport.getInstance();
console.log(feature_import);
try {
var json_data = {
"type": "Feature",
"ID": "Feature1",
"geometry": {
"type": "Polygon",
"coordinates": [[[105.357937, 30.100403], [105.357937, 30.103263], [105.36324, 30.103263], [105.36324, 30.100403], [105.357937, 30.100403]]]
},
"properties": {
"BSM": 2075,
"BZ": " ",
"DJH": "5120210010110323000",
"DWXZ": "2",
"DZ": " ",
"FHDM": " ",
"FZMJ": 0.0,
"HYDM": " ",
"ISZY": " ",
"JDLH": " ",
"JZMD": 0.47000000000000005,
"JZMJ": 4343.61,
"JZRJL": 3.2600000000000004,
"JZWLX": " ",
"JZWZDMJ": 622.12,
"NZ": " ",
"OBJECTID": 200,
"QDJG": 0.0,
"QLR": "卫生局杨文礼等",
"QSDWDM": "512021001011",
"QSXZ": "20",
"QSXZMC": "国有土地使用权",
"SBDJ": 0.0,
"SCMJ": 0.0,
"SFFZ": 0,
"SM": " ",
"SYQLX": "2",
"SYQX": " ",
"SZTF": " ",
"TDJB": " ",
"TDYT": "071",
"TDZH": " ",
"TDZL": "学沟湾路242",
"TXDZ": " ",
"TXQL": " ",
"XDLH": "071",
"XZ": " ",
"YBDJH": "21-1-11-323",
"YSDJH": " ",
"YSDM": "16110000",
"YTDZH": " ",
"ZDID": 2075,
"ZDMJ": 1331.1860000000002,
"ZDTZM": " ",
"ZGBM": " ",
"ZLDWDM": "512021001000",
"ZZRQ": "2010/12/29"
}
};
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services/zy',
layerId: 77,
forceImport: true,
data: JSON.stringify(json_data),
geoSRS: 'EPSG:4326',
};
feature_import.queryAsync(options,
function query_good() {
console.log('query_good');
var data = feature_import.data();
console.log('feature import data.length:' + data.length);
data.forEach(function (d) {
console.log(d.ID);
})
},
function query_error() {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Feature Update
Update a given feature dataset into the specific layer.
See: FeatureUpdate
var feature_update = KQ.Query.FeatureUpdate.getInstance();
console.log(feature_update);
try {
var json_data = {
"type": "Feature",
"ID": "Feature1",
"where": "objectid=21094",
"geometry": {
"type": "Polygon",
"coordinates": [[[105.357365, 30.09963], [105.357365, 30.100066], [105.363172, 30.100066], [105.363172, 30.09963], [105.357365, 30.09963]]]
},
"properties": {
"BSM": 2075,
"BZ": " ",
"DJH": "5120210010110323000",
"DWXZ": "2",
"DZ": " ",
"FHDM": " ",
"FZMJ": 0.0,
"HYDM": " ",
"ISZY": " ",
"JDLH": " ",
"JZMD": 0.47000000000000005,
"JZMJ": 4343.61,
"JZRJL": 3.2600000000000004,
"JZWLX": " ",
"JZWZDMJ": 622.12,
"NZ": " ",
"OBJECTID": 200,
"QDJG": 0.0,
"QLR": "卫生局杨文礼等",
"QSDWDM": "512021001011",
"QSXZ": "20",
"QSXZMC": "国有土地使用权",
"SBDJ": 0.0,
"SCMJ": 0.0,
"SFFZ": 0,
"SM": " ",
"SYQLX": "2",
"SYQX": " ",
"SZTF": " ",
"TDJB": " ",
"TDYT": "071",
"TDZH": " ",
"TDZL": "学沟湾路242",
"TXDZ": " ",
"TXQL": " ",
"XDLH": "071",
"XZ": " ",
"YBDJH": "21-1-11-323",
"YSDJH": " ",
"YSDM": "16110000",
"YTDZH": " ",
"ZDID": 2075,
"ZDMJ": 1331.1860000000002,
"ZDTZM": " ",
"ZGBM": " ",
"ZLDWDM": "512021001000",
"ZZRQ": "2010/12/29"
}
};
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services/zy',
layerId: 77,
forceImport: true,
data: JSON.stringify(json_data),
geoSRS: 'EPSG:4326',
};
feature_update.queryAsync(options,
function query_good() {
console.log('query_good');
var data = feature_update.data();
console.log('feature update data.length:' + data.length);
data.forEach(function (d) {
console.log(d.ID);
})
},
function query_error() {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Feature Delete
Delete a given feature from the specific layer.
See: FeatureDelete
var feature_delete = KQ.Query.FeatureDelete.getInstance();
console.log(feature_delete);
try {
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services/zy',
layerId: 77,
where: 'objectid=21337',
};
feature_delete.queryAsync(options,
function query_good() {
console.log('query_good');
var data = feature_delete.data();
console.log('feature delete data.length:' + data.length);
data.forEach(function (d) {
console.log("Feature query count: " + d.querycount);
console.log("Feature delete count: " + d.deletecount);
})
},
function query_error() {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
Result:
Projection Transform
Represents a class to transform point coordinates from one coordinate system to another.
See: ProjectionTransform
Transform Forward
Coordinate transformation forward.
var sourProjection = 'PROJCS["NAD83 / Massachusetts Mainland",GEOGCS["NAD83",DATUM["North_American_Datum_1983"' +
',SPHEROID["GRS 1980",6378137,298.257222101,AUTHORITY["EPSG","7019"]],AUTHORITY["EPSG","6269"]]' +
',PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.01745329251994328,AUTHORITY["EPSG","9122"]]' +
',AUTHORITY["EPSG","4269"]],UNIT["metre",1,AUTHORITY["EPSG","9001"]],PROJECTION["Lambert_Conformal_Conic_2SP"]' +
',PARAMETER["standard_parallel_1",42.68333333333333],PARAMETER["standard_parallel_2",41.71666666666667],PARAMETER["latitude_of_origin",41]' +
',PARAMETER["central_meridian",-71.5],PARAMETER["false_easting",200000],PARAMETER["false_northing",750000],AUTHORITY["EPSG","26986"]' +
',AXIS["X",EAST],AXIS["Y",NORTH]]';
var destProjection = "+proj=gnom +lat_0=90 +lon_0=0 +x_0=6300000 +y_0=6300000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
var transform = new KQ.Projection.ProjectionTransform(sourProjection, destProjection);
// -2690666.297734447, 3662659.88545992
transform.transformForward([2,5]);
Transform Inverse
Coordinate transformation inverse.
var sourProjection = 'PROJCS["NAD83 / Massachusetts Mainland",GEOGCS["NAD83",DATUM["North_American_Datum_1983"' +
',SPHEROID["GRS 1980",6378137,298.257222101,AUTHORITY["EPSG","7019"]],AUTHORITY["EPSG","6269"]]' +
',PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.01745329251994328,AUTHORITY["EPSG","9122"]]' +
',AUTHORITY["EPSG","4269"]],UNIT["metre",1,AUTHORITY["EPSG","9001"]],PROJECTION["Lambert_Conformal_Conic_2SP"]' +
',PARAMETER["standard_parallel_1",42.68333333333333],PARAMETER["standard_parallel_2",41.71666666666667],PARAMETER["latitude_of_origin",41]' +
',PARAMETER["central_meridian",-71.5],PARAMETER["false_easting",200000],PARAMETER["false_northing",750000],AUTHORITY["EPSG","26986"]' +
',AXIS["X",EAST],AXIS["Y",NORTH]]';
var destProjection = "+proj=gnom +lat_0=90 +lon_0=0 +x_0=6300000 +y_0=6300000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
var transform = new KQ.Projection.ProjectionTransform(sourProjection, destProjection);
// 1.9999999992433004, 4.999999960884452
transform.transfromInverse([-2690666.297734447, 3662659.88545992]);
Projections Predefined
ProjectionTransform has some projections predefined.
// ProjectionTransform has the following projections predefined:
// 'EPSG:4326', which has the following alias
// 'WGS84'
// 'EPSG:4269'
// 'EPSG:3857', which has the following aliases
// 'EPSG:3785'
// 'GOOGLE'
// 'EPSG:900913'
// 'EPSG:102113'
var transform = new KQ.Projection.ProjectionTransform('EPSG:4326', 'EPSG:3857');
// 12724930.992579103, 3570567.652113043
transform.transformForward([114.31, 30.52]);
Advanced Function
Permission
Control function availability by permission.
Basic Usage
Set permission of controls in config.xml. If no permission, the control will not be displaybr.
controlTree of sidebar must have permission 3
controlAdvancedQuery of sidebar must have permission 3
controlOverlayAnalysis of sidebar have no permission limit
controlSetting of sidebar must have permission 1
input control must have permission 3<control position="topleft" type="sidebar"> <subcontrol type="tree" id="controlTree" permission="3"/> <subcontrol type="advanced" id="controlAdvancedQuery" permission="3"/> <subcontrol type="overlay" id="controlOverlayAnalysis"/> <subcontrol type="setting" id="controlSetting" permission="1"/> </control> <control position="topright" type="input" icon="search" width="200px" permission="3"/>Set permission of layers in config.xml. 'Base' layer must have permission 1. Because the layer is a layer group, so all children layer will have the same permission except the children layer set another permission. For example, because 'City' layer do not have another permission, so it will have the parent's permission(1). 'Section_0' layer have another permission(1 3), so it's permission is 1 and 3.
'Base' layer must have permission 1
'City' layer must have permission 1
'Section_0' layer must have permission 1 or 3
'Section_1' have no permission limit<layer is_group="1" label="Base" permission="1"> <layer is_group="1" label="City"> <layer src_name="source0" icon="compound_layer" id="73" is_dynamic="1" label="Section_0" permission="1 3"/> <layer src_name="source0" icon="compound_layer" id="76" is_dynamic="1" label="Section_1"/> </layer> </layer>Set permission to mapview object
var mapView = new KQ.Map.MapView({ permission: [1], });- If there is no error occurred, the controls and the layers that have no permissions will not displayed in mapview.
Get Permission
var permission = mapView.getPermission();
Bind Event
You can bind functions to events and respond to functions when events occur.
See: MapView
Map Click Event
Refer to the following code:
mapView.on('click', function (e) {
console.log('click position:' + e.latlng);
});
Map Resize Event
Refer to the following code:
mapView.on('resize', function (e) {
console.log('old size:' + e.oldSize);
console.log('new size:' + e.newSize);
})
Remove Event Binding
Refer to the following code：
function onClick(e) {
console.log('click position:' + e.latlng);
}
mapView.on('click', onClick); // Add binding
mapView.off('click', onClick); // Remove binding
Using Realtime Data
It provides the ability to display and track real-time point data. It can move the marker point along the line, and it can lock the point for tracking.
See: MapRealtime
Basic Usage
a. Create mapview object and initialize b. Define the options.
var realtime_options = {
interval: 1000,
popup_label: 'Colin',
popup_img: '../../testdata/person1.jpg',
};
c. Create realtime object and add it to the mapview.
var realtime = new KQ.Map.MapRealtime(null, realtime_options);
realtime.addToMapView(mapView);
Add Data
Rewrite getCoord method can provide the real data, every interval time will call this function to get the data. If you do not provide this function will use analog data, convenient to try. Note: to return (longitude and latitude) format, must be wgs84 coordinates.
var realtime_options = {
getCoord: function () {
// To get the data through the network or by other methord
return coord;
},
};
The Time Interval
The unit is milliseconds. The following settings will every 1 seconds to get a point data.
var realtime_options = {
interval: 1000,
};
Initial Popup Box
The default initial pop-up message box, not pop up when the initial set to false
var realtime_options = {
is_init_popup: true,
};
Popup Box Content
Change popup_label will set the title of the popup box, popup_img popup will set up the image
var realtime_options = {
popup_label: 'Colin',
popup_img: '../../testdata/person1.jpg',
}
Custom Marker
Markers can be set to different shapes, colors, icons.
See: add-map-marker
var realtime_options = {
"extraIcon": {
icon: 'fa-spinner fa-spin',
markerColor: 'green-dark',
shape: 'circle',
prefix: 'fa',
},
}
Custom Track
Track can be set style.
See: set-style
var realtime_options = {
"style": {
"radius": 5,
"stroke": true,
"color": "#c31b20",
"weight": 2,
"opacity": 0.5,
"fill": true,
"fillColor": "#c31b20",
"fillOpacity": 0.2,
"clickable": true,
},
}
Customize Track Maximum
Can restrict track shows that the maximum points on the map, the following settings will display only five points:
var realtime_options = {
max_track_number: 3,
}
Monitor
You can track a realtime on a map. Notice: Do not monitor two points on the map at the same time.
realtime.setFollow(true);
Set Shape Type of Track
Can be set by the options shown point tracks or linear. Default is point.
var realtime_options = {
shapeType: 'line',
}
Point: 
Line: 
Use Playback
It provides the ability to replay GPS Tracks in the form of GeoJSON objects. Rather than simply animating a marker along a polyline, the speed of the animation is synchroized to a clock. The playback functionality is similar to a video player -- you can start and stop playback, change the playback speed and so on.
See: Playback
Basic Usage
- Create MapView object and initialize it
Define the option, geojson is the data:
var playbackOptions = { geojson: demoTracks, };or:
var playbackOptions = { geojson: [track0, track1, track2, track3], };Create Playback object and add it to mapview.
var playback = new KQ.Control.Playback(playbackOptions); playback.addToMapView(mapView);
Data Format
Playback consumes GPS tracks in the form of GeoJSON. The schema of the GeoJSON data is as follows: PS: coordinates and time must have the same count. coordinates：coordinates, must be wgs84. time：time, unix time format.
{
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": [/*array of [lng,lat] coordinates*/]
},
"properties": {
"time": [/*array of UNIX timestamps*/]
}
}
Other attributes may be added to the GeoJSON object, but this is the required minimum schema for the plug-in to work.
Enable Controls
Set playback options to enable the controls.
var playbackOptions = {
// enable controls
tracksLayer : true,
playControl: true,
dateControl: true,
sliderControl: true,
// set the control position
tracksLayerPosition: 'bottomleft',
playControlPosition: 'bottomleft',
dateControlPosition: 'bottomleft',
sliderControlPosition: 'bottomleft',
};
Set Popup & Tooltip
Popup a dialog when click the marker.
a. Set playback options:
var playbackOptions = {
popups: true, // enable popups
popups_autoClose: false, // if true, the popup will auto close when you click other marker.
tooltips: true, // enable tooltips
}
b. Add the label to geojson properties, add the image to geojson properties
c. When clicking the marker, a popup will apear.
d. When mouse hovering the marker, a tooltip will apear.
e. You can disable one of them by setting the option to false.
Custom Marker
The marker can be set to diffrent shape, color, icon.
a. Add the marker info to geojson properties.
See: add-map-marker
b. Result picture.
Custom Track
The track can be set style.
a. Add the style info to geojson properties.
See: set-style
b. Result picture.
Custom Control Label
You can change the label of controls by setting playback options:
var playbackOptions = {
label_play: 'Play',
label_stop: 'Stop',
label_gpsTrack: 'GPS Track',
label_latlng: 'LatLng',
}
Start With A Popup
Add the is init popup attribute to the properties of GeoJSON
"properties": {
"is_init_popup": true,
}
Use Building
It can display 2.5D effect buildings on a map.
Configuration Layer
In the layer tree of the KqMap mapping tool, right-click on the polygon layer, set the layer to the building.
- The layer must be the polygonal layer of the house, do not set the meaningless other type of polygon layer.
- The building is just a layer that is superimposed on 2D graphics, which does not affect the 2D graphics.
- The layer must be the data from database because the graphics need to support real-time queries.
Publishing Service
After the Web service is published, you will be able to zoom in to a certain scale to see the 2.5D building graphics.
Modify Minimum Scale
If the scale is greater than the value, the house will be shown. The default value is 0.0005. In config.xml:
<config custom="1">
<building min_scale_value="0.0005"/>
...
<config/>
Modified Height Coefficient
Modify it to make the house look taller or shorter, with a default value of 1. In config.xml:
<config custom="1">
<building height_rate="1.2"/>
...
<config/>
Set Layer Height Field
You can set the field that is used as height. If the field is not set, building will use default height. In config.xml:
<config custom="1">
<tree label="layers">
...
<layers id="layers">
<layer building_height_field="FWHEIGHT" ... />
</layers>
...
<config/>
API
See: MapBuilding
- You can add and delete housing data freely
- You can change the height of your house
- You can change the color of the house walls
- You can change the color of the roof
- A roof can be added to the house
- You can use the onClick event to respond to the click
Result
Buffer Analysis
Point Buffer
Polyline Buffer
Polygon Buffer
Info Query Post-Processing
Replace Property Value
Refer to the following code:
var instance = KQ.Control.InfoQueryDialog.getInstance();
instance.addDataProcessingFunc(function (data) {
for (var key in data){
let records = data[key].records;
for (let i = 0; i < records.length; ++i){
var record = records[i];
var prop = 'BSM'
switch (record[prop]){
case 3453:
record[prop] = 6666;
break;
default:
break;
}
}
}
});
Result:
Layer Load and View
Use WMS
Be able to add a WMTS service layer to the map. Such as: using the WMS services which were published with Arcgis. This can integrate the map services of Arcgis into the system. Note: 1 In the <prj> tag of the config.xml configuration file,sets the correct projection string(wkt) 2 The type of source is WMS
Set Service Param
You need to figure out the detailed parameters of the WMS service and set it to config.xml:
<projection>
<prj>PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere",GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",
SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],
PROJECTION["Mercator_Auxiliary_Sphere"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",0.0],
PARAMETER["Standard_Parallel_1",0.0],PARAMETER["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0],AUTHORITY["EPSG",3857]]</prj> // note1: projection correct
<proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs</proj4>
<origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>
<tree label="洪山区">
<sources>
<source url="http://172.16.0.94:6080/arcgis/services/hongshanqu/MapServer/WmsServer?" type="wms" name="sourceWMS"/> // note2: type is wms
</sources>
<layers id="layers">
<layer opacity="1" src_name="sourceWMS" icon="polygon" type="sl" id="2" is_dynamic="0" label="WMS图层" tooltip_forefather="WMS图层" visible="1"/>
</layers>
</tree>
Use WMTS
Be able to add a WMTS service layer to the map. Such as: using the WMTS services which were published with Arcgis. This can integrate the map services of Arcgis into the system. Note: the projection of the WMTS service and the scale information must be fully matched with the map service to add. For example: use EPSG: 3857 and Google scale to publish.
Set Service Param
You need to figure out the detailed parameters of the WMTS service and set it to config.xml:
<tree label="HongShanQu">
<sources>
<source url="http://172.16.1.174:8699/KQGis/rest/services/hs" type="kqmapping" name="source0"/>
<source url="http://172.16.0.94:6080/arcgis/rest/services/hongshanqu/MapServer/WMTS" type="wmts" name="sourceWMTS"/>
</sources>
<layers id="layers">
<layer opacity="1" src_name="source0" map_src_name="sourceWMTS" icon="polygon" type="sl" id="1" is_dynamic="0" label="HongShanDLTB" tooltip_forefather="HongShanDLTB" visible="0" _style="default" _layer="hongshanqu" _tilematrixSet="default028mm" _format="image/png"/>
</layers>
</tree>
Explanation: Using KqGisServer and data for regular mapping and publishing, you will generate the config.xml and query related configuration files. Base on these files, add the WMTS data source to the config.xml and add relevant information to the layer. The WMTS service information, can directly access the WMTS URL to view.
| Fields | Content |
|---|---|
| map_src_name | The name of the WMTS data source used |
| style | The style of the WMTS service, reference the WMTS service parameters |
| layer | The layer of the WMTS service, reference the WMTS service parameters |
| tilematrixSet | The tilematrixSet of the WMTS service |
Scale And Projection
The projection of the WMTS service and the scale information must be fully matched with the map service to add:
<scales>
<scale id="0">0.000000001690163571602659</scale>
<scale id="1">0.000000003380327143205318</scale>
<scale id="2">0.000000006760654286410635</scale>
<scale id="3">0.00000001352130857282127</scale>
<scale id="4">0.00000002704261714564254</scale>
<scale id="5">0.00000005408523429128508</scale>
<scale id="6">0.0000001081704685825702</scale>
<scale id="7">0.0000002163409371651403</scale>
<scale id="8">0.0000004326818743302807</scale>
<scale id="9">0.0000008653637486605613</scale>
<scale id="10">0.000001730727497321123</scale>
<scale id="11">0.000003461454994642245</scale>
<scale id="12">0.000006922909989284491</scale>
<scale id="13">0.00001384581997856898</scale>
<scale id="14">0.00002769163995713796</scale>
<scale id="15">0.00005538327991427592</scale>
<scale id="16">0.0001107665598285518</scale>
</scales>
<projection>
<proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs</proj4>
<origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>
Fine-tune the map
You can fine tune the origin in config.xml, make the tianditu map match with our map.
Result
Use Tianditu
Tianditu layer can be added to the map. Notice：Use Tianditu must use the WGS 1984 Web Mercator projection and Google scale.
Set Projection
Select projection: WGS 1984 Web Mercator.
Set Scale
When the service is published, select google scale mode and start from 0 level.
Add Tianditu
Enable Tianditu in the configuration file
<control type="basemap" position="bottomright" visible="1">
<subcontrol name="Tianditu Vector" maptype="tianditu" subtype="vector" is_selected="1"></subcontrol>
<subcontrol name="Tianditu Image" maptype="tianditu" subtype="image"></subcontrol>
</control>
Config File
The map projection information must be identical to Tianditu. Such as: WGS 1984 Web Mercator and Google scale, and set them to the config.xml file:
<scales>
<scale id="0">0.000000001690163571602659</scale>
<scale id="1">0.000000003380327143205318</scale>
<scale id="2">0.000000006760654286410635</scale>
<scale id="3">0.00000001352130857282127</scale>
<scale id="4">0.00000002704261714564254</scale>
<scale id="5">0.00000005408523429128508</scale>
<scale id="6">0.0000001081704685825702</scale>
<scale id="7">0.0000002163409371651403</scale>
<scale id="8">0.0000004326818743302807</scale>
<scale id="9">0.0000008653637486605613</scale>
<scale id="10">0.000001730727497321123</scale>
<scale id="11">0.000003461454994642245</scale>
<scale id="12">0.000006922909989284491</scale>
<scale id="13">0.00001384581997856898</scale>
<scale id="14">0.00002769163995713796</scale>
<scale id="15">0.00005538327991427592</scale>
<scale id="16">0.0001107665598285518</scale>
</scales>
<projection>
<proj4>+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +units=m +no_defs </proj4>
<origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>
Modified Slightly
It can modify the origin in config.xml to make Tianditu exactly match our map.
Result
Use Layer Compare
You can compare different layers in multiple Windows. Currently, control is supported for two window comparisons, four window comparisons or using API for map comparison.
Use Controls For Comparison
a、Enable the compare function in the configuration file
<control position="topright" type="compare"/>
Explanation:
| Fields | Content |
|---|---|
| is_show_cursor | display the cursor or not |
| cursor_opacity | cursor opacity |
| cursor_color | cursor color |
| cursor_radius | cursor radius |
b、The result of two window comparisons
c、The result of four window comparisons
Compare Using Apis
a、To prepare the code for the contrast window, you can fill in the required content as needed, path:：kqwebmap/window/empty-window.html
<div id="empty-window"></div>
b、Create the window object and set the parameters
var win = new KQ.Control.Window('empty-window', {
parentID: 'map',
position: {
left: '10px',
top: '10px',
},
width: '1000px',
height: '600px',
title: 'Compare 2011 and 2009',
});
c、Initialize the window object and use the map comparing feature through the API
See: compareTwoMap
win.initAsync(function () {
win.open();
mapView.compareTwoMap({
win: win,
parentID: 'empty-window',
leftLayerInfos: [ { src_name: "source0", id: "93" }, { src_name: "source0", id: "95" }, { src_name: "source0", id: "96" }],
rightLayerInfos: [ { src_name: "source0", id: "105" }, { src_name: "source0", id: "106" }, { src_name: "source0", id: "107" }],
leftGeoJSON: left_geojson,
rightGeoJSON: right_geojson,
leftQueryLayerInfo: { src_name: "source0", id: "93" },
rightQueryLayerInfo: { src_name: "source0", id: "105" },
zoom: 9,
center: [ 30.3791, 104.9515 ],
});
win.open();
});
d、Result
Stick Layer
Stick and cancel stick the layer. After stick the layer,the layer on top of other layers display.
Default
After Stick Lezhi County
Cancel Stick Lezhi County
MaskLayerManager
Manageer mask layers add、delete...
See： MaskLayerManager
Basic Usage
Set mask layers：
var maskButtons = [];
var instance = KQ.Common.MaskLayerManager.getInstance();
var layers = instance.layers();
for (var i = 0; i < layers.length; ++i){
(function (idx) {
var button = new KQ.Control.MapButton('fa-copy fa-lg', function () {
// add mask layer
instance.addLayer(layers[idx].key);
}, layers[idx].label);
maskButtons.unshift(button);
})(i);
}
let bar = new KQ.Control.MapButtonBar(maskButtons, { position: 'topleft' });
bar.addToMapView(mapView);
Result:
Map GeoJson
Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map.
See: MapGeoJson
Usage Example
Add a default style geojson to mapview.
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[
104.91763561707054,
30.154133143258463
],
[
104.93278268710557,
30.092682588091314
],
[
105.03502903861937,
30.10582236698391
]
]
}
}
]
};
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);
Add Style
GeoJson can set style by api or options.
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.setStyle({
"pane": "overlayPane",
"nonBubblingEvents": [],
"attribution": null,
"smoothFactor": 1,
"noClip": false,
"stroke": true,
"color": "#e74c3c",
"weight": 4,
"opacity": 0.5,
"lineCap": "round",
"lineJoin": "round",
"dashArray": "15, 10, 1, 10",
"dashOffset": null,
"fill": false,
"fillColor": null,
"fillOpacity": 0.2,
"fillRule": "evenodd",
"interactive": true,
"contextmenu": false,
"contextmenuItems": [],
"contextmenuInheritItems": true,
"clickable": true
});
geojson.addToMapView(mapView);
Change Icon
If the data type is point, can change the setting of the option to change the icon, if not will use the default set.
var data = {
"type": "Feature",
"properties": {
"options": {
"icon": {
"options": {
"iconUrl": '../../images/custom-marker.png',
"iconSize": [ 25, 41 ],
"iconAnchor": [ 13, 40 ],
"shadowUrl": '../../images/marker-shadow.png',
"shadowSize": [ 25, 41 ],
"shadowAnchor": [ 8, 40 ],
},
"_initHooksCalled": true,
}
}
},
"geometry": {
"type": "Point",
"coordinates": [
104.94174817230561,
30.015712894345075,
],
},
};
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);
Zoom To GeoJson
Zoom map to the graphics.
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);
var bound = geojson.getBounds();
mapView.flyToBounds(bound);
Bind Click Event
Bind callback function to the GeoJson object. When the object is clicked, the function will be ran.
function onClick (e) {
console.log('my click!');
}
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.bindOnClick(onClick);
Map Marker
It used to display clickable/draggable icons on the map.
See: MapMarker
Add Map Marker 1
- Create MapView object and initialize it
Define the option of icons:
var icon_0 = { icon: 'fa-coffee', markerColor: 'blue', shape: 'square', prefix: 'fa', }; var icon_1 = { icon: 'fa-spinner fa-spin', markerColor: 'green-dark', shape: 'circle', prefix: 'fa', }; var icon_2 = { icon: 'fa-cog fa-spin', iconColor: 'black', markerColor: 'white', shape: 'star', prefix: 'fa', }; var icon_3 = { icon: 'fa-qq', markerColor: 'purple', shape: 'penta', prefix: 'fa', };Create MapMarker object and add it to mapview.
new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);
Add Map Marker 2
- Create MapView object and initialize it
- Create a marker icon.
PS: image must be in folder 'kqwebmap/images'.
var myIcon = new KQ.Struct.Icon({ iconUrl: '../../images/custom-marker.png', iconSize: [ 25, 41 ], iconAnchor: [ 13, 40 ], shadowUrl: '../../images/marker-shadow.png', shadowSize: [ 25, 41 ], shadowAnchor: [ 8, 40 ], }); - Create MapMarker object. If not pass icon param, it will use default icon.
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon }); - Add marker to mapview object:
marker.addToMapView(mapView); - Bind event listenner:
marker.on('dblclick', function (e) { console.log('dblclick!'); })
Add Number Marker
- Create MapView object and initialize it
Define the option of icons:
var icon_0 = { icon: 'fa-number', number: '0', markerColor: 'blue', shape: 'square', prefix: 'fa', }; var icon_1 = { icon: 'fa-number', number: '1', markerColor: 'green-dark', shape: 'circle', prefix: 'fa', }; var icon_2 = { icon: 'fa-number', number: '2', iconColor: 'black', markerColor: 'white', shape: 'star', prefix: 'fa', }; var icon_3 = { icon: 'fa-number', number: '3', markerColor: 'purple', shape: 'penta', prefix: 'fa', };Create MapMarker object and add it to mapview.
new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);
Add Alphabet Marker
- Create MapView object and initialize it
Define the option of icons:
var icon_0 = { icon: 'fa-number', number: 'A', markerColor: 'blue', shape: 'square', prefix: 'fa', }; var icon_1 = { icon: 'fa-number', number: 'B', markerColor: 'green-dark', shape: 'circle', prefix: 'fa', }; var icon_2 = { icon: 'fa-number', number: 'C', iconColor: 'black', markerColor: 'white', shape: 'star', prefix: 'fa', }; var icon_3 = { icon: 'fa-number', number: 'D', markerColor: 'purple', shape: 'penta', prefix: 'fa', };Create MapMarker object and add it to mapview.
new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);
Add Tooltip
Used to display small texts on top of map layers.
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.bindTooltip('Hello world!', {
offset: new KQ.Struct.Point(10, -30),
});
marker.addToMapView(mapView);
Add Popup
Used to open popups in certain places of the map.
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.bindPopup('Hello world!', {
offset: new KQ.Struct.Point(0, -30),
});
marker.addToMapView(mapView);
Label Marker
Used to display text messages on a map.
var marker = new KQ.Map.MapMarker([ 30, 104.70 ], { label: `<h1 style="color: red">ABC</h1>` });
marker.addToMapView(mapView);
Marker cluster
Manager the marker's add\delete...
See: MarkerCluster
Basic Usage
Manager marker:
// content in markercluster.json: [ [116.4383, 40.1471], [116.4372, 40.1458]... ]
$.get('./markercluster.json', function (data) {
var markerList = [];
var markers = new KQ.Control.MarkerCluster();
for (let i = 0; i < data.length; ++i){
var marker = new KQ.Map.MapMarker([data[i][1], data[i][0]]);
markerList.push(marker);
}
markers.addLayers(markerList);
markers.addToMapView(mapView);
})
Result:
Map Controls
Map Button
Display the button on the map and customize the response function of the click event.
See: MapButton
Add Button
Add a button on the map.
var button0 = new KQ.Control.MapButton('fa fa-globe fa-lg', function (btn, map) {
console.log('button 0 clicked!');
}, 'Press Button 0');
button0.addToMapView(mapView, 'bottomleft');
Result:
Add Button Bar
Add a button bar to the map.
See: MapButtonBar
var button0 = new KQ.Control.MapButton('fa fa-globe fa-lg', function (btn, map) {
console.log('button 0 clicked!');
}, 'Press Button 0');
var button1 = new KQ.Control.MapButton('fa fa-bug fa-lg', function (btn, map) {
console.log('button 1 clicked!');
}, 'Press Button 1');
let bar = new KQ.Control.MapButtonBar([ button0, button1 ], { position: 'topleft' });
bar.addToMapView(mapView);
Result:
Map Input
Create input control of the map.
Notice: The map could only have one input control.
See: MapInput
Bind onClick Event
Add input control by config.xml, and set event as below:
mapView.initAsync(function() {
var input = mapView.getInput();
input.setOnClick(function () {
console.log('my onclick!!!');
console.log(input.value());
})
});
Add Map Input
Add an input control to the map.
var options = {
position: 'topleft',
iconType: 'heart',
onClick: function () {
console.log('onclick!!!');
console.log(this.value());
},
}
var input = mapView.getInput();
input.setDropdownData([ 'A', 'B', 'C' ]);
input.setOnClick(function () {
console.log('my onclick!!!');
console.log(input.value());
console.log(input.dropdownValue());
});
Result:
Main Sidebar
Show a page that slides from the left or right of the map(with tab page)
See: Sidebar
Add New Tab
Add a tab on the sidebar.
- Find file and open it: 'kqwebmap/sidebar/sidebar.html'.
- Find content
<ul role="tablist">and it's end mark</ul>. Before
</ul>, add code<li><a title="new tab" href="#newtab" role="tab"><i class="fa fa-address-book"></i></a></li>.
Add Tab Content
Add tab content of the new tab.
- Find file and open it: 'kqwebmap/sidebar/sidebar.html'.
- Find content
<div class="sidebar-content"> - Below it add code
<div class="sidebar-pane" id="newtab"> <h1 class="sidebar-header">New tab<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1> <div id="controlNewTab"> <button type="submit" id="newTabButton" onclick="onButtonClick()" style="background-color: lightgrey">submit</button> <p>something new</p> </div> </div>
Add Event
Add event response function.
- Find file and open it: 'kqwebmap/sidebar/sidebar.html'.
At the end add code
<script> function onButtonClick() { console.log('newTabButton clicked'); } function sidebar_init () { console.log('function sidebar_init() run !!!'); } </script>
Result:
(fold)
(unfold)
Map Layer Tree
Control layer loading and display.
See: MapLayerTree
Set Selected Layers
Set layers selected and loading.
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
var selectedLayers = [{sourceName: "source0", layerId: "1"}, {sourceName: "source0", layerId: "2"}];
tree.selectedLayers(selectedLayers);
}
})
});
Result:
Clear Selected Layers
Clear all selected layers.
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.clearSelectedLayers();
}
})
});
Result:
Select event
Select the layer node and send select event
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.on('select', function (layer) {
console.log("key: " + layer.key + " selected: " + layer.selected); // key: 46@@144 selected: true
});
}
})
});
Add the selected layer
Add the selected layer
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.addCheckedLayer({key: "46@@144", selected: true});
}
})
});
结果：
Overlay Result Dialog
Display overlay analysis results.
See: OverlayAnalysisResultDialog
Basic Usage
Organize data source and call open function:
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
// open dialog
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource)
Result:
Set Dialog Options
Set some dialog's options, such as "width", "height", "position"...
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label :"洪山区dltb", fields: fields, titles: titles, records: records});
// set dialog's options
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource, {width: 500, height: 300, position: {
top: 100,
left: 200,
}});
Result:
Location Map Element
Setting geometry attribute at the data source and select one record, can location the map element.
var dataSource = [];
var geometry1 = {"type":"Polygon","coordinates":[[[114.36958885192871,30.65955924987793],[114.3676815032959,30.65955924987793],
[114.36747550964355,30.65949821472168],[114.36593055725098,30.659006118774414],[114.36554145812988,30.659006118774414],
[114.36528587341309,30.659025192260742],[114.36517143249512,30.659128189086914],[114.36512565612793,30.659326553344727],
[114.36519432067871,30.65955924987793],[114.35946846008301,30.65955924987793],[114.35893821716309,30.65852165222168],
[114.35722160339355,30.65379524230957],[114.35468101501465,30.64759635925293],[114.35344886779785,30.645383834838867],
[114.36039161682129,30.645383834838867],[114.36918830871582,30.649988174438477],[114.36958885192871,30.650197982788086],
[114.36958885192871,30.65955924987793]]]};
var geometry2 = {"type":"Polygon","coordinates":[[[114.36593055725098,30.659006118774414],[114.36747550964355,30.65949821472168],
[114.3676815032959,30.65955924987793],[114.36519432067871,30.65955924987793],[114.36512565612793,30.659326553344727],
[114.36517143249512,30.659128189086914],[114.36528587341309,30.659025192260742],[114.36554145812988,30.659006118774414],
[114.36593055725098,30.659006118774414]]]};
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"geometry": geometry1, "OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"geometry": geometry2, "OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
// local map element
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource);
Result:
Bind Select Event
The event handler function context (available via the this keyword) will be set to the widget instance.
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
var instance = KQ.Control.OverlayAnalysisResultDialog.getInstance();
// bind select event
instance.on('select', function (data) {
console.log(data);
}, instance);
instance.open(dataSource);
Set Statistics Field
Sets the statistical fields of overlay analysis statistics chart
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江", "areaLength": 100},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有", "areaLength": 200},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
var instance = KQ.Control.OverlayAnalysisResultDialog.getInstance();
instance.setChartFields(["BSM"]); // statistics field: BSM
instance.open(dataSource);
Result:
Setting templates
Set templates to customize the form of columns
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var templates = ['<a href="\\#">#= OBJECTID #</a>', "", "", "", "",];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records, templates: templates});
// open dialog
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource);
Result:
Display Or Hide Statistics Chart
Display Or Hide Statistics Chart
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
var instance = KQ.Control.OverlayAnalysisResultDialog.getInstance();
instance.open(dataSource, {showChart: true}); // true: display chart button false: hidden chart button
Result:
Unit conversion function
Conversion of overlapping area units, for example：square meter --> mu、square meter --> hectare...
KQ.Control.OverlayAnalysisResultDialog.getInstance().setUnitConversionOptions(
{
// conversion field
field: 'areaLength',
// conversion rule
rules: {
'square meter': function (val) {return val * 1;}, // quare meter --> quare meter
'hectare': function (val) {return val * 0.000015;}, // quare meter --> hectare
'mu': function (val) {return val * 0.0015;}, // quare meter --> mu
},
}
)
Result:
Simple Sidebar
Show a page that slides from the left or right of the map(without tab page)
See: SimpleSidebar
Add Content
Add tab content on sidebar.
- Find folder and open it: 'kqwebmap/sidebar'.
Add new file 'simplesidebar.html'.
<div id="simplesidebar"> <h1>Simple sidebar</h1> <p class="lorem"><b>A responsive sidebar plugin for for KqWebMap, a JS library for interactive maps.</b></p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <style> #simplesidebar { padding: 20px; } #simplesidebar p { padding: 10px; } #simplesidebar h1 { padding: 10px; } #simplesidebar ul { margin-left: 2em; } .lorem { text-indent: 2em; } </style>Add code in js file
var mapView = new KQ.Map.MapView(); mapView.initAsync(function () { var sidebar = new KQ.Control.SimpleSidebar({ id: 'simplesidebar', fileName: 'simplesidebar.html', closeButton: true, type: 'm', }); sidebar.initAsync(function () { mapView.addControl(sidebar); sidebar.show(); }); });Result:
ToolButton
Add ToolButton to ToolBar
After the config object is initialized, add the following code:
config.initAsync('', false, function () {
var CustomButton = KQ.Control.OperatorToolButton.extend({
options: {
type: 'custom-button',
icon: 'icon iconfont icon-excel',
},
initialize: function (map, parent) {
KQ.Control.OperatorToolButton.prototype.initialize.call(this, map, parent);
},
executeOperator: function(){
console.log('click custom button!!!');
},
});
// Add ToolButton
var toolBar = KQ.Control.Manager.getInstance().getControl('toolbar');
var customButton = new CustomButton(mapView._getMap(), toolBar.getContainer());
toolBar.addButton(customButton);
});
RubberBandSelect
Map box selection class，making map entry and exit box selection mode
See: RubberBandSelect
Basic Usage
After the config object is initialized, add the following code:
config.initAsync('', false, function () { var maskButtons = []; var instance = KQ.Control.RubberBandSelect.getInstance(mapView._getMap()); // entry box selection mode var button = new KQ.Control.MapButton('fa-copy fa-lg', function (){ instance.bindEvent(); }); // exit box selection mode instance.on('boundend', function (bounds) { instance.removeEvent(); }, instance); maskButtons.unshift(button); var bar = new KQ.Control.MapButtonBar(maskButtons, { position: 'topleft' }); bar.addToMapView(mapView); });
UI Controls
Auto Complete
Add auto complete to the web control
See: AutoComplete
Add AutoComplete
In html file add code:
<input id="autocomplete" />In js file add code:
var autoComplete = new KQ.ui.AutoComplete('autocomplete', {}); var data = [ "America", "Australia", "China", "France", "Germany", "Greece", "Iceland", "Japan", "Korea", "Netherlands", "Poland", "Russia", "Switzerland", "England", ]; autoComplete.setDataSource(data);
Result:
Button
Button web control
See: Button
Add Button
In html file add code:
<button id="button" type="button">My Button</button>In js file add code:
var button = new KQ.ui.Button('button', {}); button.enable(false);
Result:
Chart
Chart web control
See: Chart
Pie Chart Basic Usage
In html file add code:
<div id="chart" style="width: 600px; height: 500px;"></div>In js file add code:
var data = [{ categoryField: "Asia", value: 30.8, color: "#9de219" },{ categoryField: "Europe", value: 21.1, color: "#90cc38" },{ categoryField: "Latin America", value: 16.3, color: "#068c35" },{ categoryField: "Africa", value: 17.6, color: "#006634" },{ categoryField: "Middle East", value: 9.2, color: "#004d38" },{ categoryField: "North America", value: 4.6, color: "#033939" }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ type: "pie", // pie chart field: "value", categoryField: "categoryField", labels: { visible: true, background: "transparent", template: "#= category #: \n #= value#%", } }], tooltip: { visible: true, template: "#= category #-#= value #%", }, });
Result:
Horizontal Bar Chart
In html file add code:
<div id="chart" style="width: 600px; height: 500px;"></div>In js file add code:
var data = [{ categoryField: "Asia", value: 30.8, color: "#9de219" },{ categoryField: "Europe", value: 21.1, color: "#90cc38" },{ categoryField: "Latin America", value: 16.3, color: "#068c35" },{ categoryField: "Africa", value: 17.6, color: "#006634" },{ categoryField: "Middle East", value: 9.2, color: "#004d38" },{ categoryField: "North America", value: 4.6, color: "#033939" }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ type: "bar", // bar chart(horizontal) field: "value", categoryField: "categoryField", }], });
Result:
Vertical Bar Chart
In html file add code:
<div id="chart" style="width: 600px; height: 500px;"></div>In js file add code:
var data = [{ categoryField: "Asia", value: 30.8, color: "#9de219" },{ categoryField: "Europe", value: 21.1, color: "#90cc38" },{ categoryField: "Latin America", value: 16.3, color: "#068c35" },{ categoryField: "Africa", value: 17.6, color: "#006634" },{ categoryField: "Middle East", value: 9.2, color: "#004d38" },{ categoryField: "North America", value: 4.6, color: "#033939" }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ // type: "bar", // not set type is bar chart(vertical) field: "value", categoryField: "categoryField", }], });
Result:
Show Additional Field
In html file add code:
<div id="chart" style="width: 600px; height: 500px;"></div>In js file add code:
var data = [{ categoryField: "Asia", value: 100, ratio: "50%", color: "#56a36c", },{ categoryField: "Europe", value: 100, ratio: "50%", color: "#2e68aa", }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ type: "pie", // pie chart field: "value", categoryField: "categoryField", labels: { visible: true, background: "transparent", template: "#= category #: \n value: #= data.dataItem.value ## ratio: #= data.dataItem.ratio #", } }], });
Result:
Checkbox
Checkbox web control
See: Checkbox
Add Checkbox
In html file add code:
<div id="checkbox"></div>In js file add code:
var checkbox = new KQ.ui.Checkbox('checkbox', {label: 'this is a checkbox'});
Result:
Checked and Unchecked
In html file add code:
<div id="checkbox1"></div> <div id="checkbox2"></div>In js file add code:
var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is checked'}); var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is unchecked'}); checkbox1.checked(true); checkbox2.checked(false);
Result:
Enabled or Disabled
In html file add code:
<div id="checkbox1"></div> <div id="checkbox2"></div>In js file add code:
var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is enabled'}); var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is disabled'}); checkbox1.enable(true); checkbox2.enable(false);
Result:
DropdownList
DropdownList web control
See: DropdownList
Add DropdownList
In html file add code:
<input id="dropdownlist" />In js file add code:
var dropdownlist = new KQ.ui.DropdownList('dropdownlist', {}); dropdownlist.setDataSource(['A', 'B', 'C']);
Result:
Grid
Grid web control
See: Grid
Add Grid Control
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
Result:
HeaderAttributes
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ { field: "name", title: "The Name", attributes: { "class": "name-cell", style: "text-align: left", }, headerAttributes: { "class": "name-header", style: "text-align: left", }, }, { field: "age", title: "The Age", width: 100, attributes: { "class": "name-cell", style: "text-align: center", }, headerAttributes: { "class": "name-header", style: "text-align: center", }, }, { field: "sex", title: "The Sex", attributes: { "class": "name-cell", style: "text-align: right", }, headerAttributes: { "class": "name-header", style: "text-align: right", }, }, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
Result:
Height and Scrollable
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], height: 80, scrollable: true, });
Result:
Selectable
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.TreeList('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: true, });
Result:
Column's Width
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
Result:
Pageable
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], pageable: { pageSize: 2, pageSizes: [1, 2, 4, "all"], refresh: true, }, });
Result:
Messages Display
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], pageable: { pageSize: 2, messages: { previous: "previous page", next: "next page", }, }, });
Result:
Select and ClearSelection
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", }); // select the first table row grid.select("tr:eq(0)"); grid.clearSelection();
DataItem
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", }); var data = grid.dataItem("tbody>tr:eq(1)"); console.log("name: " + data.name + " " + "age: " + data.age + " " + "sex: " + data.sex); // displays "name: John Doe age: 19 sex: Male"
Change Event
In html file add code:
<div id="grid"></div>In js file add code:
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", change: function(e) { var selectedRows = this.select(); console.log(selectedRows.length); var selectedDataItems = [] for (var i = 0; i < selectedRows.length; i++) { var dataItem = this.dataItem(selectedRows[i]); selectedDataItems.push(dataItem); // selectedDataItems contains all selected data items } }, });
ListView
ListView web control
See: ListView
Add ListView
In html file add code:
<div id="listView"></div>In js file add code:
var listView = new KQ.ui.ListView('listView', {}); listView.setDataSource([{name: 'London'}, {name: 'England'}, {name: 'Liverpool'}, {name: 'Belfast'}, {name: 'Sydney'}, {name: 'Leeds'}]); listView.selectFirstItem(); // Selects first list view item var select_item = listView.dataItem(listView.select()); // Get select item var select_item_name = select_item.name; console.log(select_item_name);
Result:
MaskedTextBox
MaskedTextBox web control
See: MaskedTextBox
Add MaskedTextBox
In html file add code:
<input id="maskedtextbox" />In js file add code:
var maskedtextbox = new KQ.ui.MaskedTextBox('maskedtextbox', {}); maskedtextbox.value("Enter value...");
Result:
PanelBar
PanelBar web control
See: PanelBar
Basic Usage
In css file add code:
#panelbar{ margin: 10px; width: 300px; }In html file add code:
<div id="panelbar"></div>In js file add code:
var panelbar = new KQ.ui.PanelBar('panelbar', { dataSource: [ { text: "Baseball", imageUrl: "./icons/baseball.png", items: [ {text: "Top News", imageUrl: "./icons/star.png"}, {text: "Photo Galleries", imageUrl: "./icons/photo.png"}, {text: "Videos Records", imageUrl: "./icons/video.png"}, {text: "Radio Records", imageUrl: "./icons/speaker.png"} ] }, { text: "Golf", imageUrl: "./icons/golf.png", items: [ {text: "Top News", imageUrl: "./icons/star.png"}, {text: "Photo Galleries", imageUrl: "./icons/photo.png"}, {text: "Videos Records", imageUrl: "./icons/video.png"}, {text: "Radio Records", imageUrl: "./icons/speaker.png"} ] }, { text: "Swimming", imageUrl: "./icons/swimming.png", items: [ {text: "Top News", imageUrl: "./icons/star.png"}, {text: "Photo Galleries", imageUrl: "./icons/photo.png"} ] }, { text: "Snowboarding", imageUrl: "./icons/snowboarding.png", items: [ {text: "Photo Galleries", imageUrl: "./icons/photo.png"}, {text: "Videos Records", imageUrl: "./icons/video.png"} ] } ], });
Result:
Template Usage
In css file add code:
#panelbar{ margin: 10px; width: 300px; }In html file add code:
<div id="panelbar"></div>In js file add code:
var panelbar = new KQ.ui.PanelBar('panelbar', { template: "#= item.text ## (#= item.inStock #)", dataSource: [ { text: "foo", inStock: 7, items: [ { text: "bar", inStock: 2 }, { text: "baz", inStock: 5 } ] } ] });
Result:
Select Event
In html file add code:
<div id="panelbar"></div>In js file add code:
var panelbar = new KQ.ui.PanelBar('panelbar', { template: "#= item.text ## (#= item.inStock #)", dataSource: [ { text: "foo", inStock: 7, items: [ { text: "bar", inStock: 2 }, { text: "baz", inStock: 5 } ],} ], select: function(e){ var dataItem = panelbar.dataItem(e.item); // printf: item info: (text: bar, inStock: 2) console.log('item info: ' + '(text: '+ dataItem.text + ', inStock: ' + dataItem.inStock + ')'); }, });
RadioButton
RadioButton web control
See: RadioButton
Add Radio Button
In html file add code:
<div id="radiobutton"></div>In js file add code:
var radiobutton = new KQ.ui.RadioButton('radiobutton', {label: 'this is a radiobutton'});
Result:
Checked and Unchecked
In html file add code:
<div id="radiobutton1"></div> <div id="radiobutton2"></div>In js file add code:
var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is checked'}); var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is unchecked'}); radiobutton1.checked(true); radiobutton2.checked(false);
Result:
Enabled or Disabled
In html file add code:
<div id="radiobutton1"></div> <div id="radiobutton2"></div>In js file add code:
var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is enabled'}); var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is disabled'}); radiobutton1.enable(true); radiobutton2.enable(false);
Result:
TabStrip
TabStrip web control
See： TabStrip
Basic Usage
In html file add code:
<div id="tabstrip"> <ul> <li class="k-state-active"> Paris </li> <li> New York </li> <li> London </li> <li> Moscow </li> </ul> <div> <span class="rainy"> </span> <div class="weather"> <h2>17<span>ºC</span></h2> <p>Rainy weather in Paris.</p> </div> </div> <div> <span class="sunny"> </span> <div class="weather"> <h2>29<span>ºC</span></h2> <p>Sunny weather in New York.</p> </div> </div> <div> <span class="sunny"> </span> <div class="weather"> <h2>21<span>ºC</span></h2> <p>Sunny weather in London.</p> </div> </div> <div> <span class="cloudy"> </span> <div class="weather"> <h2>16<span>ºC</span></h2> <p>Cloudy weather in Moscow.</p> </div> </div> </div>In css file add code:
.sunny, .cloudy, .rainy { display: block; margin: 30px auto 10px; width: 128px; height: 128px; background: url('weather.png') transparent no-repeat 0 0; } .cloudy{ background-position: -128px 0; } .rainy{ background-position: -256px 0; } .weather { margin: 0 auto 30px; text-align: center; } #tabstrip h2 { font-weight: lighter; font-size: 5em; line-height: 1; padding: 0 0 0 30px; margin: 0; } #tabstrip h2 span { background: none; padding-left: 5px; font-size: .3em; vertical-align: top; } #tabstrip p { margin: 0; padding: 0; }In js file add code:
var tabstrip = new KQ.ui.TabStrip('tabstrip', {});
Result:
Add Image to Tabs
In html file add code:：
<div id="tabstrip"></div>In js file add code:：
var tabstrip = new KQ.ui.TabStrip('tabstrip', { dataTextField: "text", dataImageUrlField: "imageUrl", dataContentField: "content", dataSource: [ { text: "Baseball", imageUrl: "baseball.png", content: "Baseball is a bat-and-ball sport played between two teams of nine players each. The aim is to score runs by hitting a thrown ball with a bat and touching a series of four bases arranged at the corners of a ninety-foot diamond. Players on the batting team take turns hitting against the pitcher of the fielding team, which tries to stop them from scoring runs by getting hitters out in any of several ways. A player on the batting team can stop at any of the bases and later advance via a teammate's hit or other means. The teams switch between batting and fielding whenever the fielding team records three outs. One turn at bat for each team constitutes an inning and nine innings make up a professional game. The team with the most runs at the end of the game wins." }, { text: "Golf", imageUrl: "golf.png", content: "Golf is a precision club and ball sport, in which competing players (or golfers) use many types of clubs to hit balls into a series of holes on a golf course using the fewest number of strokes. It is one of the few ball games that does not require a standardized playing area. Instead, the game is played on golf courses, each of which features a unique design, although courses typically consist of either nine or 18 holes. Golf is defined, in the rules of golf, as playing a ball with a club from the teeing ground into the hole by a stroke or successive strokes in accordance with the Rules." }, { text: "Swimming", imageUrl: "swimming.png", content: "Swimming has been recorded since prehistoric times; the earliest recording of swimming dates back to Stone Age paintings from around 7,000 years ago. Written references date from 2000 BC. Some of the earliest references to swimming include the Gilgamesh, the Iliad, the Odyssey, the Bible, Beowulf, and other sagas. In 1578, Nikolaus Wynmann, a German professor of languages, wrote the first swimming book, The Swimmer or A Dialogue on the Art of Swimming (Der Schwimmer oder ein Zwiegespräch über die Schwimmkunst). Competitive swimming in Europe started around 1800, mostly using breaststroke." } ] }); tabstrip.select(0);
Result:
TextArea
TextArea web mark
See: TextArea
Add TextArea
In html file add code:
<textarea id="myid">default-content</textarea>In js file add code:
var textarea = new KQ.ui.TextArea('myid'); textarea.value("my content"); //change the contont to "my content" console.log(textarea.value()); //print "my content"
Result:
TreeList
TreeList web control
See: TreeList
Add TreeList Control
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
Result:
HeaderAttributes
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ { field: "name", title: "The Name", attributes: { "class": "name-cell", style: "text-align: left", }, headerAttributes: { "class": "name-header", style: "text-align: left", }, }, { field: "age", title: "The Age", width: 100, attributes: { "class": "name-cell", style: "text-align: center", }, headerAttributes: { "class": "name-header", style: "text-align: center", }, }, { field: "sex", title: "The Sex", attributes: { "class": "name-cell", style: "text-align: right", }, headerAttributes: { "class": "name-header", style: "text-align: right", }, }, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
Result:
Height and Scrollable
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], height: 80, scrollable: true, });
Result:
Selectable
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: true, });
Result:
Expandable
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name", expandable: true}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"}, {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"}, {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"}, {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"}, ], });
Result:
Row or Cell Select
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "cell", }); treelist.select($("#treelist td:eq(0)"));
Result:
Expands The Row
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name", expandable: true}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"}, {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"}, {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"}, {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"}, ], }); treelist.expand($("#treelist tbody>tr:eq(0)"));
Result:
Returns The Data Item
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name", expandable: true}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"}, {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"}, {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"}, {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"}, ], }); var data = treelist.dataItem("tbody>tr:eq(1)"); console.log("name: " + data.name + " " + "age: " + data.age + " " + "sex: " + data.sex); // displays "name: John Doe age: 19 sex: Male"
Change Event
In html file add code:
<div id="treelist"></div>In js file add code:
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", change: function(e) { var selectedRows = this.select(); console.log(selectedRows.length); var selectedDataItems = [] for (var i = 0; i < selectedRows.length; i++) { var dataItem = this.dataItem(selectedRows[i]); selectedDataItems.push(dataItem); // selectedDataItems contains all selected data items } }, });
TreeView
TreeView web control
See: TreeView
Add TreeView Control
In html file add code:
<div id="treeview"></div>In js file add code:
// key node id (must be unique inside the tree) // title display name (may contain HTML) // data ontains all extra data that was passed on node creation // children Array of child nodes. // expanded Use isExpanded(), setExpanded() to access this property. // folder folder nodes have different default icons and click behavior. // selected Use isSelected(), setSelected() to access this property. // tooltip Alternative description used as hover popup var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"}, {key: "id2", title: "item2"}, {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1"}, {key: "id3.1.2", title: "Sub-item 3.1.2"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3"}, ]}, ]; var treeview = new KQ.ui.TreeView('treeview', { source: dataSource});
Result:
Checkbox
In html file add code:
<div id="treeview"></div>In js file add code:
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"}, {key: "id2", title: "item2", selected: true}, {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1"}, {key: "id3.1.2", title: "Sub-item 3.1.2"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3"}, ]}, ]; var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, checkbox: true});
Result:
Custom Icon
In html file add code:
<div id="treeview"></div>In js file add code:
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"}, {key: "id2", title: "item2", selected: true, icon: "point.png"}, {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"}, {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"}, ]}, ]; var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, imagePath: "../../images/"});
Result:
Select Event
In html file add code:
<div id="treeview"></div>In js file add code:
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"}, {key: "id2", title: "item2", selected: true, icon: "point.png"}, { key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"}, {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"}, ] }, ]; var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"}); treeview.on('click', function (paramers) { var data = paramers.data; var node = data.node; // key:id1, title:item1 with key and tooltip, tooltip:Look, a tool tip!, icon:line.png console.log("key:" + node.key + ", title:" + node.title + ", tooltip:" + node.tooltip + ", icon:" + node.icon); }, treeview);
Visit Function
In html file add code:
<div id="treeview"></div>In js file add code:
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"}, {key: "id2", title: "item2", selected: true, icon: "point.png"}, { key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"}, {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"}, ] }, ]; var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"}); var keys = []; treeview.visit(function (node) { keys.push(node.key); }); // id1, id2, id3, id3.1, id3.1.1, id3.1.2, id3.2, id3.2.1, id3.2.2, id3.3 console.log(keys.join(", "));
Lazy Load
In html file add code:
<div id="treeview"></div>In js file add code:
// notice: lazy flag must true var source = [ {title: "item1", key: "item1", folder: true, lazy: true}, {title: "item2", key: "item2", folder: true, lazy: true}, {title: "item3", key: "item3", folder: true, lazy: true}, ]; var treeview = new KQ.ui.TreeView('treeview', {source: source}); // node: the current click node, return is a sub items array treeview.subItemsLazyLoadFn(function (node) { if (node.key === "item1"){ return [{title: "sub_item1_1"}, {title: "sub_item1_2"}]; }else if (node.key === "item2"){ return [{title: "sub_item2_1"}, {title: "sub_item2_2"}]; }else if (node.key === "item3"){ return [{title: "sub_item3_1"}, {title: "sub_item3_2"}, {title: "sub_item3_3"}]; } });Result:
TreeViewNode's Usage
In html file add code:
<div id="treeview"></div>In js file add code:
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"}, {key: "id2", title: "item2"}, { key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1"}, {key: "id3.1.2", title: "Sub-item 3.1.2"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3"}, ] }, ]; var treeview = new KQ.ui.TreeView("treeview", {source: dataSource, checkbox: true}); var treeViewNode = treeview.getNodeByKey('id3.1'); console.log(treeViewNode.isExpanded()); // true console.log(treeViewNode.isFolder()); // true console.log(treeViewNode.isSelected()); // false treeViewNode.setSelected(true); console.log(treeViewNode.isSelected()); // true
Window
Display a moveable, scalable window on the screen, it can be with a title, close button.
See: Window
Add Window
Display custom content in the new window.
- Find folder and open it: 'kqwebmap/window'.
Add new file 'example.html'.
<div id="example"> <div id="window"> <div class="armchair"> <img src="http://lorempixel.com/199/194" alt="Artek Alvar Aalto - Armchair 402"/> Artek Alvar Aalto - Armchair 402 </div> <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p> <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p> <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p> <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p> </div> <span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span> <div class="responsive-message"></div> <button id="button" type="button" onclick="onExampleButtonClick()">Button</button> <script> function onExampleButtonClick () { console.log('onExampleButtonClick!'); } </script> <style> #undo { text-align: center; position: absolute; white-space: nowrap; padding: 1em; cursor: pointer; } .armchair { float: left; margin: 30px 30px 120px 30px; text-align: center; } .armchair img { display: block; margin-bottom: 10px; width: 199px; height: 194px; } @media screen and (max-width: 500px) { div.k-window { display: none !important; } } </style> </div>Add code in js file.
KQ.Common.CommonTools.loadUiLib(function () { var win = new KQ.Control.Window('example', { parentID: 'map', position: { left: '100px', top: '100px', }, }); win.initAsync(); win.open(); });
Result:
