Build applications using OpenLayers 3 and OpenGeo Suite (Part 2)

OpenLayersMany of our customers use OpenGeo Suite to build applications that address specific business needs. New York City and Howard County use our software to help residents better access government services while San Jose Water Company has built several applications for internal use by staff.

Our newest release, OpenGeo Suite 4.1, includes new templates built on OpenLayers 3 that make it even easier to build and deploy Spatial IT applications. We previously showed how to create a viewer application and in this post we’ll describe how to create an editing application.

Creating a new application

First off, we’ll start creating the application using the suite-sdk command-line tool:

suite-sdk create /path-to/myapp ol3edit
suite-sdk debug /path-to/myapp

Point your browser to http://localhost:9080 and you’ll see the editing application in debug mode:

Editor application

Let’s examine the functionality that this application provides in more detail.

Editing template

This application provides the Layers Control, which was also part of the viewer template, but in addition the following editing-related functionality is provided:

  • Draw a new feature and insert it using WFS-T
  • Modify an existing feature’s geometry and send an Update to the WFS
  • Select an existing feature and delete it
  • A feature table that shows the features in a tabular form

By default the usa:states layer in OpenGeo Suite is served from a Shapefile but this is not ideal for editing purposes.  We recommend serving data from a transactional database, such as PostGIS, instead.

Unlike the viewer template, which used WMS for feature display, this application uses a vector layer rendered by HTML5 Canvas. The vector data is retrieved using WFS with GeoJSON as the interchange format for read operations. A BBOX strategy is used for loading the data.

Let’s click one of the states on the map. This will select the vector feature on the map and will select the corresponding row in the feature table. Clicking on a record in the feature table will also select that same feature on the map and zoom to it.

Try modifying one of the existing geometries (hover over one of its boundaries) and, when you’re done, click somewhere else outside of the feature which is being modified. The feature will be deselected and the transaction will be sent to the WFS. This may trigger a basic authentication dialog in the browser depending on how GeoServer has been configured.

Now click on an existing feature and press the “Delete Feature” button in the toolbar. Confirm the dialog with OK. The feature should be deleted on both the client and the server (verify this by doing a reload of your browser application).

Lastly, use the “Draw Feature” button and digitize a new polygon feature on the map. This will get sent to the WFS as an Insert transaction.

Internals

As  promised in a previous blog post about editing in OpenLayers 3 using WFS-T, it is now much easier to create an editing application without having to worry about the OpenLayers 3 internals. Open up /path-to/myapp/src/app/app.js in your favorite text editor and look for a section labeled “config section”. This section should contain all the settings you need to tweak in order to have this application work on a different data layer.

Learn more!

Find out more about using the Boundless SDK and these new templates in this Tech Talk that Andreas and I recently presented to our colleagues.

EmailTwitterFacebookGoogle+tumblrLinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>