Issue #60: add support for getting clicked latitude and longitude to flask

martin kjellin · martin kjellin · commit feedbac2c685 · 2018-10-04T16:33:33.000+02:00
diff --git a/examples/example.py b/examples/example.py
@@ -1,6 +1,6 @@
 # coding: utf-8
 
-from flask import Flask, render_template
+from flask import Flask, render_template, request
 from flask_googlemaps import GoogleMaps
 from flask_googlemaps import Map, icons
 
@@ -306,6 +306,17 @@ def mapview():
             'infobox': 'This is a polyline'
         }]
     )
+    
+    clickmap = Map(
+        identifier="clickmap",
+        varname="clickmap",
+        lat=37.4419,
+        lng=-122.1419,
+        report_clickpos=True,
+        clickpos_uri="/clickpost/"
+    )
+
+
 
     return render_template(
         'example.html',
@@ -320,7 +331,8 @@ def mapview():
         movingmap=movingmap,
         movingmarkers=movingmarkers,
         collapsible=collapsible,
-        infoboxmap=infoboxmap
+        infoboxmap=infoboxmap,
+        clickmap=clickmap
     )
 
 
@@ -370,6 +382,12 @@ def fullmap():
     )
     return render_template('example_fullmap.html', fullmap=fullmap)
 
-
+@app.route('/clickpost/', methods=['POST'])
+def clickpost():
+	# Now lat and lon can be accessed as:
+	Lat = request.form['lat']
+	lng = request.form['lng']
+	return "ok"
+	
 if __name__ == "__main__":
     app.run(debug=True, use_reloader=True)
diff --git a/examples/templates/example.html b/examples/templates/example.html
@@ -16,6 +16,8 @@
             {{pgonmap.js}}
             {{collapsible.js}}
             {{infoboxmap.js}}
+	        {{clickmap.js}}
+
     </head>
     <body>
         <h1>Flask Google Maps Example</h1>
@@ -331,5 +333,9 @@ <h2 style="display:inline-block;">Collapsible map example</h2>
         <h2>Infoboxes for map shapes</h2>
         {{infoboxmap.html}}
 
+        <h2>LatLon from click to flask and back:</h2>
+
+        {{clickmap.html}}
+
     </body>
 </html>
diff --git a/flask_googlemaps/__init__.py b/flask_googlemaps/__init__.py
@@ -40,6 +40,8 @@ def __init__(self,
                  cluster_gridsize=60,
                  fit_markers_to_bounds=False,
                  center_on_user_location=False,
+                 report_clickpos=False,
+                 clickpos_uri="",
                  **kwargs):
         """Builds the Map properties"""
         self.cls = cls
@@ -70,6 +72,8 @@ def __init__(self,
         self.fullscreen_control = fullscreen_control
         self.collapsible = collapsible
         self.center_on_user_location = center_on_user_location
+        self.report_clickpos = report_clickpos
+        self.clickpos_uri = clickpos_uri
 
         self.cluster = cluster
         self.cluster_imagepath = cluster_imagepath
diff --git a/flask_googlemaps/templates/googlemaps/gmapjs.html b/flask_googlemaps/templates/googlemaps/gmapjs.html
@@ -72,6 +72,14 @@
            }
         }
 
+        {% if gmap.report_clickpos %}
+        google.maps.event.addListener(
+        	{{gmap.varname}},
+            'click',
+			function(event) { clickposCallback('{{gmap.clickpos_uri}}', event.latLng) }
+        );
+        {% endif %}        
+
         {% if gmap.fit_markers_to_bounds %}
             // fit all markers in bounds
             var {{gmap.varname}}_bounds = new google.maps.LatLngBounds();
@@ -198,6 +206,13 @@
             infowindow.open(map, this);
         };
     }
+    
+    function clickposCallback(uri, latLng) {
+    	xhttp = new XMLHttpRequest();
+    	xhttp.open("POST", uri);
+    	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+        xhttp.send("lat=" + latLng.lat() + "&lng="  + latLng.lng());
+    }
 
     {% if gmap.collapsible %}
         function init_{{gmap.identifier}}_button() {
