Reference Source

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:

result-0

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:

result-1

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:

result-1

result-2

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.

  1. Find file and open it: 'kqwebmap/sidebar/sidebar.html'.
  2. Find content <ul role="tablist"> and it's end mark </ul>.

  3. Before </ul>, add code <li><a title="new tab" href="#newtab" role="tab"><i class="fa fa-address-book"></i></a></li>.

    add-tab

Add Tab Content

Add tab content of the new tab.

  1. Find file and open it: 'kqwebmap/sidebar/sidebar.html'.
  2. Find content <div class="sidebar-content">
  3. 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.

  1. Find file and open it: 'kqwebmap/sidebar/sidebar.html'.

  2. At the end add code

    <script>
  function onButtonClick() {
    console.log('newTabButton clicked');
  }

  function sidebar_init () {
    console.log('function sidebar_init() run !!!');
  }
</script>

Result:

effect-0 (fold)

effect-1 (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:

result-0

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:

result-1

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});
      }
     })
   });

结果：

result-2

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:

result-0

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:

result-1

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:

result-2

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:

result-3

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:

result-4

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:

result-5 result-6

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:

result-7

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.

  1. Find folder and open it: 'kqwebmap/sidebar'.

  2. 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>

  3. 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:

    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

  1. 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);
});

    result