var map = Gp.Map.load(
"map", // html div
{
// Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats
apiKey: "ortho,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 : 6,
center : {
x : 2.6,
y : 47.3
},
tilt : 45,
layersOptions : {
"ORTHOIMAGERY.ORTHOPHOTOS" : {},
"ELEVATION.ELEVATIONGRIDCOVERAGE" : {
type : "elevation"
},
// http://geoservices.brgm.fr/geologie?language=fre&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=TRUE&LAYERS=SCAN_F_GEOL1M&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=665307.8941941746%2C5361598.912035404%2C704443.6526761848%2C5400734.670517414
"geologie-million" : {
title : "Carte géologique image de la France au million",
description :"BD Scan-Million-Géol est la base de données géoréférencées de la carte géologique image à 1/1 000 000",
format : "WMS",
version : "1.3.0",
url : "https://geoservices.brgm.fr/geologie",
layers : ["SCAN_F_GEOL1M"],
outputFormat : "image/png",
tiled : true,
legends : [{
url : "http://mapsref.brgm.fr/legendes/geoservices/Geologie1000_legende.jpg",
format : "image/jpg"
}]
}
},
// additional tools to display on the map
controlsOptions : {
"layerSwitcher" : {}
}
}
) ;
var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> SDK version " + Gp.sdkVersion + " (" + Gp.sdkDate + ")</p>";
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;
}
<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>