Tell Me More: About the Code

FindNearby Apex Class Query

This snippet is a dynamic SOQL query that uses variables passed in from the Visualforce page to find warehouses within 20 miles of the device accessing the page. This page works on any mobile device and HTML5–enabled desktop browser.

If the page is unable to obtain the location, the search is centered on San Francisco. If you test this from a browser, you might have to approve that the page can access your location depending on your device security settings.

1 String queryString =
2    'SELECT Id, Name, Location__Longitude__s, 
3     Location__Latitude__s, ' +
4    Street_Address__c, Phone__c, City__c ' +
5    'FROM Warehouse__c ' +
6    'WHERE DISTANCE(Location__c, 
7    GEOLOCATION('+lat+','+lon+'), \'mi\') < 20 ' +
8    'ORDER BY DISTANCE(Location__c, 
9    GEOLOCATION('+lat+','+lon+'), \'mi\') ' +
10    'LIMIT 10';

Visualforce Page initialize Function

The initialize function in the Visualforce page uses the HTML5 geolocation API to get the coordinates of the user. The browser gets the position without using any plug-ins or external libraries, and then uses JavaScript remoting to invoke the getNearby function in the Apex controller and passes in the coordinates.

1function initialize() {
2    var lat, lon;
3              
4    // Check to see if the device has geolocation 
5    // detection capabilities with JavaScript
6    if (navigator.geolocation) {
7        navigator.geolocation.getCurrentPosition(
8            function(position){
9            lat = position.coords.latitude;
10            lon = position.coords.longitude;
11
12            //Use VF Remoting to send values to be 
13            //queried in the associated Apex Class
14            Visualforce.remoting.Manager.invokeAction(
15                '{!$RemoteAction.FindNearby.getNearby}', lat, lon,
16                function(result, event){
17                    if (event.status) {
18                        console.log(result);
19                        createMap(lat, lon, result);
20                    } else if (event.type === 'exception') {
21                        //exception case code
22                    } else {
23
24                    }
25                }, 
26                {escape: true}
27            );
28        });
29    } else {
30    //Set default values for map if the device doesn't
31    //have geolocation capabilities
32         /** San Francisco **/
33         lat = 37.77493;
34         lon = -122.419416;
35
36         var result = [];
37         createMap(lat, lon, result);
38    }

Visualforce Page Redirect Code

The page FindNearbyWarehousesPage uses the Google Maps JavaScript API v3 to plot the nearby warehouses on a map. We resize the map based on the records returned by the SOQL query and plot each record as marker on the map.

The most important piece of the code is where we determine whether or not the page is being viewed in the Salesforce app. If it is, the redirect link to the warehouse record must be coded slightly differently. If the page runs in the Salesforce app, we must use the navigateToSobjectRecord method to go to the record detail page but still stay in the app. We can check this with a simple try/catch construct, and then set the redirect link accordingly.

1try{
2    if(sforce.one){
3    warehouseNavUrl =
4        'javascript:sforce.one.navigateToSObject(
5        \'' + warehouse.Id + '\')';
6    }
7} catch(err) {   
8    console.log(err);
9    warehouseNavUrl = '\\' + warehouse.Id; 
10} 
11    var warehouseDetails = 
12        '<a href="' + warehouseNavUrl + '">' + 
13        warehouse.Name + '</a><br/>' + 
14        warehouse.Street_Address__c + '<br/>' + 
15        warehouse.City__c + '<br/>' + 
16        warehouse.Phone__c;