Geolocation support

[SylvainCorlay]

@wolfv produced a really nice demo making use of the browser geo location API to adapt content to the user location.

It may be interesting to expose such features in ipyleaflet or even in core ipywidgets.

One question that arises though is whether we want that location to be synced with the backend since multiple clients can connect to the same kernel.

cc @jasongrout @martinRenou

[martinRenou]

@deeplook I remember you were interested in something like that

[deeplook]

@martinRenou Thanks for the heads-up! I'll surely have a look!

[deeplook]

@SylvainCorlay Do you have a link, maybe?

[wolfv]

Here is the dirty example that I used. Works in the classic notebook (not jlab, because of the javascript magic):

%%javascript
require.undef('latlon_widget');

define('latlon_widget', ["@jupyter-widgets/base"], function(widgets) {

    var LatLonView = widgets.DOMWidgetView.extend({
        getLocation: function() {
              if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(this.showPosition.bind(this));
              } else {
                this.email_input.value = "Geolocation is not supported by this browser.";
              }
            },

        showPosition: function (position) {
            console.log(position)
            this.model.set('lat', position.coords.latitude);
            this.model.set('lon', position.coords.longitude);
            this.model.save_changes();

              this.email_input.value = 
                  "Latitude: " + position.coords.latitude +
              "<br>Longitude: " + position.coords.longitude;
            },
        // Render the view.
        render: function() {
            console.log(this.model)
            this.email_input = document.createElement('input');

            this.email_input.type = 'email';
//             this.email_input.value = '[email protected]';
            this.email_input.disabled = true;

            this.el.appendChild(this.email_input);
            this.getLocation();
        },
    });

    return {
        LatLonView: LatLonView
    };
});

from traitlets import Unicode, Bool, Float, validate, TraitError
from ipywidgets import DOMWidget, register

@register
class LatLon(DOMWidget):
    _view_name = Unicode('LatLonView').tag(sync=True)
    _view_module = Unicode('latlon_widget').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)

    lat = Float(0.0).tag(sync=True)
    lon = Float(0.0).tag(sync=True)

my_loc = LatLon()
my_loc

Then you can ask for lat and lon (after waiting a little bit:

my_loc.lat
my_loc.lon

[deeplook]

Awesome, works!

[gbrault]

you can use this in jupyter lab if you can install jupyter server proxy

https://github.com/gbrault/jpjwidgets