How to trigger geolocation on map load? about vue-mapbox-gl HOT 16 CLOSED

Great, you basically included nextTick in the useControl logic. Thanks. Issue closed :)
Thanks for the follow-up, and the latest version of your code snippet.

from vue-mapbox-gl.

Hey @tmlmt, sorry to hear that this is still an issue. I am away for some days, I'll have a look at this when I get back.

from vue-mapbox-gl.

The MapboxGeolocateControl component exposes a control key that you can access with a template ref (see doc).

Something like the following should work:

<script setup>
  import { ref, watch } from 'vue';
 
  const geolocate = ref();

  watch(geolocate, (geolocateControl) => {
    if (geolocateControl) {
      geolocateControl.control.trigger();
    }
  });
</script>

<template>
  <mapbox-map>
    <mapbox-geolocate-control ref="geolocate" />
  </mapbox-map>
</template>

from vue-mapbox-gl.

Thanks for pointing this expose out. Unfortunately, this doesn't work. It says Geolocate control triggered before added to a map

In fact, the following happens:

Log:

Uncaught TypeError: geolocate.value is undefined // from @mb-load (i.e. map.on('load'))
Geolocate control triggered before added to a map // that's the first doTrigger() from the watcher
// The doTrigger() after the timeout finally executes trigger() correctly

Code:

<script setup>
  import { ref, watch } from 'vue';
 
  const geolocate = ref();

  const doTrigger = () => {
    geolocate.value.control.trigger();
  };

  watch(geolocate, (geolocateControl) => {
    if (geolocateControl) {
      doTrigger();
      setTimeout(doTrigger, 1500)
    }
  });
</script>

<template>
  <mapbox-map @mb-load="doTrigger">
    <mapbox-geolocate-control ref="geolocate" />
  </mapbox-map>
</template>

This tends to indicate that what is suggested by mapbox-gl-js's documentation or the initial github issue on the subject cannot be reproduced with vue-mapbox-gl

from vue-mapbox-gl.

Could you set up a reproduction project on stackblitz or any other tool? This would help me debug this.

from vue-mapbox-gl.

There you go: https://stackblitz.com/edit/github-jbfwmb?file=README.md

from vue-mapbox-gl.

Any news on this one @titouanmathis? Shall the issue be reopened?

from vue-mapbox-gl.

The problem comes from the useControl utility function which assigns the control instance before adding it to the map, see https://github.com/studiometa/vue-mapbox-gl/blob/develop/packages/vue-mapbox-gl/composables/useControl.js#L39-L43.

Based on my previous example, wrapping the trigger() call in a setTimeout (or nextTick) fixes the issue by delaying its execution to after adding the control to the map.

<script setup>
  import { ref, watch, nextTick } from 'vue';
 
  const geolocate = ref();

  watch(geolocate, (geolocateControl) => {
    if (geolocateControl) {
      nextTick(() => geolocateControl.control.trigger());
    }
  });
</script>

<template>
  <mapbox-map>
    <mapbox-geolocate-control ref="geolocate" />
  </mapbox-map>
</template>

I will push a fix to change the behavior of the useControl function, so that any watch function on a control will be called after the control has been added to the map.

from vue-mapbox-gl.

Thanks Titouan. You rock.

Just for me to understand, with the fix you'll push, is it expected that things will work as intended without manually adding a nextTick or setTimeout?

from vue-mapbox-gl.

Have you tested your fix, @titouanmathis? The Stackblitz above, updated with v2.0.3, still says "Geolocate control triggered before added to a map". I still need nextTick for things to work. setTimeout with 1.5s doesn't, for some reason I do not understand.

from vue-mapbox-gl.

I published a fix in 2.0.4 that should improve timings so the control would be exposed only after being added to the map. You might still encounter some warnings if geolocation is disabled in the browser as the permissions API is async (see MDN).

The snippet I gave you was also not quite right, as we are watching the ref and not its control property. Since the control property is set lazily, the watcher on the ref will not be trigger when this property changes.

It works (in Firefox) when using a computed:

const geolocate = ref();
const control = computed(() => geolocate.value?.control);

watch(control, (geolocateControl) => {
  if (geolocateControl) {
    geolocateControl.trigger();
  }
});

See https://stackblitz.com/edit/github-jbfwmb-b5jqlq?file=app.vue.

from vue-mapbox-gl.

Hey @titouanmathis, coming back to this issue, as the same latest Stackblitz you give does not work on Chrome / Chromium, with still the same error: Geolocate control triggered before added to a map, while it indeed still works in Firefox. What could we do?

from vue-mapbox-gl.

Hey @tmlmt, I opened a PR which should fix this bug in Chrome and Safari, could you test it to confirm it works for you as well?

You can test it here: https://deploy-preview-106--vue-mapbox-gl-demo.netlify.app/issue-77

from vue-mapbox-gl.

Hey @titouanmathis, thanks a lot for setting this up.
I can confirm that on mobile (iOS), things work with Chrome, Firefox, Safari and Brave.
However, on laptop as I just tried, things don't work on Chrome nor on Firefox. I see Can use the trigger() method in the console, and the browser is asking me to confirm that I allow location sharing, but the location doesn't show on the map:

• On Chrome, I get the following error message: Network location provider at 'https://www.9oo91eapis.qjz9zk/' : ERR_BLOCKED_BY_CLIENT.
• On Firefox, I don't see any additional error.
  Could that be due to deploying this preview on Netlify?

from vue-mapbox-gl.

Thanks for the feedback!

On Chrome, I get the following error message: Network location provider at 'https://www.9oo91eapis.qjz9zk/' : ERR_BLOCKED_BY_CLIENT.

This error might be due to an adblocker or a configuration in your browser, but the fact that the request happens tells us that the geolocation is correctly triggered.

On Firefox, I don't see any additional error. Could that be due to deploying this preview on Netlify?

I don't think so, the demo on Netlify is working fine with Firefox on my end. I would suspect an extension or a configuration of your browser, like in Chrome.

from vue-mapbox-gl.

Hey @titouanmathis, sorry for not reverting sooner.

• Chrome: I confirm that it works. The error message came from my test using ungoogled-chromium, a Chromium version stripped out of all google stuff. That error is thrown (with that dummy google-ish url) to signal a blocked connection attempt to Google servers. It looks like when the Geolocation feature of Mapbox is triggered, something is shared with Google (!). Good to know...
• Firefox: I confirm that it works on my end when retrying from a known wifi network.

So we're good to go I think :) Thanks for your help with this one again.

from vue-mapbox-gl.