const positionOnGlobe = { longitude: 2.3465, latitude: 48.88, altitude: 25000000 }; // creates viewerDiv and iTowns globeView const viewerDiv = document.getElementById('viewerDiv'); const globeView = new itowns.GlobeViewExtended(viewerDiv, positionOnGlobe); var config = {}; config.source = new itowns.WMTSSource({ "url": "https://wxs.ign.fr/decouverte/geoportail/wmts", "crs": "EPSG:3857", "networkOptions": { "crossOrigin": "anonymous" }, "format": "image/jpeg", "attribution": { "name": "IGN", "url": "http://www.ign.fr/" }, "name": "ORTHOIMAGERY.ORTHOPHOTOS", "tileMatrixSet": "PM", "tileMatrixSetLimits": { "2": { "minTileRow": 0, "maxTileRow": 4, "minTileCol": 0, "maxTileCol": 4 }, "3": { "minTileRow": 0, "maxTileRow": 8, "minTileCol": 0, "maxTileCol": 8 }, "4": { "minTileRow": 0, "maxTileRow": 16, "minTileCol": 0, "maxTileCol": 16 }, "5": { "minTileRow": 0, "maxTileRow": 32, "minTileCol": 0, "maxTileCol": 32 }, "6": { "minTileRow": 1, "maxTileRow": 64, "minTileCol": 0, "maxTileCol": 64 }, "7": { "minTileRow": 3, "maxTileRow": 128, "minTileCol": 0, "maxTileCol": 128 }, "8": { "minTileRow": 7, "maxTileRow": 256, "minTileCol": 0, "maxTileCol": 256 }, "9": { "minTileRow": 15, "maxTileRow": 512, "minTileCol": 0, "maxTileCol": 512 }, "10": { "minTileRow": 31, "maxTileRow": 1024, "minTileCol": 0, "maxTileCol": 1024 }, "11": { "minTileRow": 62, "maxTileRow": 2048, "minTileCol": 0, "maxTileCol": 2048 }, "12": { "minTileRow": 125, "maxTileRow": 4096, "minTileCol": 0, "maxTileCol": 4096 }, "13": { "minTileRow": 2739, "maxTileRow": 4628, "minTileCol": 41, "maxTileCol": 7917 }, "14": { "minTileRow": 5478, "maxTileRow": 9256, "minTileCol": 82, "maxTileCol": 15835 }, "15": { "minTileRow": 10956, "maxTileRow": 18513, "minTileCol": 165, "maxTileCol": 31670 }, "16": { "minTileRow": 21912, "maxTileRow": 37026, "minTileCol": 330, "maxTileCol": 63341 }, "17": { "minTileRow": 43825, "maxTileRow": 74052, "minTileCol": 660, "maxTileCol": 126683 }, "18": { "minTileRow": 87648, "maxTileRow": 148111, "minTileCol": 1312, "maxTileCol": 253375 }, "19": { "minTileRow": 175296, "maxTileRow": 294063, "minTileCol": 170144, "maxTileCol": 343487 }, "20": { "minTileRow": 357008, "maxTileRow": 384687, "minTileCol": 524400, "maxTileCol": 540927 }, "21": { "minTileRow": 714032, "maxTileRow": 768783, "minTileCol": 1048816, "maxTileCol": 1081775 } } }); config.id = "Ortho"; var layer = new itowns.ColorLayer(config.id, config); globeView.addLayer(layer); var config2 = {}; config2.source = new itowns.WMTSSource({ "format": "image/x-bil;bits=32", "crs": "EPSG:4326", "url": "https://wxs.ign.fr/altimetrie/geoportail/wmts", "name": "ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3", "tileMatrixSet": "WGS84G", "tileMatrixSetLimits": { "3": { "minTileRow": 1, "maxTileRow": 6, "minTileCol": 0, "maxTileCol": 16 }, "4": { "minTileRow": 2, "maxTileRow": 12, "minTileCol": 0, "maxTileCol": 32 }, "5": { "minTileRow": 5, "maxTileRow": 25, "minTileCol": 0, "maxTileCol": 64 }, "6": { "minTileRow": 10, "maxTileRow": 51, "minTileCol": 0, "maxTileCol": 128 }, "7": { "minTileRow": 20, "maxTileRow": 103, "minTileCol": 0, "maxTileCol": 256 }, "8": { "minTileRow": 41, "maxTileRow": 207, "minTileCol": 0, "maxTileCol": 512 }, "9": { "minTileRow": 82, "maxTileRow": 415, "minTileCol": 0, "maxTileCol": 1024 }, "10": { "minTileRow": 164, "maxTileRow": 830, "minTileCol": 0, "maxTileCol": 2048 } } }); config2.id = "WorldMNT"; var layer = new itowns.ElevationLayer(config2.id, config2); globeView.addLayer(layer); // adds control var attribution = new itowns.control.Attributions({ options: { collapsed: false } }); globeView.addWidget(attribution); // itowns version info div 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; }