Edit in JSFiddle

function go() {
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.GeoportalWMTS({
          layer: "ORTHOIMAGERY.ORTHOPHOTOS"
      })
    ],
    controls : [
       new ol.control.GeoportalAttribution()
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([2.294, 48.858]),
      zoom: 17
    })
  });
  
  var geolocation = new ol.Geolocation({
        tracking: true
      });
   // listen to changes in position
   geolocation.on('change', function(evt) {
      map.getView().setCenter(ol.proj.fromLonLat(geolocation.getPosition())) ;
   })
   
}

Gp.Services.getConfig({
  apiKey: "jhyvi0fgmnuxvfv0zjzorvdn",
  onSuccess: go
});

var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Extension OL3 version " + Gp.ol3extVersion + " (" + Gp.ol3extDate + ")</p>";
#map {
  padding: 5px;
  width: 100%;
  height: 400px;
  box-shadow: 0 0 10px #999;
}

#info {
  padding: 5px;
  width: 100%;
  height: 20px;
  font-family: "monospace";
  font-size: 10px;
}
<div id="map"></div>
<div id="info"></div>

External resources loaded into this fiddle: