title: How do I return latitude and longitude to flask server after clicking on a leaflet web app?
body: <p>I am very new to leaflet, and I'm trying to workout how to return the lat and lng from a onMapClick event in leaflet to the flask server app, to allow me to use the coordinates t perform a spatial search on my database. The event currently only shows the lat long in a pop-up on the web app.  </p>
  
  <p>I've had a search around, but I guess my knowledge is so basic I don't know what functions I'm searching for.</p>
  
  <p>My web map</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Demo&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /&gt; &lt;!-- Leaflet CSS file (style sheets)&gt;--&gt;
      &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"&gt;&lt;/script&gt; &lt;!--leaflet java script file&gt;--&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map1" style="width: 800px; height: 600px;"&gt;&lt;/div&gt;    
  &lt;script&gt;
      var mymap = L.map('map1').setView([51.5, -0.09], 10);
  
      &lt;!--add map to display&gt;--&gt;
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
          maxZoom: 18,
          id: 'mapbox.streets',
          accessToken: '*****************'
      }).addTo(mymap);
  
      &lt;!--add popups as a layer&gt;--&gt;  
      var popup = L.popup();
      &lt;!--logs the action and gives lat long of where click occured &gt;--&gt;  
      function onMapClick(e) {
          .setLatLng(e.latlng)
          .setContent("You clicked the map at " + e.latlng.toString())
          .openOn(mymap);
      }
  
      mymap.on('click', onMapClick);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>and the server app</p>
  
  <pre><code>from flask import Flask, render_template
  app = Flask(__name__)
  
  @app.route('/demo')
  def webMap():
      return render_template('demo.html')
  
  if __name__ == '__main__':
      app.run(host='0.0.0.0', port=8090)
  </code></pre>
  
  <p>EDIT</p>
  
  <p>I have attempted using an ajax call but getting a 405 error</p>
  
  <pre><code>$.ajax('demo/data/', {
        type: 'GET',
        data: {
          lat: e.latlng.lat,
          lng: e.latlng.lng
        }
      });
  };
  </code></pre>
  
  <p>Flask app</p>
  
  <pre><code>@app.route('/demo/data/')
  def demoData():
      return request.form['lng'], request.form['lat']
  </code></pre>