Map GeoServer Layers

Last Updated: June 2020

1. Map Page Controller

Add a new controller to the controller.py module:

python
@controller
def map(request):
    """
    Controller for the map page
    """
    geoserver_engine = app.get_spatial_dataset_service(name='main_geoserver', as_engine=True)

    options = []

    response = geoserver_engine.list_layers(with_properties=False)

    if response['success']:
        for layer in response['result']:
            options.append((layer.title(), layer))

    select_options = SelectInput(
        display_text='Choose Layer',
        name='layer',
        multiple=False,
        options=options
    )

    map_layers = []

    if request.POST and 'layer' in request.POST:
        selected_layer = request.POST['layer']
        legend_title = selected_layer.title()

        geoserver_layer = MVLayer(
            source='ImageWMS',
            options={
                'url': 'http://localhost:8181/geoserver/wms',
                'params': {'LAYERS': selected_layer},
                'serverType': 'geoserver'
            },
            legend_title=legend_title,
            legend_extent=[-114, 36.5, -109, 42.5],
            legend_classes=[
                MVLegendClass('polygon', 'County', fill='#999999'),
        ])

        map_layers.append(geoserver_layer)


    view_options = MVView(
        projection='EPSG:4326',
        center=[-100, 40],
        zoom=4,
        maxZoom=18,
        minZoom=2
    )

    map_options = MapView(
        height='500px',
        width='100%',
        layers=map_layers,
        legend=True,
        view=view_options
    )

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

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

2. Map Page Template

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

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

{% block app_content %}
    <h1>GeoServer Layers</h1>
    <form method="post" class="mb-3">
        {% csrf_token %}
        {% gizmo select_input select_options %}
        <input name="submit" type="submit" value="Update" class="btn btn-secondary">
    </form>
    {% gizmo map_options %}
{% endblock %}

3. Test Map Page

Navigate to the map page (http://localhost:8000/apps/geoserver-app/map/). Use the select box to select a layer to display on the map. Press the submit button to effect the change.

4. Solution

This concludes the this part of 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 https://github.com/tethysplatform/tethysapp-geoserver_app.git
cd tethysapp-geoserver_app
git checkout -b map-geoserver-solution map-geoserver-solution-4.2