fix(docs): reflect user's location example always Egypt

Fixes: themustafaomar#156
QuintansC · Jun 17, 2024 · 408cd2c · 408cd2c
1 parent 8e2c689
commit 408cd2c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/docs/docs/sample-reflect-user-location.md b/docs/docs/sample-reflect-user-location.md
@@ -7,18 +7,14 @@ description: This section shows an example of how to reflect the client location
 
 ```js
 const map = new jsVectorMap({
-  ...
-  onLoaded(map) {
-    const button = document.querySelector('#request-location')
+  async onLoaded(map) {
+    const response = await fetch('https://ipinfo.io/geo')
+    const data = await response.json()
 
-    button.addEventListener('click', () => {
-      navigator.geolocation.getCurrentPosition((position) => {
-        map.instance.addMarkers({
-          coords: [position.coords.latitude, position.coords.longitude]
-        })
-      })
+    map.addMarkers({
+      coords: data.loc.split(','),
+      name: `${data.city} - ${data.country} (${data.ip})`
     })
   }
-  ...
 })
 ```
diff --git a/docs/src/components/Samples/ReflectUserLocation.vue b/docs/src/components/Samples/ReflectUserLocation.vue
@@ -1,7 +1,12 @@
 <template>
   <vector-map ref="map" class="mt-10" />
-  <div class="flex justify-center pt-5">
-    <button @click="request" :disabled="hasPosition" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 text-center mr-2 mb-2">Request location</button>
+  <div class="flex justify-center">
+    <div class="flex justify-center pt-5">
+      <button @click="getLocation" :disabled="hasPosition" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 text-center mr-2 mb-2">Find my location</button>
+    </div>
+    <div v-if="hasPosition" class="flex justify-center pt-5">
+      <button @click="clearLocation" class="text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-3 text-center mr-2 mb-2">Clear location</button>
+    </div>
   </div>
 </template>
 
@@ -12,21 +17,20 @@ export default {
     hasPosition: false
   }),
   methods: {
-    request() {
-      const map = this.$refs.map
-      navigator.geolocation.getCurrentPosition((position) => {
-        setTimeout(() => {
-          map.instance.addMarkers({
-            name: 'Egypt',
-            coords: [position.coords.latitude, position.coords.longitude]
-          })
-          this.hasPosition = true
-        }, 100)
+    async getLocation() {
+      const response = await fetch('https://ipinfo.io/geo')
+      const data = await response.json()
+
+      this.hasPosition = true
+      this.$refs.map.instance.addMarkers({
+        coords: data.loc.split(','),
+        name: `${data.city} - ${data.country} (${data.ip})`
       })
+    },
+    clearLocation() {
+      this.hasPosition = false
+      this.$refs.map.instance.removeMarkers()
     }
-  },
-  mounted() {
-    this.request()
   }
 }
 </script>