Function and examples ( http://0.0.0.0:8000/webapp/geolocation ) to g…

…eolocation.

$.pos() ask for geolocation just the first time, and save result for the next time.
$.pos() admit two function as parameters, one to success, and another to fail.

semillas_backend/static/js/project.js

@@ -18,3 +18,30 @@ $('a.back-to-top').click(function() {
 	}, 700);
 	return false;
 });
+
+/* Get location */
+
+$.pos=function(showPosition,showError){
+	if (!this._pos) {
+		if (!navigator.geolocation) {
+			this._pos={UNSUPPORTED:true}
+			if (showError) showError(this._pos);
+		} else {
+			this._pos={ASKING: true};
+			var _showPosition=function(position) {
+				$._pos=position;
+				if (showPosition) showPosition.apply(this,arguments);
+			};
+			var _showError=function(error) {
+				$._pos=error;
+				if (showError) showError.apply(this,arguments);
+			};
+			navigator.geolocation.getCurrentPosition(_showPosition, _showError);
+		}
+	} else {
+		if (showPosition && this._pos.coords) showPosition(this._pos);
+		else if (showError) showError(this._pos)
+	}
+	return this._pos;
+};
+

webapp/static/webapp/js/geoexample.js

@@ -0,0 +1,49 @@
+function reset() {
+	$._pos=null;
+}
+function resetMap () {
+	document.getElementById("mapholder").innerHTML = "";
+}
+function getLocation() {
+	$.pos(
+		function(position){
+			var latlon = position.coords.latitude + "," + position.coords.longitude;
+			var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
+			document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
+		},
+		function(error){
+			var x = document.getElementById("demo");
+			if (error.UNSUPPORTED) {
+				x.innerHTML = "Geolocation is not supported by this browser.";
+				return;
+			}
+			switch(error.code) {
+				case error.PERMISSION_DENIED:
+				    x.innerHTML = "User denied the request for Geolocation.";
+				    break;
+				case error.POSITION_UNAVAILABLE:
+				    x.innerHTML = "Location information is unavailable.";
+				    break;
+				case error.TIMEOUT:
+				    x.innerHTML = "The request to get user location timed out.";
+				    break;
+				case error.UNKNOWN_ERROR:
+				    x.innerHTML = "An unknown error occurred.";
+				    break;
+			}
+		}
+	);
+}
+function getLocation2() {
+	alert(JSON.stringify($.pos()));
+}
+
+function getLocation3() {
+	$.pos(
+		function() {
+			alert("OK");
+		},function() {
+			alert("KO");
+		}
+	);
+}

webapp/templates/webapp/geolocation.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block javascript_level2 %}
+	<script type="text/javascript" src="{% static 'webapp/js/geoexample.js' %}" defer="defer"></script>
+{% endblock %}
+
+{% block content %}
+
+
+
+<p id="demo">Click the button to get your position.</p>
+
+<button onclick="getLocation()">Set Map</button>
+<button onclick="resetMap()">Clean Map</button>
+
+<div id="mapholder"></div>
+
+<button onclick="getLocation2()">Example 2</button>
+<button onclick="getLocation3()">Example 3</button>
+
+{% endblock %}

webapp/urls.py

@@ -7,8 +7,13 @@
 
 urlpatterns = [
     url(
-        regex=r'',
+        regex=r'^$',
         view=TemplateView.as_view(template_name='webapp/index.html'),
         name='webapp'
     ),
+    url(
+        regex=r'^geolocation$',
+        view=TemplateView.as_view(template_name='webapp/geolocation.html'),
+        name='geolocation'
+    ),
 ]