Operation
The application has a very simple structure: In the text box (top left in the image below) you can enter your diary notes. The new HTML5 placeholder attribute lets the browser show an invitation to enter a new message. If you have already entered notes, the area on the right displays a map section of Google Maps. Underneath is the list of entries, including not just the message text, but also location, time of entry, and distance to current location. You also have the option of deleting messages or displaying the location enlarged on Google Maps. As you can see the image, the enlarged representation indicates the location with a marker typical for Google. The circle around the location marker indicates the accuracy of the determined location.
Because you tend not to constantly change location while developing an application, the Firefox add-on Geolocater, introduced previously, comes in handy. You have the option of saving several locations in the add-on, allowing you to test the application while at home. Ideally though, the application would be used on a smartphone with GPS support. Both Android-based cell phones and the iPhone fulfill the necessary requirements.
To be able to test the application right away, you can use the demo data. These entries are partly made up and partly actual entries recorded by the author while developing the application.
Important Code Fragments
The HTML code for the application offers several div container elements, which will later house the messages (id='items') and the map (id='map'). As mentioned previously, the textarea element contains the new placeholder attribute, which can make applications much more user friendly. The relevant onclick event listener is directly assigned to the three button elements:
<body> <br>
<h1>Geonotes</h1> <br>
<div class='text_input'> <br>
<textarea style='float:left;margin-right:30px;' <br>
placeholder='Your message here ...' <br>
cols="50" rows="15" id="note"></textarea> <br>
<div class='map' id='map'></div> <br>
<div style='clear:both;' id='status'></div> <br>
<button style='float:left;color:green;' id='save' <br>
onclick='saveItem()'>Save</button> <br>
<button onclick='drawAllItems()'>Draw all items on <br>
map</button> <br>
<button onclick='importDemoData()'>Import Demo Data <br>
</button> <br>
</div> <br>
<div class='items' id='items'></div>
The JavaScript code is much more interesting than the few lines of HTML code. It defines an auxiliary function and three global variants:
function $(id) { return document.getElementById(id); } <br>
var map; <br>
var my_pos;<br>
var diaryItem = { id: 0, pos: 0, ts: 0, msg: '' }
You have already encountered the function $. It saves you a lot of typing effort here, too, and makes the code easier to read. The variable map serves as a reference to the HTML area, which will accommodate the Google Maps representation. my_pos is required for calculating the distance and contains the current location from which the script is called. diaryItem represents the structure of the individual entries. Each diary entry is assigned an ID (id), information on the current position (pos), a timestamp (ts) , and the message entered into the text field (msg).
As soon as the page is fully loaded, the current location is determined and existing entries are displayed:
window.onload = function() { <br>
if (navigator.geolocation) { <br>
navigator.geolocation.getCurrentPosition( <br>
function(pos) { <br>
my_pos = pos; <br>
showItems(); <br>
}, <br>
posError, <br>
{ enableHighAccuracy: true, maximumAge: 60000 } <br>
); <br>
} <br>
showItems(); <br>
if (localStorage.length > 0) { <br>
drawAllItems(); <br>
} <br>
}<br>
The option enableHighAccuracy is activated to call getCurrentPosition(). The maximum time for reusing an already determined position is one minute. If the position is successfully determined, the previously defined global variable my_pos is assigned the values of the just determined position and then the function showItems() is called. An error in determining the position leads to calling the function posError(), a function that outputs the corresponding error message in a dialog window. If the number of elements in the localStorage is greater than 0, the function drawAllItems() is executed as well, displaying existing entries on Google Maps.