Multi-contracts

2D Web Javascript API

In order to display different maps with different license keys follow the instructions below :

  • call Geoportal.GeoRMHandler.getConfig() with the license keys. The key parameter will contain as many as needed license keys ;
  • for each additional contract, one has to build the relevant viewer via of the Geoportal.Viewer classes ;

The following HTML code contains the steps to include 2 licensed maps :

<!DOCTYPE html>
<html>
<head>
    <title>2D API : multi-maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <h1 style="margin-left:45%;">multi-maps</h1>
    <div id="Map1Div" style="width:800px;height:600px;"></div>
    <div id="Map2Div" style="width:800px;height:600px;position:relative;left:250px"></div>
    <script type="text/javascript"><!--
        <script type="text/javascript"><!--//--><![CDATA[//><!--
        if (window.__Geoportal$timer===undefined) {
            var __Geoportal$timer= null;
        }

        function checkApiLoading(retryClbk,clss) {
            if (__Geoportal$timer!=null) {
                //clearTimeout: cancels the timer "__Geoportal$timer" before its end
                window.clearTimeout(__Geoportal$timer);
                __Geoportal$timer= null;
            }
    
            /**
             * It may happen that the init function is executed before the API is loaded
             * Addition of a timer code that waits 300 ms before running the init function
             */
            var f;
            for (var i=0, l= clss.length; i<l; i++) {
                try {
                    f= eval(clss[i]);
                } catch (e) {
                    f= undefined;
                }
                if (typeof(f)==='undefined') {
                    __Geoportal$timer= window.setTimeout(retryClbk, 300);
                    return false;
                }
            }
            return true;
        }

        function loadAPI() {
            // wait for all classes to be loaded
            if (checkApiLoading(loadAPI,['OpenLayers','Geoportal','Geoportal.Viewer','Geoportal.Viewer.Default'])===false) {
               return;
            }

            // load API keys configuration, then load the interface
            Geoportal.GeoRMHandler.getConfig(['CONTRACT1', 'CONTRACT2'], null, null, {
                onContractsComplete: initGeoportalMap
            });
        }

        map1= null;
        map2= null;

        function initGeoportalMap() {
            map1= new Geoportal.Viewer.Default(
                "Map1Div",
                {
                    apiKey:'CONTRACT1',
                    'CONTRACT1':gGEOPORTALRIGHTSMANAGEMENT['CONTRACT1']
                }
            );
            if (map1.getMap().allowedGeoportalLayers ) {
                map1.addGeoportalLayers(map1.getMap().allowedGeoportalLayers);
            }

            map2= new Geoportal.Viewer.Default(
                "Map2Div",
                {
                    territory:'GLP',
                    apiKey:'CONTRACT2',
                    'CONTRACT2':gGEOPORTALRIGHTSMANAGEMENT['CONTRACT2']
                }
            );
            if (map2.getMap().allowedGeoportalLayers ) {
                map2.addGeoportalLayers(map2.getMap().allowedGeoportalLayers);
            }
        }

        window.onload= loadAPI;
     -->
    </script>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api/js/VERSION/Geoportal.js"
        charset="utf-8">
  <!-- -->
  </script>
</body>
</html>

Let's have a closer look at the above code. We have Geoportal.GeoRMHandler.getConfig() that gets the contracts information and when acquired, its calls initGeoportalMap(). One call to the initGeoportalMap() call-back function makes the job. Within this function, the first map is defined with the Geoportal.Viewer.Default("Map1Div", ... ) call and is associated with the contract CONTRACT1. The second map is defined with the Geoportal.Viewer.Default("Map2Div", ... ) call and is associated with the contract CONTRACT2. We now have two different maps that interact with the end-user independently from each other.