One of the most common functions of a mobile site is to provide a quick list of locations for the company you're interested in. Ideally, this list would be sorted based on the users current location. That is, company location closest to the users's current location would show at the top of the list.<\/p>\n
This involves a few things:<\/p>\n
<\/p>\n
One of the primary goals of this technique is to make it very easy for a non-programmer to update locations. This means that someone should be able to completely avoid JavaScript to add, remove, or change locations (include a location's lat\/long coordinates).<\/p>\n
We make this happen by leveraging HTML 5's data attribute. Although this is a new attribute, jQuery can retrieve it on older browsers, making it a perfect place to store a location's latitude and longitude.<\/p>\n
We then introduce the JavaScript (jQuery-based) to grab a user's location using the GeoLocation API and apply distance formula to grab the distance between the two points.<\/p>\n
Depending on your mobile framework and if you're site is relatively small, you might load all pages into the DOM at once, then let the framework handle the browsing for you. To improve performance, so we don't need to recalculate the distance for each location every time, we've included a variable that is toggled when the user first visits the location page and the distances are calculated. For our example, we're using the jQuery Mobile framework.<\/p>\n
Finally, once we have the distances, we use the JavaScript sort function to sort the array of locations, then insert the entire chunk of HTML into the DOM.<\/p>\n
<\/p>\n
<\/p>\n
\t<div class="location" data-lat="43.103254" data-long="-74.020356"> <\/p>\n <\/p>\n One of the most common functions of a mobile site is to provide a quick list of locations for the company you're interested in. Ideally,…<\/p>\n","protected":false},"author":1,"featured_media":1549,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[132],"tags":[250,252,235,86],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/1527"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":7,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/1527\/revisions"}],"predecessor-version":[{"id":1550,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/1527\/revisions\/1550"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/1549"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=1527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=1527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<div id="location-wrapper">
\n\t<div class="location" data-lat="42.106254" data-long="-76.020856">
\n\t <span class="distance"><\/span>
\n\t <strong>Location 1<\/strong>
\n\t 123 Main Street<br \/>
\n\t MyTown, FL 33952<br \/>
\n\t 941.123.4567
\n\t<\/div><\/p>\n
\n\t <span class="distance"><\/span>
\n\t <strong>Location 2<\/strong>
\n\t 456 South Street<br \/>
\n\t MyOtherTown, FL 33123<br \/>
\n\t 941.133.4532
\n\t<\/div><\/code><\/p>\nThe JavaScript \/ jQuery<\/h3>\n
if (typeof Number.prototype.toRad === 'undefined') {\r\n Number.prototype.toRad = function() {\r\n return this * Math.PI \/ 180;\r\n }\r\n}\r\n\r\n(function() {\r\n var locationsUpdated = false;\r\n var R = 6371;\r\n\r\n function checkUpdate() {\r\n if (locationsUpdated) {\r\n return true;\r\n }\r\n \r\n \/\/ loop over locations for closest to "location"\r\n if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(function(position) {\r\n\r\n \/\/ assign a distance to all locations\r\n $('.location').each(function() { \r\n var dLat = ($(this).data('lat') - position.coords.latitude).toRad();\r\n var dLon = ($(this).data('long') - position.coords.longitude).toRad();\r\n var lat1 = position.coords.latitude.toRad();\r\n var lat2 = $(this).data('lat').toRad(); \r\n\r\n var a = Math.sin(dLat\/2) * Math.sin(dLat\/2) +\r\n Math.sin(dLon\/2) * Math.sin(dLon\/2) * Math.cos(lat1) * Math.cos(lat2); \r\n <\/span> var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); \r\n <\/span> var d = (R * c) * .62;\r\n\r\n d = Math.round(d * 10) \/ 10;\r\n \r\n $(this).data('distance', d);\r\n $(this).children('.distance').addClass('available').html(d + ' mi.');\r\n }); \r\n\r\n \/\/ get array of dom elements\r\n var locationArray = $('.agency');\r\n \r\n \/\/ sort based on distance\r\n locationArray.sort(function (a, b) {\r\n a = parseInt($(a).data('distance'), 10);\r\n b = parseInt($(b).data('distance'), 10);\r\n if(a > b) {\r\n return 1;\r\n } else if(a < b) {\r\n return -1;\r\n } else {\r\n return 0;\r\n }\r\n });\r\n \r\n $('#location-wrapper').html(locationArray); \r\n });\r\n }\r\n \r\n locationsUpdated = true;\r\n }\r\n \r\n \r\n if (location.href.indexOf('locations') !== -1) {\r\n checkUpdate();\r\n }\r\n \r\n $(document).bind('pagebeforechange', function(event, data) {\r\n if (typeof data['toPage'] === 'string') {\r\n if (data['toPage'].indexOf('locations') !== -1) {\r\n checkUpdate();\r\n }\r\n }\r\n });\r\n\r\n})();<\/code><\/pre>\nThe CSS<\/h3>\n
.location { margin: 1em 0; }
\n\t.location strong { display: block; }
\n\t.location .distance { display: block; float: right; width: 70px;
\n\t margin-top: 2px; font-size: 11px;
\n\t line-height: 18px; color: #070;
\n\t border-radius: 10px; background: #f7f7f7;
\n\t text-align: center; }
\n\t.location .distance.available { border: 1px solid #888; }<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"