The first part of this code should look very familiar to you, that is the part where we check if the device is ready and if it is, we use the geolocation API to get the device’s current position.

If we succeed in getting the location we just need to place the coordinates we want in a div with the ID of geolocation and as you can see getting this value is pretty intuitive seeing as their names are self-explanatory. Finally if we don’t retrieve the user’s location we show an error.

In the example above I’ve used the getCurrentPosition function and this function only gives us the location when the success function is fired, if we want something that constantly watches the coordinates and updates them on the fly we would use the watchPosition function which also takes a third parameter specifying the frequency with which we would like to update the coordinates. Not a lot would need to change in our code:

As always we wait for PhoneGap to be loaded and when it is, we set the destinationType and sourceType ( by default they are camera and data_url). After this we wait for the user to click the button and when she does the capturePhoto function fires and here we place our options and also the error and success callbacks.

If the function succeeds our getPhoto function fires and we set the img element’s display value to block and then place the image in its src attribute. And since our allowEdit option is true the user will be able to edit the image before it shows up in the app.

Conclusion

In this second part we looked at two more API’s we have at our disposal with PhoneGap, the Geolocation API and the Camera API, and how easily these two can be used to our benefit.