Fetch Adresse.data.gouv when geolocation activated by ThomasG77

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info" style="display: none;"></div>
    <label for="track">
      track position
      <input id="track" type="checkbox"/>
    </label>
    <script>
      var view = new ol.View({
        center: [0, 0],
        zoom: 2
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: view
      });

      var style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          fill: new ol.style.Fill({
            color: '#3399CC'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
          })
        })
      });

      var vectorGeolocation = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: style
      });
      map.addLayer(vectorGeolocation);

      var geolocation = new ol.Geolocation({
        projection: view.getProjection()
      });

      function el(id) {
        return document.getElementById(id);
      }

      el('track').addEventListener('change', function() {
        geolocation.setTracking(this.checked);
      });

      // handle geolocation error.
      geolocation.on('error', function(error) {
        var info = document.getElementById('info');
        info.innerHTML = error.message;
        info.style.display = '';
      });

      geolocation.on('change:position', function() {
        var [longitude, latitude] = ol.proj.toLonLat(geolocation.getPosition());
        fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${longitude}&lat=${latitude}`).then(response => response.json())
          .then(json => {
            var features = (new ol.format.GeoJSON()).readFeatures(json, {
              featureProjection: 'EPSG:3857'
            })
            var coordinates = geolocation.getPosition();
            vectorGeolocation.getSource().clear();
            vectorGeolocation.getSource().addFeatures(features);
            // Your feature contains the properties from your GeoJSON
            console.log(vectorGeolocation.getSource().getFeatures()[0].getProperties());
          });
      });

    </script>
  </body>
</html>