Working with the Boundless SDK to design and create web mapping applications
39
Working with the OpenGeo Suite Client SDK to design and create rich web mapping applications Alberto Romeu - @alrocar Jorge Sanz - @xurxosanz
-
Upload
alberto-romeu-carrasco -
Category
Software
-
view
676 -
download
2
Transcript of 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
