{"id":24106,"date":"2016-08-18T03:01:53","date_gmt":"2016-08-17T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24106"},"modified":"2016-08-12T22:16:20","modified_gmt":"2016-08-12T12:16:20","slug":"html5-geolocation-api-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-geolocation-api-primer-tutorial\/","title":{"rendered":"HTML5 Geolocation API Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/moving_or_not.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Geolocation API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geolocation_ipad_wifialways.jpg\"  \/><\/a><p class=\"wp-caption-text\">HTML5 Geolocation API Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve written a small HTML5 <a target=_blank title='Geolocation information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Geolocation'>Geolocation<\/a> <a target=_blank title='Web API information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Web_API'>API<\/a> web application today, that has at its core the great advice from this <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/geolocation\/trip_meter\/'>great link<\/a>, so, thanks.<\/p>\n<p>You might recall from recent times here at this blog our admiration for these &#8220;where&#8221; based applications that start you off with WiFi at the beginning of your travel but don&#8217;t rely on an internet connection from then on, at <a target=_blank title='Google offline maps' href='https:\/\/support.google.com\/maps\/answer\/6291838?hl=en'>Google offline maps<\/a> that we referred to with the &#8220;Did you know?&#8221; section of the recent <a target=_blank title='HTML Marquee and Data Feeds and the Cache Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-marquee-and-data-feeds-and-the-cache-primer-tutorial\/'>HTML Marquee and Data Feeds and the Cache Primer Tutorial<\/a>.<\/p>\n<p>Well, today, we start off on a homegrown HTML5 Geolocation API web application that works best &#8230;<\/p>\n<ul>\n<li>at the launch of the web application we&#8217;d prefer you to have WiFi connection current &#8230; then &#8230;<\/li>\n<li>as required, the Geolocation API functionality confirms that you allow the location of the device to be accessed &#8230; and if you say &#8220;Yes&#8221; then &#8230;<\/li>\n<li>you see an HTML table made up of three columns &#8230;\n<ol>\n<li>Start location: Name (optionally user defined), Latitude, Longitude fields (Geolocation API defined, and only relying on Javascript client once okayed initially), and a <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Chart Map Chart information from Google'>Map Chart<\/a> (that needs WiFi) &#8230; that will show and work with a current WiFi connection to the internet &#8230; is set once and then Javascript <i>setTimeout<\/i> moves dynamic changes to location being reflected by the next two columns, namely &#8230;<\/li>\n<li>Travel location: Optional Name (optionally user defined), Latitude, Longitude fields (Geolocation API defined, and only relying on Javascript client once okayed initially), and a Google Charts Map Chart (that needs WiFi) &#8230; that will show initially but will only work during the trip with a WiFi connection to the internet within reach of your device &#8230; you can click the &#8220;Travel&#8221; link to set the dynamic location changes to only show on &#8230;<\/li>\n<li>End location: Name (optionally user defined, at any time), Latitude, Longitude fields (Geolocation API defined, and only relying on Javascript client once okayed initially), and a Google Charts Map Chart (that needs WiFi) &#8230; that will show initially but will only work during the trip with a WiFi connection to the internet within reach of your device or perhaps because you get to resume a WiFi connection to the internet at your destination<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<table style=\"width:90%;\">\n<tr>\n<td>So gave this a test run on an iPad, at basecamp with WiFi, and then walking via a half way point (where there was no WiFi)<br \/>\n<img title='Halfway with no WiFi' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geolocation_halfway.jpg' width='100%'><\/img><\/td>\n<\/tr>\n<tr>\n<td>\n up to the top of the street (where there was no WiFi),<br \/> <br \/>\n<img title='At the top of the road with no WiFi' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geolocation_topoftheroad.jpg' width='100%'><\/img><\/td>\n<\/tr>\n<tr>\n<td>\n and then back to the halfway point,<br \/>\n<img title='Back to halfway' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geolocation_backathalfway.jpg' width='100%'><\/img><\/td>\n<\/tr>\n<tr>\n<td>\n returning back to base<br \/>\n<img title='Back to base, and WiFi' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geolocation_backhomewithwifi.jpg' width='100%'><\/img><\/td>\n<\/tr>\n<tr>\n<td>\n at the end.<\/p>\n<\/td>\n<\/tr>\n<\/table>\n<p>The <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geolocation_ipad_wifialways.jpg\" title=\"Click picture\">tutorial picture<\/a> today shows the end iPad screenshot of an execution run where there was always a WiFi connection.<\/p>\n<p>For your perusal you could try examining the HTML and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/moving_or_not.html-GETME\" title=\"moving_or_not.html\">moving_or_not.html<\/a> and\/or its corresponding <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/moving_or_not.html\" title=\"moving_or_not.html\">live run<\/a> link.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24106' onclick='var dv=document.getElementById(\"d24106\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geolocation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24106' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve written a small HTML5 Geolocation API web application today, that has at its core the great advice from this great link, so, thanks. You might recall from recent times here at this blog our admiration for these &#8220;where&#8221; based &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-geolocation-api-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,36,37],"tags":[88,481,483,519,527,576,578,652,745,997,1311,1319,1402],"class_list":["post-24106","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-trips","category-tutorials","tag-api","tag-geographicals","tag-geolocation","tag-google-charts","tag-google-maps","tag-html","tag-html5","tag-javascript","tag-map","tag-programming","tag-trip","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24106"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=24106"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24106\/revisions"}],"predecessor-version":[{"id":24120,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24106\/revisions\/24120"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}