ThomasG77/index.html

## 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>
	<!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>