Table Of Contents

Spatial Input¶

Last Updated: November 2019

1. Spatial Input Page UrlMap¶

Add a new UrlMap to the url_maps method of the app.py module:

UrlMap(
    name='draw',
    url='geoserver-app/draw',
    controller='geoserver_app.controllers.draw'
),

2. Spatial Input Controller¶

Add a new controller to the controller.py module:

@login_required()
def draw(request):
    drawing_options = MVDraw(
        controls=['Modify', 'Move', 'Point', 'LineString', 'Polygon', 'Box'],
        initial='Polygon'
    )

    map_options = MapView(
        height='450px',
        width='100%',
        layers=[],
        draw=drawing_options
    )

    geometry = ''

    if request.POST and 'geometry' in request.POST:
        geometry = request.POST['geometry']

    context = {'map_options': map_options,
               'geometry': geometry}

    return render(request, 'geoserver_app/draw.html', context)

3. Spatial Input Template¶

Create a new draw.html template in your template directory and add the following contents:

{% extends "geoserver_app/base.html" %}
{% load tethys_gizmos %}

{% block app_content %}
    <h1>Draw on the Map</h1>

    {% if geometry %}
        <p>{{ geometry }}</p>
    {% endif %}

    <form method="post">
        {% csrf_token %}
        {% gizmo map_view map_options %}
        <input name="submit" type="submit">
    </form>
{% endblock %}

4. Add Navigation Links¶

Replace the app_navigation_items block of the base.html template with:

{% block app_navigation_items %}
  <li class="title">App Navigation</li>
  {% url 'geoserver_app:home' as home_url %}
  {% url 'geoserver_app:map' as map_url %}
  {% url 'geoserver_app:draw' as draw_url %}
  <li class="{% if request.path == home_url %}active{% endif %}"><a href="{{ home_url }}">Upload Shapefile</a></li>
  <li class="{% if request.path == map_url %}active{% endif %}"><a href="{{ map_url }}">GeoServer Layers</a></li>
  <li class="{% if request.path == draw_url %}active{% endif %}"><a href="{{ draw_url }}">Draw</a></li>
{% endblock %}

5. Test Spatial Input Page¶

Navigate to the spatial input page using the "Draw" link in your navigation (http://localhost:8000/apps/geoserver-app/draw/). Use the drawing controls to add features to the map, then press the submit button. The GeoJSON encoded spatial data should be displayed when the page refreshes.

6. Solution¶

This concludes the GeoServer Tutorial. You can view the solution on GitHub at https://github.com/tethysplatform/tethysapp-geoserver_app or clone it as follows:

git clone git@github.com:tethysplatform/tethysapp-geoserver_app.git
cd tethysapp-geoserver_app
git checkout -b solution solution-3.4

Table Of Contents

Spatial Input

Map GeoServer Layers

Google Earth Engine