Working with the Boundless SDK to design and create web mapping applications

Working with the OpenGeo Suite Client SDK to designand create rich web mapping applications

Alberto Romeu - @alrocarJorge Sanz - @xurxosanz

var agenda = { "first-section":[ { "content":"Introduction to GXP (what, why, when)", "duration":45 }, { "content":"Learning resources", "duration":15 }, { "content":"My first GXP application", "duration":60 } ], "break":{ "content":"coffee", "duration":30 }, "second-section":{ "content":"Customizing the application", "duration":90 }, "break":{ "content":"lunch", "duration":60 }, "third-section":[ { "content":"Editing tools", "duration":60 },

WHAT IS GXP?(OpenGeo Suite Client SDK, Webapp SDK, Boundless SDK...)

"a Javascript SDK for developing high levelGeoExt based Applications"

WHAT IS GXP?

1GXP is a Software Development Kit

WHAT IS GXP?

2It covers the complete LIFE-C YCLE of the application

development

Create

Test

Customize

Package

Deploy

WHAT IS GXP?

3It's a FRAMEWORK

API

Plugins

Widgets

Dependency management

THE CONCEPT

THE CONCEPT

1GeoExt + OpenLayers + GXP API + SDK

UI + MAP + Custom components + Lifecycle

THE CONCEPT

2Take CONFIGURATION PATTERN to a higher level

(Configuration over programming)

THE CONCEPT

3Bundled into the OpenGeo Suite (also standalone)

WHY GXP?

WHY GXP?

1Need of a COMPLETE SDK for web mapping applications

WHY GXP?

2MINIMAL CONFIGURATION for complex apps

WHY GXP?

3Need of UI components

WHY GXP?

4FREE - GPLv3 License

WHERE IN THE STACK?

WHEN (WHO) TO USE?

WHEN (WHO) TO USE?

1web GIS applications (geoportals)

WHEN (WHO) TO USE?

2HIGHER LEVEL GIS components (editing, styling, browsing...)

WHEN (WHO) TO USE?

3(Even more) BEGINNERS confused by HTML/CSS

WHEN (WHO) TO USE?

4EXPERT web developers

CHOOSING THE BEST OPTION FOR YOURWEBAPP

Think in your USE CASEThink in your USERSThink in your SKILLSKnow your TOOLS

SOME REAL WORLD EXAMPLES

A in ValenciaSomething a A using OL3An This is

SFPark.orglocal geoportal

bit differentsimple webapp

OL3 geoportalnot GXP

LEARNING RESOURCES

1Learn by EXAMPLE

OpenGeo recipes book

GXP examples

GeoExt examples

ExtJS examples

OpenLayers examples

2Browse the DOCUMENTATION

GXP documentation

GeoExt documentation

3API reference

GXP API reference

GeoExt API reference

ExtJS 3.4 API reference

OpenLayers API reference

GXP LABCreating a complete web GIS application

APPLICATION LIFE-CYCLECreation

suite-sdk create /home/user/bin/myapp gxp

Testing / Debug

suite-sdk debug <span>-g http://localhost:8082/geoserver </span><span style="font-family: monospace;"

#open in your browser http://localhost:9080

Package / Deployment suite-sdk package /home/user/bin/myapp

GXP docu mentation

DISSECTING THE APPLICATION1. Directory structure2. Dependency management3. The Viewer

1. portalItems: UI - ExtJS2. tools: GXP plugins and widgets3. sources: Map servers4. map: OpenLayers

4. The app Object1. The OpenLayers Map2. Tools, sources, ...

DEVELOPMENT LIFE-CYCLE1. Create (just once per webapp)2. Start debug3. Open a browser (http://localhost:port)4. Open "dev tools" of your browser5. Code -> Refresh browser6. Add dependency -> Stop debug (Ctrl + C)7. Start debug8. Refresh browser9. GO to 5

10. If your_app_is_broken then GO to 4

EXERCICES1. Add an east and south panels2. Add a north panel with a background image3. Change the width of the LayerTree panel4. Add the slide property to the LayerTree panel5. Add a bottom toolbar to the LayerTree6. Move the RemoveLayer plugin to the bottom toolbar7. Add groups to the layer tree8. Move layers to different groups9. Center the map in Girona

CUSTOMIZING THE APPLICATION1. Adding an " " dialog

Add another source to the ViewerAdding a " " tool

Adding a " " toolChanging the in Geoserver

Adding a " " toolAdding a " " tool

Adding a " "Changing the

Changing the

Add a new server...

Zoom to layer extentWMS GetFeatureInfo

templateLegend

Google geocode search Google base layer

projectionlocale

EXERCICES1. Add a layer from MapBox2. Add a Measure tool3. Add a YouTube layer4. Add a Picasa layer5. Remove the PanPanel and the Zoom6. Add a SelectFeature control7. Add a

You can still write standard OpenLayers code to add morefunctionality but try to use GXP as much as possible

GeoRSS Layer

EDITING TOOLS1. Setting up a 2. Setting up a 3. Adding a

FeatureManagerFeatureEditor

FeatureGrid

USE CASESCreate a web GIS application for you to edit a layer of points ( you

can use any existing layer on Geoserver or publish your own )

Create another web GIS application for your users to just viewthat layer of points, showing them just the map, navigation tools

and a tool to get information by clicking any point.

Check that whenever you add a new point in your webapp, your userscan see the changes

CREATING APPLICATION PLUGINS1. 2. 3.

Plugin with action onlyPlugin with output onlyPlugin with action and output

Q&A