var createMap = function() { /* global itowns,document,GuiTools*/ const positionOnGlobe = { longitude: 2.3465, latitude: 48.88, altitude: 25000000 }; // iTowns namespace defined here const viewerDiv = document.getElementById('viewerDiv'); const globeView = new itowns.GlobeViewExtended(viewerDiv, positionOnGlobe); globeView.listen(itowns.GlobeViewExtended.EVENTS.GLOBE_INITIALIZED, () => { // adds a WMTS Geoportal layer (WMTS) to map var orthoLayer = new itowns.layer.GeoportalWMS({ layer: "ORTHOIMAGERY.ORTHOPHOTOS" }); // adds a second WMTS Geoportal layer to map var planIGNLayer = new itowns.layer.GeoportalWMS({ layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2", itownsParams: { opacity: 0.5 } }); // adds 2 layers to the iTowns globe globeView.addLayer(orthoLayer); globeView.addLayer(planIGNLayer); // adds a layer switcher control to map globeView.addWidget(new itowns.control.LayerSwitcher({})); }); } Gp.Services.getConfig({ apiKey: "cartes,altimetrie,ortho", timeOut: 20000, onSuccess: createMap }); var infoDiv = document.getElementById("info"); infoDiv.innerHTML = "<p> Extension iTowns version " + Gp.itownsExtVersion + " (" + Gp.itownsExtDate + ")</p>";
<body> <div id="viewerDiv"> <button id="tiltButton"> jsFiddle bug - click on this text to activate tilt (ctrl + left click) <br> Do not integrate this button to your own non-jsFiddle pages </button> </div> <div id="info"></div> </body>
html { height: 100%; } body { margin: 0; overflow: hidden; height: 100%; } #viewerDiv { margin: auto auto; width: 100%; height: 400px; padding: 0; } #tiltButton { background-color: white; position: absolute; top: 20px; left: 50px; } #info { padding: 5px; width: 100%; height: 20px; font-family: "monospace"; font-size: 10px; }