Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    Chapter 7. Location, Location, Location > Time for action — finding the closest...

    Time for action — finding the closest franchise the hard way

    There are multiple reasons to code for situations where the location object is not available. Older versions of Internet Explorer and some marginal browsers do not support it. But there will also be times when the location is found incorrectly or you may want to find franchise locations that are not near the the computer or the handheld's current location. In these cases, the dependance on this feature is an inconvenience to the user. We need to write the code for that use case:

    1. Create a form in the templates/close2u_container.tpl.php file to handle user input of location data. Add the following lines to the top of the template:

      Code View: Scroll / Show All
      <div class="close2u-enter-location-container" style="display:none;">
<form action="/close2u/address" method="get" accept-charset="utf-8" id="close2u-enter-location" name="close2u-enter-location">
<label for="close2u-enter-location-text">Enter an Address or Postal Code</label>
<input id="close2u-enter-location-text" name="close2u-enter-location-text" placeholder="Enter an Address or Postal Code">
<input type="hidden" name="list_id" value="<?php echo $list_id;?>" id="list_id" class="close2u-enter-location-list-id">
<p><input type="submit" value="find &rarr;"></p>
</form>
</div>

    2. Edit the close2u.js file as follows. Delete the alert("location fail!"); line and add the following lines to the locationFail function to show the location form. Bind a submit event to the form so it can be submitted via AJAX: 

      jQuery(".close2u-enter-location-container")
.show()
.find("form")
.submit(Drupal.behaviors.close2u.userEnterLocationHandler);
},

    3. Edit the close2u.js file as follows. Create a userEnterLocationHandlerfunction to handle user-submitted location data and send it to the close2u module:

      Code View: Scroll / Show All
      userEnterLocationHandler: function(evt) {
if (evt) evt.preventDefault();
jQuery.getJSON(jQuery(this).attr("action"), jQuery(this).serialize(), Drupal.behaviors.close2u.saveOrigin);
return false;
}

    4. Create an entry in the hook_menu for the function that will mimic the call to the geolocation object:

      Code View: Scroll / Show All
      function close2u_menu() {
$items = array();
$items['close2u'] = array(
"page callback" => "close2u_page",
"page arguments" => array(2),
'access callback' => TRUE,
"type" => MENU_CALLBACK,
);
$items['close2u/find/node'] = array(
"page callback" => "close2u_find",
"page arguments" => array(2),
'access callback' => TRUE,
"type" => MENU_CALLBACK,
);

page finishingsteps$items['close2u/marker/%node'] = array(
"page callback" => "close2u_marker_retrieve",
"page arguments" => array(2),
'access callback' => 'node_access',
'access arguments' => array('view', 2),
"type" => MENU_CALLBACK,
);
$items['close2u/address'] = array(
"page callback" => "close2u_address_entry",
"page arguments" => array(2),
'access callback' => TRUE,
"type" => MENU_CALLBACK,
);
return $items;
}

    5. Edit the close2u module. Create the function to mimic the call to the geolocation object:

      Code View: Scroll / Show All
      function close2u_address_entry() {
module_load_include("module", "gmap", "gmap");
module_load_include("inc", "location", "geocoding/google");
$response = google_geocode_location(array("street" => $_REQUEST['close2u-enter-location-text']));
if (is_array($response)) {
jsonjsonechojson_encode(array("coords" => array("longitude"=> (float)$response['lon'], "latitude" => (float)$response['lat']), "timestamp" => time(), "list_id" => $_REQUEST['list_id']));
} else {
jsonjsonechojson_encode(array("error" => "<h1>Google is unable to find the location you entered.</h1>"));
}
exit();
}

    6. Alter the saveOrigin function in close2u.js to handle error messages: 

      saveOrigin: function(position) {
if (position) {
if (position.error != undefined) {
$("#"+position.list_id).html(position.error);
} else {
Drupal.settings.close2u.origin = position.coords;
Drupal.settings.close2u.origin.timestamp = position.timestamp;
jQuery(Drupal.behaviors.close2u).trigger("locationChange");
}
}
},

    7. Edit the sites/all/themes/dpk/css/styles.css file and add the following lines:

      .close2u-list {
-moz-column-count: 4;
-moz-column-gap: 1em;
-webkit-column-count: 4;
-webkit-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}

    8. Edit the sites/all/themes/dpk_mobile/css/global.css and add the following lines:

      .close2u-list {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
}

    9. Navigate to http://dpk.local/locations. If the browser asks if you want to allow it to use geolocation, click on Don't Allow. You should see something like what is seen in the following screenshot:

    10. Enter 22202 into the Enter an Address or Postal Code text field and click on find:


      

    You are currently reading a PREVIEW of this book.

                                                                                            

    Get instant access to over
    $1 million worth of books and videos.

      

    Start a Free Trial