working with the boundless sdk to design and create web mapping applications
TRANSCRIPT
![Page 1: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/1.jpg)
Working with the OpenGeo Suite Client SDK to designand create rich web mapping applications
Alberto Romeu - @alrocarJorge Sanz - @xurxosanz
![Page 2: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/2.jpg)
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 },
![Page 3: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/3.jpg)
WHAT IS GXP?(OpenGeo Suite Client SDK, Webapp SDK, Boundless SDK...)
"a Javascript SDK for developing high levelGeoExt based Applications"
![Page 4: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/4.jpg)
WHAT IS GXP?
1GXP is a Software Development Kit
![Page 5: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/5.jpg)
WHAT IS GXP?
2It covers the complete LIFE-C YCLE of the application
development
Create
Test
Customize
Package
Deploy
![Page 6: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/6.jpg)
WHAT IS GXP?
3It's a FRAMEWORK
API
Plugins
Widgets
Dependency management
![Page 7: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/7.jpg)
THE CONCEPT
![Page 8: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/8.jpg)
THE CONCEPT
1GeoExt + OpenLayers + GXP API + SDK
UI + MAP + Custom components + Lifecycle
![Page 9: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/9.jpg)
THE CONCEPT
2Take CONFIGURATION PATTERN to a higher level
(Configuration over programming)
![Page 10: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/10.jpg)
THE CONCEPT
3Bundled into the OpenGeo Suite (also standalone)
![Page 11: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/11.jpg)
WHY GXP?
![Page 12: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/12.jpg)
WHY GXP?
1Need of a COMPLETE SDK for web mapping applications
![Page 13: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/13.jpg)
WHY GXP?
2MINIMAL CONFIGURATION for complex apps
![Page 14: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/14.jpg)
WHY GXP?
3Need of UI components
![Page 15: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/15.jpg)
WHY GXP?
4FREE - GPLv3 License
![Page 16: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/16.jpg)
WHERE IN THE STACK?
![Page 17: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/17.jpg)
WHEN (WHO) TO USE?
![Page 18: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/18.jpg)
WHEN (WHO) TO USE?
1web GIS applications (geoportals)
![Page 19: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/19.jpg)
WHEN (WHO) TO USE?
2HIGHER LEVEL GIS components (editing, styling, browsing...)
![Page 20: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/20.jpg)
WHEN (WHO) TO USE?
3(Even more) BEGINNERS confused by HTML/CSS
![Page 21: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/21.jpg)
WHEN (WHO) TO USE?
4EXPERT web developers
![Page 22: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/22.jpg)
CHOOSING THE BEST OPTION FOR YOURWEBAPP
Think in your USE CASEThink in your USERSThink in your SKILLSKnow your TOOLS
![Page 23: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/23.jpg)
SOME REAL WORLD EXAMPLES
A in ValenciaSomething a A using OL3An This is
SFPark.orglocal geoportal
bit differentsimple webapp
OL3 geoportalnot GXP
![Page 24: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/24.jpg)
LEARNING RESOURCES
![Page 25: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/25.jpg)
1Learn by EXAMPLE
OpenGeo recipes book
GXP examples
GeoExt examples
ExtJS examples
OpenLayers examples
![Page 26: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/26.jpg)
2Browse the DOCUMENTATION
GXP documentation
GeoExt documentation
![Page 27: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/27.jpg)
3API reference
GXP API reference
GeoExt API reference
ExtJS 3.4 API reference
OpenLayers API reference
![Page 28: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/28.jpg)
GXP LABCreating a complete web GIS application
![Page 29: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/29.jpg)
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
![Page 30: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/30.jpg)
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, ...
![Page 31: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/31.jpg)
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
![Page 32: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/32.jpg)
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
![Page 33: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/33.jpg)
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
![Page 34: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/34.jpg)
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
![Page 35: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/35.jpg)
EDITING TOOLS1. Setting up a 2. Setting up a 3. Adding a
FeatureManagerFeatureEditor
FeatureGrid
![Page 36: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/36.jpg)
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
![Page 37: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/37.jpg)
CREATING APPLICATION PLUGINS1. 2. 3.
Plugin with action onlyPlugin with output onlyPlugin with action and output
![Page 38: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/38.jpg)
Q&A
![Page 39: Working with the Boundless SDK to design and create web mapping applications](https://reader033.vdocument.in/reader033/viewer/2022052906/558bcceed8b42aa10b8b4604/html5/thumbnails/39.jpg)