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>