{% extends 'base.html.twig' %}
{% block stylesheets %}
	{{parent() }}
	<link rel="stylesheet" href="{{ asset('assets/css/visiteChantier.css')}}">
{% endblock %}

{% block body %}
    <button id="find-me" onClick="geoFindMe()">Show my location</button><br />
    <p id="status"></p>
    <a id="map-link" target="_blank"></a>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>
function geoFindMe() {
  const status = document.querySelector("#status");
  const mapLink = document.querySelector("#map-link");

  mapLink.href = "";
  mapLink.textContent = "";

  function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = "";
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = "Unable to retrieve your location";
  }

  if (!navigator.geolocation) {
    status.textContent = "Geolocation is not supported by your browser";
  } else {
    status.textContent = "Locating…";
    navigator.geolocation.getCurrentPosition(success, error);
  }
}

</script>

{% endblock %}