var map = Gp.Map.load( "map", // html div { // Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats apiKey: "essentiels,altimetrie", //load the map with itowns (in 3D) viewMode : "3d", //path to the iTowns library enginePath3d: "https://ignf.github.io/geoportal-sdk/latest/dist/3d/", // layers to display zoom : 10, center : { x : 6.242212, y : 44.811339 }, tilt: 45, layersOptions : { "ORTHOIMAGERY.ORTHOPHOTOS" : {}, "ELEVATION.ELEVATIONGRIDCOVERAGE" : { type : "elevation" } }, // additional tools to display on the map controlsOptions : { "layerSwitcher" : {} } } ) ; function switchTo3D() { map = map.switch2D3D("3d"); document.getElementById("BoutonSwitchTo2D").style.display = "inline"; document.getElementById("BoutonSwitchTo3D").style.display = "none"; } function switchTo2D() { map = map.switch2D3D("2d"); document.getElementById("BoutonSwitchTo3D").style.display = "inline"; document.getElementById("BoutonSwitchTo2D").style.display = "none"; } var infoDiv = document.getElementById("info"); infoDiv.innerHTML = "<p> SDK version " + Gp.sdkVersion + " (" + Gp.sdkDate + ")</p>";
<div id="map"> <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> <br/> <div id="BoutonSwitchTo3D" hidden> <input type="button" name="switch" onclick="switchTo3D();" value="Switch from 2D to 3D"/><br/> </div> <div id="BoutonSwitchTo2D"> <input type="button" name="switch" onclick="switchTo2D();" value="Switch from 3D to 2D"/><br/> </div>
html { height: 100%; } body { margin: 0; overflow:hidden; height:100%; } #map { 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; }