Geoptimization API  -  Geoptimization JavaScript API

To add a control to the map, use the addControl method :

map.addControl(mycontrol);

Create a ol.control.ScaleLine control and add it to the map to display a graphical scale.

HTML 

<div id="map1" style="height:300px"></div>

JavaScript 

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD',
    x : 263860,
    y : 6242153,
    scale : 8
};

var map = new GCUI.Map('map1', options);
map.addControl(new ol.control.ScaleLine());

Create a ol.control.Zoom control and add it to the map to display a scale slider.

HTML 

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css" />
<style>
  .ol-rotate {
        top: 170px;
        right: 0;
      }
</style>
<div id="map2" style="height:300px"></div>

JavaScript 

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD',
    x : 260803,
    y : 6250829,
    scale : 8
};

var map = new GCUI.Map('map2', options);
map.addControl(new ol.control.Zoom());

Create a new instance of ol.control.OverviewMap class and add it to the existing map to display an Overview map.

HTML 

 <style>
      .ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      .ol-rotate {
        top: 170px;
        right: 0;
      }
    </style>
<div id="map3" style="height:300px"></div>

JavaScript 

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD',
    x : 260803,
    y : 6250829,
    scale : 8
};

var map = new GCUI.Map('map3', options);
var overviewmap = new ol.control.OverviewMap({
                                className: 'ol-overviewmap ol-custom-overviewmap'
                                 });
map.addControl(overviewmap);