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 layers var orthoLayer = new itowns.layer.GeoportalWMTS({ layer: "ORTHOIMAGERY.ORTHOPHOTOS" }); var mntLayer = new itowns.layer.GeoportalElevation({ layer: "ELEVATION.ELEVATIONGRIDCOVERAGE" }); globeView.addLayer(orthoLayer); globeView.addLayer(mntLayer); // adds control var scalebar = new itowns.control.Scale({ target: viewerDiv, position: "absolute" }); globeView.addWidget(scalebar); }) } Gp.Services.getConfig({ apiKey: "ortho,altimetrie", 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: 300px; 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; }