1. Community MapBuilder Workshop Client-Side Feature Rendering (SLD) and Vector Graphics Pat Cappelaere pat@vightel.com

2. What Kind of Features? WFS Features GeoRSS Feeds KML (Google Earth) APRS (Automatic Position Reporting System) Custom XML Data Visualization …

3. Workshop Goal Do a WFS Query using a Web Form Get the resulting XML data back Process it Render features on the WMS map Allow for popups on click

4. Browser Requirements IE 6.x (using VML) Firefox 1.5.x (using SVG) Still No Support for Safari Yet

5. Server Requirements JavaScript files are stored on the server Server has a proxy to allow for sandboxing and go around JavaScript security issues Need SVN version of MapBuilder

6. MapBuilder Capabilities Support For Styled Layer Description (SLD) Rendering (on the client side) –Pick colors, shapes, icons –Easy to enhance if requested Popups (onclick or mouseover) –Uses overlibmws http://www.macridesweb.com/oltest/ Full support for html Sticky popups…

7. WFS Spatio-Temporal Queries Powered by Community MapBuilder

8. GeoBliki Community

9. Approach Architecture/Overview Diagram –How Does This Work? –Building a Mental Picture! Implementation Details –Walk Through

10. Diagram 1 OWSContext Feature Collection Renderer Models Context Doc WebService Form XSL MapLayer Mgr WMSLayer WFSLayer WMSLayer MapPane2 (Div Mgr) XSL Tip Widget AOI User Data AddLayer SLD Vector Graphics MapPane … Vector Graphics Vector Graphics VML SVG getXXX

11. Mouse Events OWSContext Feature Collection Renderer Models Context Doc WebService Form XSL WFSLayer XSL Tip Widget AOI User Data SLD Vector Graphics MapPane … Vector Graphics Vector Graphics VML SVG MouseClick MouseOver Hilite Normal

12. Getting Started We need: –Html File For Presentation: index.html –Configuration File: config.xml –Map Configuration File DemisWorldMap.xml –A Few Stylesheets AoiForm.xsl datapopup.xsl wfs_GetFeature.xsl

13. Trick #1 Add Required Namespaces to Your Html html xmlns:vml="urn:schemas-microsoft-com:vml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> // URL of Mapbuilder configuration file. var mbConfigUrl='config.xml'; var OLbubbleImageDir="../../lib/util/overlibmws"; … Support for Popups

14. Index.html body Create a table –Div for the Web Service Form –Div for the main MapPane Create another table –mainButtonBar –mapScaleText –mapScaleBar –cursorTrack Placeholder div for wfs Renderer Tiptool Footer if necessary

15. Config File: config.xml /map_data/maps/DemisWorldMap.xml mainMapPane mainMapContainer Use new OWSContext and MapPane2

16. OwsContext (Model#1) Widgets –MapPane2 –Loading2 –AoiBoxDHTML –MapScaleText –AoiForm –CursorTrack –WebServiceForm Tools –AoiMouseHandler –DragPanHandler –MouseClickHandler –History

17. FeatureCollection (Model#2) Attributes post eo1:name eo1:location //gml:featureMember //eo1:location/gml:Point/gml:pos xmlns:gml='http://www.opengis.net/gml' xmlns:eo1='http://eo1.gsfc.nasa.gov/' xmlns:wfs='http://www.opengis.net/wfs' xmlns:ows='http://www.opengis.net/ows' Widgets –TipWidget –GmlRendererVG –Legend Namespaces matter!

18. Other Widgets Back Forward ZoomIn ZoomOut DragPan SetAoi Reset GetMarkerInfo Save

19. WebServiceForm webServiceForm gml2FeatureTemplate /javascripts/mapbuilder/lib/widget/Null.xsl /map_data/maps/wfs_GetFeature.xsl /wfs

20. Purpose Of Stylesheet Features will be added in a WFS Feature Layer created by the new MapLayerMgr –Other layers may include GeoRSS Layers, Google Layer… We need to add an entry in the Map Context Document so it can be saved later –Will include GetFeature Entry –Filter to request the specific data from WFS –A SLD to apply to features

21. Stylesheet <xsl:stylesheet version="1.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:sld="http://www.opengis.net/sld" xmlns:wmc="http://www.opengis.net/context" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:mb="http://mapbuilder.sourceforge.net/mapbuilder" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:xlink="http://www.w3.org/1999/xlink"> 100 location

22. Stylesheet EO1 Query

23. GetFeature created_at

24. Style Highlite circle #ff0000 4.0 #ffff00 1 Normal circle #ff0000 4.0

25. Datapopup.xsl <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:eo1="http://eo1.gsfc.nasa.gov/"> EO1 ALI data EO1Hyperion data

26. Datapopup.xsl Id: Name: Scene: Rights: Goal Id: Lat: Lon: Link: here