Problem/Motivation

In the form display I have chosen the Geofield map widget. At the end I have "Use HTML5 Geolocation to set default values" checked. This gives me a button to find my current position. Is it possible to fire this event automatically, when the form is opened?

CommentFileSizeAuthor
#17 Screenshot 2022-06-30 100402.png74.95 KBdroprocker
#14 Screenshot 2022-06-29 160534.png191.1 KBdroprocker
#12 Screenshot 2022-06-29 at 15.12.25.png740 KBitamair
#9 Screenshot 2022-06-29 at 12.09.04.png2.42 MBitamair
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

droprocker created an issue. See original summary.

  • itamair committed 5fb50be on 8.x-2.x 
    Issue #3280092: Automatic HTML5 Geolocation possible?
itamair’s picture

itamair CreditAttribution: itamair commented
Status: Active » Fixed

Thanks @droprocker
this is indeed a functionality that could and should implemented,
so I decided to dedicate some good effort on this, and it looks that I found a good solution that might match with different use cases that could interest the Geofield Map widget
(cases where the user defines forced default values, need not to always pre-set new values on multi values Geofield field, etc.0.

Hence I implemented with this commit: https://git.drupalcode.org/project/geofield_map/-/commit/5fb50be805fe91a...
a solution that uses the HTML Geolocation API to enable the following features:

  • An initial automatic set of the Geofield value to the user location, if the Geofield Value and/or a Default value is not set (Position Lat: 0, Lon: 0 is interpreted as NULL)
  • A 'Find my location' button that once clicked will manually set the Geofield value to the user location

This is being deployed into 8.x-2.x dev branch, and will be part of new 8.x-3.x dev branch and 8.x-3.0 Geofield Map release ...

  • itamair committed 0622ce4 on 8.x-2.x 
    Refinement of Automatic HTML5 Geolocation: The initial automatic set of...
droprocker’s picture

droprocker CreditAttribution: droprocker commented
Version: 8.x-2.75 » 8.x-2.82
Status: Fixed » Needs work

Hi itamair, thanks for your effort! But I cannot get it to work and it also seems to break the current behaviour of the widget.
I've updated from 2.75 to 2.82. The Geolocation isn't set automatically. Do I have to change the settings? If I understand it right in the description it should work out-of-the-box.

Additionally, if I press the "Find my location" button the form seems to be executed and validated, like it would if I hit "Save". But the location isn't set.

For now, I have to go back to 2.75, since this issue seems to break the functionality.

  • itamair committed 6d5d64f on 8.x-2.x 
    Issue #3280092 by itamair: Automatic HTML5 Geolocation possible?

  • itamair committed 3f661f4 on 8.x-2.x 
    Issue #3280092 by itamair: Automatic HTML5 Geolocation possible?
itamair’s picture

itamair CreditAttribution: itamair commented
Status: Needs work » Needs review

Thanks for reporting this @droprocker
Indeed with the last implementation if the HTML5 Geolocation is blocked for some reason the automatic Geolocation won't work,
and the "Find My Location" click wasn't preventing the default behaviour (of triggering a Submit Form action)

For instance it could be the case of using or testing this in a not SSL domains,
that would trigger the following js console error message:

[blocked] Access to geolocation was blocked over insecure connection to ...

(@see attached image)

Please test and review the new 8.x-2.84 release, that should have fixed this ...
(be sure to test this on an SSL domain)

itamair’s picture

itamair CreditAttribution: itamair commented
FileSize
Screenshot 2022-06-29 at 12.09.04.png2.42 MB
droprocker’s picture

droprocker CreditAttribution: droprocker commented

Unfortunatly it's not working. The only improvement is that the "Find my location" button has no action at all, instead of triggering the "Save" button. Tested with SSL local and on production.

itamair’s picture

itamair CreditAttribution: itamair commented

thanks again for checking @droprocker
That's strange as it is working fine on my Local env, with SSL.

As I am not easily able to test this on a SSL not local env ...
Could you do some step forward on this?
You should be able to debug the geolocation.js file from the the Edit page where you have your Geofield Map Widget,
you should be able to set a breakpoint at code line #18
(#see the attached image)
inspect step by step and check why the updateGeoLocationFields function is not triggered/reached at line #54 ...

Please also consider that automatic Geolocation would work only on the first empty instance of an empty Geofield field ...
(while the "Find My Location" click should always work, is on a SSL domain).

Please document me back your findings ... eventually also with some clear screenshot.

itamair’s picture

itamair CreditAttribution: itamair commented
FileSize
Screenshot 2022-06-29 at 15.12.25.png740 KB
droprocker’s picture

droprocker CreditAttribution: droprocker commented

I found something:

// Trigger the HTML5 Geocoding only if not in the Geofield Field
// configuration page.
if ($(context).find('#edit-field-geofield-wrapper').length && navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(updateLocation, errorUpdateLocation);
}

In line 18 you try to find #edit-field-geofield-wrapper, but this id is dynamic. I my case it should be #edit-field-bf-geofield-wrapper since "field-bf-geofield" is the machine name of the field.

If I change this id to my field id the "Find my location" button gets back to work, but the automatic triggering is not working.

droprocker’s picture

droprocker CreditAttribution: droprocker commented
FileSize
Screenshot 2022-06-29 160534.png191.1 KB

Maybe this screenshot helps as well...

In line 24 "position" is undefined.

  • itamair committed fcb412f on 8.x-2.x 
    Further implementation of Automatic HTML5 Geolocation (Issue #3280092)
itamair’s picture

itamair CreditAttribution: itamair commented

Thanks a lot. Very nice catch ...
I have provided this further refactoring of geolocation.js: https://git.drupalcode.org/project/geofield_map/-/commit/fcb412f302b8ede...
and (very confidently) deployed a new 8.x-2.85 version ...

May you check/test this and see if it works as expected.
Please note that Automatic HTML5 Geolocation won't/shouldn't work on the specific Geofield Default settings page.

droprocker’s picture

droprocker CreditAttribution: droprocker commented
FileSize
Screenshot 2022-06-30 100402.png74.95 KB

I can confirm that the automatic location is now working! Yeah! Thanks for that!!!

Only one thing: The map doesn't update and still shows 0,0. Only after hitting "Find my location" button the map updates its location.

itamair’s picture

itamair CreditAttribution: itamair commented

@droprocker ... well no, that's not supposed to happen.
But bear in mind, as I mentioned, that (for design and module functional logics reasons) the Automatic HTML5 Geolocation will (and should work automatically) only in case of
- Content first Insert;
- not Default value (different from 0,0) has been set for the Geofield ... (first instance);
- SSL domain (of course);

Could you test the above use case?
It should really work ...

You can test the geofield_map/js/geolocation.js file form its code line #36

droprocker’s picture

droprocker CreditAttribution: droprocker commented

I can't test the behaviour in detail right now, i'm close to my vacation. But what I I've tested so far is:

- I opened the form in incognito browser mode to prevent caching problems
- the first time the browser asks for permission to get the current location, which I grant.
--> everything works fine! Fields and map are updating.
- the second time (not reopening the browser, same session) the browser is not asking for permission (which is clear, it already has the permission)
--> location gets filled in lat/long fields, but map isn't updating, not before hitting "find my location".

In the geofield field I delete the defaults, which are 0,0. But they reappear every time I reopen the settings page. Don't know if this a wanted behaviour.

Also strange:
- I've tested on PC with Chrome and Firefox. Firefox on PC is working fine. Chrome not.
- I've tested on Smartphone Chrome and Firefox. Both are not working, respectively as I described above.

I hope this helps...

calbasi’s picture

calbasi
Primary language Catalan
Location Catalonia
CreditAttribution: calbasi at calbasi.net for calbasi.net commented

Not working from my side, but maybe I don't understand the requirements. Should I have these 3 conditions altogether?

- Content first Insert;
- not Default value (different from 0,0) has been set for the Geofield ... (first instance);
- SSL domain (of course);

Right now I have a default value, because my field settings can set a 0,0 value (it shows a map, not a coordinate field). I'm going to try to render coordinates there to set 0,0 and test it again

Edit: Enabling "display coordinates" setting at "form-display" field settings, setting it to (0,0) at field settings ("fields" tab) it runs as designed :-p

chucksimply’s picture

chucksimply CreditAttribution: chucksimply commented

I think these should be totally separate options.

1) Use HTML5 Geolocation to set Default Values.
2) Add a "Find My Location" button that manually sets the user location.

There can be many use cases where a user doesn't want the map to default to the user location. But still wants a "find my location" button so the user can manually set it.

In my use case, I'm using js to generate a default map location... but still want the user to have the ability to manually point to their location. The current option "Use HTML5 Geolocation to set Default Values" overrides my js map location. And obviously, if I uncheck this setting option, the "find my location" button disappears.

Separating these out seems like a logical solution, no?

Problue Solutions’s picture

Problue Solutions
Location Northern Ireland
CreditAttribution: Problue Solutions commented

This works fine for me on the field widget.

Is there any possibility of this being added to the views plugin?

itamair’s picture

itamair CreditAttribution: itamair commented

@Problue_Solutions please refer to this support request of you that I just answered: https://www.drupal.org/project/leaflet/issues/3351314#comment-14991657
to fulfil also this one of you, on this Goefield Map module, considering that in this case you should rather use the Geofield map 'geofieldMapInit' event triggered from here: https://git.drupalcode.org/project/geofield_map/-/blob/8.x-2.x/js/geofie...
and of course use the Google Maps API documentation, rather than the Leaflet Js library one.

Problue Solutions’s picture

Problue Solutions
Location Northern Ireland
CreditAttribution: Problue Solutions commented

itamair, as per my reply on the other thread, thank you so much for the pointers and guidance, you are an incredible asset to the Drupal community and sharing these quick pointers to orientate me in the right direction is exactly what i need to go and invetsigate and test further, and hopefully answer some questions in future instead of just asking them!