Within the index.html template, the form data is accessed inside double-bracketed variables. These variables can be located inside the JavaScript or within the HTML. In this example, the form.latitude and form.longitude variables are located inside the map JavaScript that defines the initial center point of the map:

 var themap = L.map('map').setView([{{form.latitude}},                                                   {{form.longitude}}], 13);

To create the marker at the location of the arena requested, with a custom popup, the location coordinates and the popup fields are added:

  L.marker([{{form.latitude}},{{form.longitude}}]).addTo(themap)
    .bindPopup("{{form.popup}}").openPopup();

To make the POST requests possible, an HTML form with a POST method houses the form.description and form.selection (the drop-down list) attributes. The HTML form's button generates the POST request when it is pushed:

  <form method="post" class="form">
    <h3>{{form.description}}</h3>
    {{form.selections(class_='form-control',placeholder="")}}
    <br>
    <input type="submit" value="Find Data">
  </form>