Proximity Field - Use HTML5 Geolocation as source

Interested...

Hello Mark,

I am testing your patch and trying to implement the following functionality:
I already have the map like this http://take.ms/2HXCR (important things marked as red).
So, then I am typing address, e.g. London and put Destination, I see the centre of London plus 15 miles.
However, by default, without "address" & "destination" I want to see venues near me in radius 15 miles.
Could you explain more about you patch?
Because I found the settings of the 'Client location (HTML5)' there http://take.ms/f3GBd (http://take.ms/jF1Fr) and can not understand how to tie it with "Filter criteria". I believe it should be like this http://take.ms/xBiE8, but my opinion can be wrong. In the result, I got this map http://take.ms/haD9W.

Could you review my comment?
Thank you in advance.

@mrkdboyd, thank you. Will try again after your comment.

@mrkdboyd,

I have been trying to find a way to replicate a function I've used on older Drupal sites -- simply sorting a set of results based on closest to the user, using the HTML5 location / api built into browsers. I am pretty surprised that there just doesn't seem to be anything like this out there, so I'm attempting to use your patch as a starting place to get this going.

I've patched your code, but so far, I've not been able to see this working. This doesn't seem to be prompting the user for their location, and so I'm never getting any geolocation results back (for the user). Was there anything special that needs to be done in order to prompt the user's browser to share the location? In the past I've never had any issues getting this to work, but I'm still working though the changes to Drupal 8.

Also, what would be involved to extend your patch so it can support sorting closest to the user?

Thanks for your contribution!!

[EDIT]

I discovered the issue here. I have been using one list as results, and a map attachment floated to the right, to display the map. I had to remove references to a map from the code, as the promise was never resolving for mapLoaded.

The only other question at this point would be -- do you have any ideas on how I might display nothing if location is denied or cannot be determined? I'm basically building a directory listing sorted by closest to the user, but it is pointless if the location cannot be determined. I wanted to use a filter when the proximity was 0, but since this code is focused on the field, I wasn't sure the best way to handle that. I'm looking into a few options to refresh and change settings and the like, but I was hoping maybe you had a solution you might recommend.

Thank you!

The patch works well!
Is it possible do not show results until the ajax request?
Is it going to be merged to the module code?
Thanks!

Added an error callbacks api so that custom JS can respond to errors such as the user denying the location.

I get "bad git-diff - expected dev/null on line 23" when trying to patch it with git.

Am I missing something here?

ok, resolved part of it. However, I still get the following when trying to apply the last patch:

error: patch failed: js/geolocation-google-maps-api.js:434
error: js/geolocation-google-maps-api.js: patch does not apply

10 Sep 2017 was new DEV version of the module. Probably we need to update the patch to.

I rolled back to commit #cb68b54 so the patch would apply. I set the client source to 'Client location (HTML5)' but when I check the view I do not get prompted from my browser (tried multiple) for my location. Is there something I'm missing here? I'm just trying to built a list of locations, there is not map involved.

#17 seemed to have a simular problem but it does not look the same issue.

I've rerolled the patch to work on the latest version but I can't actually get it working. It never seems to prompt the user for their location. I'll have another look and see if I can see what's occurring (or not in this case) as I definitely need this for a current project.

@welly

It never seems to prompt the user for their location.

The problem for me was that I was in my dev environment and I was not using https. In Firefox 55 or Chrome 50 and higher, only HTTPS pages will be able to request location. Switching to https fixed the issue for me.

Thanks @rgeerolf, I'll try that out and see if it makes any difference!

I think it needs to be rerolled again for the latest 1.x version

Any updates on this? I'm able to make the changes manually by combing through the patch, but composer chokes on running the patch.

I have rerolled the patch but also haven't gotten it to work.

I updated the beginning of viewsForm() to this and now I am seeing that it asks for Geo Locations but it still does not work.

if ($this->options['proximity_source'] != 'user_input' && $this->options['proximity_source'] != 'client_location') {
      unset($form['actions']);
      return;
    }

@mrkdboyd (or anyone that understands this) I am going through geolcations-html.js and I am not understanding how data gets added to Drupal.geolocation.html5.resultCallbacks (Drupal.geolocation.html5.resultCallbacks is empty so it does not go any further). I don't see anything calling addResultCallback().

The attached patch is #23 rerolled for the latest. I was seeing better results compared to the one from #34. I still wasn't able to quite get the results I wanted so I created a custom field formatter (overwrote ProximityField and extended it) and used 1.1.

In my view:
- Add proximity field as a field. Choose User input
- Make sure to set view to use Ajax

my_module.views.inc:

/**
 * @file
 * Provide views data for my module.
 */

/**
 * Implements hook_views_plugins_field_alter().
 */
function mymodule_views_plugins_field_alter(array &$plugins) {
  $plugins['geolocation_field_proximity']['class'] = 'Drupal\mymodule\Plugin\views\field\RangeProximityField';
}

RangeProximityField.php

namespace Drupal\mymodule\Plugin\views\field;

use Drupal\geolocation\Plugin\views\field\ProximityField;
use Drupal\Core\Form\FormStateInterface;

/**
 * Field handler for geolocation field.
 *
 * The Proximity Field handler (at the time) did not have a working ability
 * for handling range based on user's location.  This overwrites the
 * ProximityField handler and makes changes as needed.
 *
 * @ingroup views_field_handlers
 *
 * @ViewsField("geolocation_field_proximity")
 */
class RangeProximityField extends ProximityField {

  /**
   * {@inheritdoc}
   */
  public function query() {
    parent::query();

    // If range is set only display items within range.
    if ($range = $this->view->getRequest()->get('range', FALSE)) {
      $this->query->addHavingExpression(0, $this->field_alias . ' <= :num', [':num' => $range]);
    }
  }

  /**
   * Form constructor for the user input form.
   *
   * @param array $form
   *   An associative array containing the structure of the form.
   * @param \Drupal\Core\Form\FormStateInterface $form_state
   *   The current state of the form.
   */
  public function viewsForm(array &$form, FormStateInterface $form_state) {
    parent::viewsForm($form, $form_state);

    $range = $this->view->getRequest()->get('range', FALSE);
    $form['range'] = [
      '#type' => 'select',
      '#options' => [
        0 => 'All Dealers',
        40 => '40 miles away',
        60 => '60 miles away',
        80 => '80 miles away',
        100 => '100 miles away',
        200 => '200 miles away',
      ],
      '#default_value' => $range,
      '#empty_option' => t('Choose Distance From Your Current Location'),
      '#maxlength' => 255,
      '#weight' => -100,
      '#required' => TRUE,
    ];

    // Sets the fields to hidden.
    $form['proximity_lat']['#type'] = 'hidden';
    $form['proximity_lng']['#type'] = 'hidden';

    // Hides the submit button.
    unset($form['actions']);

    // Add Library for handling proximity.
    $form['#attached']['library'] = [
      'mymodule/range_proximity',
    ];
  }

}

mymodule_range_proximity.js

/**
 * @file
 *   Javascript for integrating the W3C Geolocation API.
 */

(function ($, Drupal, drupalSettings, navigator) {

  'use strict';

  /**
   * @namespace
   */
  Drupal.range_proximity = Drupal.range_proximity || {};
  Drupal.range_proximity.html5 = Drupal.range_proximity.html5 || {};

  /**
   * Attach HTML5 geolocation functionality.
   *
   * @type {Drupal~behavior}
   */
  Drupal.behaviors.mymodule_geolocationHTML5 = {
    attach: function (context) {
      $.each(drupalSettings.views.ajaxViews, function (index, view) {
        $('.js-view-dom-id-' + view.view_dom_id + ' select').on('change', function () {
          Drupal.range_proximity.html5.getClientLocation(this.value, context);
        });
      });
    }
  };

  /**
   * Refresh view.
   *
   * @param string domid
   *   Element dom id.
   * @param object coordinates
   *   Coordinates.
   * @param int range
   *   Range.
   * @param object context
   *   Context object.
   */
  Drupal.range_proximity.html5.refreshView = function(domid, coordinates, range, context) {
    // Get the AJAX settings for this view.
    var viewSettings = Drupal.views.instances['views_dom_id:' + domid];
    var geolocationAjaxSettings = viewSettings.element_settings;

    // Change the progress indicator.
    geolocationAjaxSettings.progress.type = 'throbber';

    // Add the coordinates to the data to be submitted with the
    // request.
    geolocationAjaxSettings.submit['proximity_lat'] = coordinates.latitude;
    geolocationAjaxSettings.submit['proximity_lng'] = coordinates.longitude;
    geolocationAjaxSettings.submit['range'] = range;

    // Use AJAX to refresh the view.
    $('.js-view-dom-id-' + domid).trigger('RefreshView');
  };

  /**
   * Get client location.
   *
   * @param int range
   *   Range.
   * @param object context
   *   Context object.
   */
  Drupal.range_proximity.html5.getClientLocation = function (range, context) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        $.each(drupalSettings.views.ajaxViews, function (index, view) {
          Drupal.range_proximity.html5.refreshView(view.view_dom_id, position.coords, range, context)
        });
      }, function (error) {
        if (error.code === error.PERMISSION_DENIED) {
          var message = '<div class="geo-permission-denied alert alert-info" role="alert">Your browser\'s gelocation was declined for this website. Please try again or check your browser settings.</div>';
          Drupal.range_proximity.html5.removePermissionDeniedMessage();
          $('h1').after(message);
        }
      });
    }
  };

  /**
   * Removes the permission denied message.
   */
  Drupal.range_proximity.html5.removePermissionDeniedMessage = function () {
    $('.geo-permission-denied').remove();
  };

})(jQuery, Drupal, drupalSettings, navigator);

In #2936637: In "Filter Criteria" the "Proximity" filter does not work (v2) the whole proximity handling was massively reworked. The "client location" behavior as described here is now fairly easy to built. I couldn't though, because my local dev setup does not support client location. Will do so in a bit.

Straight forward location input plugin.
- set client location if available
- optionally hide form
- optionally auto-submit

P.S. The range thingie should go to its issue. It does not really belong here, but would be a nice feature.