Many 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. Based on Bootstrap for responsive design and jQuery for leaner code, they make it easier to build and deploy applications on modern web browsers.
OpenLayers 3 is the next iteration of the successful client-side mapping library, rebuilt using the latest web technologies. Unlike OpenLayers 2, which includes features like layer switcher or a toolbar by default, this version leaves the choice of user interface elements to the application developer. This is where our new templates come in handy.
In this post we’ll discuss the first of these templates, which serves the purpose of creating a viewer application. In the next post, we’ll discuss creating an editing application.
Bootstrapping a new application
Once you install OpenGeo Suite 4.1 and the Boundless SDK, you’ll get a command-line utility called suite-sdk. We’ll use this utility, and more specifically its create command, to bootstrap our application.
suite-sdk create /path-to/myapp ol3view
/path-to/myapp is the file path (please adjust to suit your folder structure and operating system) where our application will be created, and ol3view is the name of the template we want to use.
To run this application in debug mode, we’ll use the debug command of the suite-sdk:
suite-sdk debug /path-to/myapp
This will start up an application server on port 9080 (the default port can be changed with the -l flag), which will proxy a GeoServer instance on http://localhost:8080/geoserver (the default GeoServer proxy can be changed with the -g flag).
If we point a browser to http://localhost:9080 we will see our application in debug mode.
View template
The view template provides a few examples of functionality that OpenLayers 3 does not provide out of the box:
- a layers control
- a popup that can pan into view
The layers control can be configured with a set of groups, to group certain layers together. In OpenLayers 3, it’s possible to define any extra (observable) properties on a layer object (which inherits from ol.Object). In this case we use a property called group, and a property called title for the user-readable title of the layer. Groups can be exclusive, which will have the individual layers of that group show up as a radio group, or non-exclusive which will have them show up as checkboxes. The layers control uses the mechanism demonstrated in the custom controls example.
The popup extends ol.Overlay. When a feature is clicked in the map, the information from a WMS GetFeatureInfo response will be shown in the popup, and the selected feature will be highlighted on the map. By default the WMS GetFeatureInfo request uses GML3 in the template, but it can optionally use HTML as well.
Customizing the template
In this section we will show how to add a company logo to the application and we will use a different layer for the application.
Add company logo
Open up /path-to/myapp/index.html in your favorite text editor. Search for Application Template and insert the following img tag in front of the Application Template text string:
<img class="company-logo" src="http://boundlessgeo.com/wp-content/themes/open-geo/images/logo.png">
In the style section, add the following CSS class for the company logo:
img.company-logo {
height: 30px;
padding-right: 10px;
}
Save your edits, reload your browser, and you should see the company logo in the application template now.
Use a different layer
Download the Fault Lines dataset from the GeoTech Center Data Library and open it in GeoExplorer, generally available at http://localhost:8080/geoexplorer in a default OpenGeo Suite install. Click the green plus button in the toolbar at the top of the layer tree, and select the Upload layers menu option. Log into GeoServer (the default credentials are “admin” and “geoserver”) and browse for the ZIP file. Since there is no PRJ file, manually specify the CRS as EPSG:4326.
Use the Layer Properties dialog, find the name of the uploaded layer. In our case, it is opengeo:FAULTS0.
Now open up /path-to/myapp/src/app/app.js in your favorite text editor. Look for the config section. We will use a WFS DescribeFeatureType request to find all the information we need, in our case this is:
http://localhost:8080/geoserver/ows?service=WFS&request=DescribeFeatureType&version=1.0.0&typename=opengeo:FAULTS0
In the response there is a targetNamespace attribute on the xsd:schema which we will need to configure our application properly (this is the value for featureNS). The following variables in the config section need to be changed to use a different layer in our application template. Most of its values can be derived from the WFS DescribeFeatureType output:
var featurePrefix = 'opengeo';
var featureType = 'FAULTS0';
var featureNS = 'http://opengeo.org';
var srsName = 'EPSG:900913';
var geometryName = 'the_geom';
var geometryType = 'MultiLineString';
var fields = ['TYPE'];
var layerTitle = 'Faults';
Our application will now look like this:
Deploying the application in production
Up to this point we have been using the debug loader. To deploy an application in production with the SDK, we normally create a WAR file and deploy that in a servlet container. This will replace the debug version with a full build of OpenLayers 3 which uses the Closure Compiler’s advanced mode. Also, our own application code will be prepared for better use in production. To create a WAR file we can use the package command:
suite-sdk package /path-to/myapp /path-to/myoutputdir
This will create a myapp.war package in the directory that we specified as the output directory (/path-to/myoutputdir).
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.
The post Build applications using OpenLayers 3 and OpenGeo Suite (Part 1) appeared first on Boundless.
![pg3DViewer_title[6]](http://lh6.ggpht.com/-v0U1siB61VM/U8GwK8fNeeI/AAAAAAAAAeA/-EokchLtSoY/s1600-h/pg3DViewer_title%25255B6%25255D%25255B11%25255D.png "pg3DViewer_title[6]")
![[image66.png]](http://lh4.ggpht.com/-PCQ8XwyZsdc/UMGu7qas37I/AAAAAAAAASU/ST9YK__WahQ/s1600/image66.png)
![image_thumb7[1]](http://lh4.ggpht.com/-jHzcViah4nY/U8vn3_JZbOI/AAAAAAAAAtI/UqKvs0vTKrc/s1600-h/image_thumb7%25255B1%25255D%25255B2%25255D.png "image_thumb7[1]")
![image_thumb14[6]](http://lh5.ggpht.com/-5lFeTR816vw/U8vp1khjtWI/AAAAAAAAAuk/Yu6BQ4PPqbM/s1600-h/image_thumb14%25255B6%25255D%25255B2%25255D.png "image_thumb14[6]")
