Copy the templates folder from the completed code package into the Arenas application folder. Inside the templates folder is a folder called arenas, with a template HTML file called index.html. This file contains a JavaScript portion that generates a web map. On that map, the location of an NBA arena is displayed.

Django templates use placeholders (demarcated with a {{form.field }} format) that allow for data to be passed at runtime into the template, providing the specifics of the request. These placeholders are located throughout index.html. Django has its own built-in template language, which we will use here, and also includes Jinja2, which Flask also uses (see Chapter 11, Flask and GeoAlchemy2).

The first portion of index.html is to highlight is where the longitude and latitude of the current NBA arena have been added to the Leaflet JavaScript, which centers the map window on that location at zoom level 13:

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

The next portion to highlight is where the longitude, latitude, and custom popup about the current NBA arena are added to a marker:

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

Finally, within the HTML form section, we designate where the description and a drop-down list will go and include a hidden token (CSRF), which is required for authentication of the POST request. The button is generated by the input HTML:

  <form method="post" class="form">
     <h3>{{form.name}}</h3>
     <h4>{{form.description}}</h4>
    {{form.selections}}
    <br>
    <input type="submit" value="Find Data">
    {% csrf_token %}
  </form>

All of these placeholders will be populated when the view is processed and data is returned to the requesting browser.