<template>
  <div class="geolocation-container">
    <button
      :class="['button-geolocation', { tracking }]"
      @click.prevent="toggleTracking"
      title="Me localiser"
    >
      <i class="crosshairs icon" />
    </button>
  </div>
</template>

<script>

import mapService from '@/services/map-service';

export default {
  name: 'Geolocation',

  data() {
    return {
      tracking: false,
    };
  },

  methods: {
    toggleTracking() {
      this.tracking = !this.tracking;
      mapService.toggleGeolocation(this.tracking);
    },
  }
};
</script>

<style>
div.geolocation-container {
  position: absolute;
  right: 6px;
  z-index: 1000;
  border: 2px solid rgba(0,0,0,.2);
  background-clip: padding-box;
  padding: 0;
  border-radius: 4px;
}
button.button-geolocation {
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  background-color: #fff;
  color: rgb(39, 39, 39);
  width: 30px;
  height: 30px;
  font: 700 18px Lucida Console,Monaco,monospace;
  border-radius: 2px;
  line-height: 1.15;
  cursor: pointer;
}
button.button-geolocation:hover {
    background-color: #ebebeb;
  }
button.button-geolocation.tracking {
  background-color: rgba(255, 145, 0, 0.904);
  color: #fff;
}
button.button-geolocation i {
  margin: 0;
  vertical-align: top; /* strangely top is the only value that center at middle */
}
</style>