var map = Gp.Map.load(
"map", // html div
{
// Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats
apiKey: "cartes,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/",
// map center
center : {
location : "Biarritz"
},
// map zoom level
zoom : 15,
// layers to display
layersOptions : {
"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" : {
},
"ELEVATION.ELEVATIONGRIDCOVERAGE" : {
type : "elevation"
}
},
// Listening to mapEvents
mapEventsOptions : {
// when map has finished to initialize and to render
"mapLoaded" : function(evt) {
alert("map ready !") ;
}
}
}
) ;
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>
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;
}