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;
}