Geoptimization API  -  Geoptimization JavaScript API

HTML 

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

JavaScript 

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};

var map = new GCUI.Map('mapDiv', options);

The following code example creates a map centered on Paris (using x, y coordinates and scale options) :

HTML 

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

JavaScript 

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

var map = new GCUI.Map('mapDiv1', options);

After creating a map, you can get the map object from its id :

JavaScript 

function init() {
    var map = new GCUI.Map('map', options);
}
function doSomethingWithMap() {
    var map = GCUI.getMap('map');
}

The GCUI.Map constructor with server and layer options arguments gets asynchronously map informations (extent, resolutions, …) from the Geoptimization server. The map events system trigger a load event to notify that the map is loaded :

HTML 

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

JavaScript 

var options = {
    server : 'https://api.geoconcept.com/EU/GCW/geoconcept-web/wmts',
    layer : 'STANDARD'
};
var map = new GCUI.Map('map1', options);
map.onEvent("load", onMapLoaded);

function onMapLoaded() {
        var map = GCUI.getMap('map1');
        alert("Map is loaded. Map extent is : " + map.getExtent());
}

The following code registers a callback function that will be called when map is ready :

map.onEvent("load",onMapLoaded);

In this example, the callback function display the map extent :

function onMapLoaded() {
    var map = GCUI.getMap('map1');
    alert("Map is loaded. Map extent is : "+ map.getExtent());
}

To get the current zoom level of the map, use :

var zoomLevel = map.getZoom();

Note : The OpenLayers zoom level 0 corresponds to a map fully zoomed out and the zoom level 21 (depending on the map the scale levels may vary) corresponds to a map fully zoomed in. It’s the reverse of the Geoconcept logical scales (in Geoconcept, logical scale 22 corresponds to a map fully zoomed out and logical scale 0 corresponds to a map fully zoomed in).

To get the current Geoconcept logical scale of the map, use :

var logicalScale = map.getLogicalScale();

So, to convert Geoconcept logical scale to OpenLayers zoom level :

var zoomLevel = map.getNumZoomLevels() - logicalScale;

You can specify the minimum (default value is 0) and maximum (default value is 22) logical scales of the map :

map.minLogicalScale = 3;
map.maxLogicalScale = 10;

Several API methods (from OpenLayers API) allow to modify the zoom level of the map :

HTML 

<div style="position: absolute; z-index: 5000; left: 65px;">
        <button type="button" onclick="GCUI.examples.zoomIn()">zoom in</button>
        <button type="button" onclick="GCUI.examples.zoomOut()">zoom out</button>
        <button type="button" onclick="GCUI.examples.zoomTo(0)">zoom to 0</button>
        <button type="button" onclick="GCUI.examples.zoomTo(22)">zoom to 22</button>
        <button type="button" onclick="GCUI.examples.zoomExtent()">zoom to bounds</button>
        <button type="button" onclick="GCUI.examples.zoomMapExtent()">map extent</button>
</div>
<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);

GCUI.examples = {
        zoomIn : function() {
                map.getView().setZoom(map.getView().getZoom() + 1);
        },
        zoomOut : function() {
                map.getView().setZoom(map.getView().getZoom() - 1);
        },
        zoomTo : function(z) {
                 map.getView().setZoom(z);
        },
        zoomExtent : function() {
                map.zoomToExtent([251363, 6247962, 270242, 6253695]);
        },
        zoomMapExtent : function() {
                map.getView().setZoom(map.getExtent());
        }
};

To get the current center of the map, use :

var center = map.getCenter();

To change the center of the map, use the setCenter method :

map.getView().setCenter([260803,6250829]);

To get the current size (in pixels) of the map div, use :

var size = map.getSize();

To modify the map size, use the setSize method :

map.setSize('80%','80%');

or

map.setSize('400px','400px');

HTML 

<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);
map.setSize('400px', '250px');