Using SVG-based Maps for Mobile Guide Systems A Case Study for the Design, Adaptation, and

1. Using SVG-based Maps for Mobile Guide SystemsA Case Study for the Design, Adaptation, and Usage of SVG-based Maps for Mobile Nature Guide Applications By: V. Patalaviciute, Dr. C. Düpmeier, Prof. P. Freckmann, M. Ruchter

2. Outline • Motivation • MobiNaG Architecture and Functionality • Concepts for Mobile Nature Guide Maps • Applicability of SVG in the MobiNaG Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

3. Direct Experience Environmental Information User Interaction MobiNaG Mobile Guide Mobile Nature Guide Natural Environment Visitors of Natural Areas Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

4. Technical Environment • PDA • GPS for navigation • GPRS / UMTS for internet access • Data upload on PDA with ActiveSync • Central server for • Description of nature experience areas • Additional information Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

5. System Architecture

6. MobiNaG Prototype for Evaluation Navigation service Tour service Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

7. Symbols for Different Target Groups Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

8. Interactive Legend (1) (2) function activateLayer(evt,Layer) { ... if ( // Layer X is set visible in dialog ) { X.setAttribute("visibility",„visible"); else { X.setAttribute("visibility",„hidden"); } ... Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

9. Landmark-based Navigation <svg id="Landmark" visibility="hidden“ > … </svg> Function ZoomUp () { ... if (curZoomStep==3) { document.getElementById('Landmark').setAttribute('visibility', 'visible'); else { document.getElementById('Landmark').setAttribute('visibility', ‚hidden'); } } ... Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

10. Dynamics of the Natural Environment autumn.css .forest { fill:yellow; stroke:yellow; stroke-width:2; } spring.css .forest { fill:lightgreen; stroke:lightgreen; stroke-width:2; } Spring <?xml-stylesheet href= „autumn.css" type="text/css"?> <svg> <g id=„forst" class= „forest" > <path d="M0.376,246.646c17.234-18.837.... /> ... </svg> Autumn Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

11. Interpretive Maps Autumn POI.xml <POI id="POI_10" categoryRef=„season:autumn; type:sense:observe"> <Position> <Longitude> … </Longitude> <Latitude>… </Latitude> </Position> </POI> Spring Application <svg> <use xlink:href= “Iconlibrary.svg#observe categoryRef=„season:autumn; type:sense:observe"> </svg> Iconlibrary.svg <symbol id=„observe"> … </symbol> Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

12. Problems with the Applicability of SVG • Limited functionality of SVG engines on mobile devices • SVG implementations do not support multi-line text objects • Use is not fully implemented in used eSVG engine <use xlink:href=„symbols.svg#telefon“> • SVG file cannot be split into modular components (for example symbol / icon library) • No standard SVG-based user interface elements, like popups, dialog components, etc. • Used SVG component does not support object- oriented integration with embedding application • Calling C++ or .NET components of application from javascript Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

13. Future Work • MobiNaG Redesign for First Production Version • Looking for better SVG engine / better SVG support • Presentation of multimedia information by HTML / SMIL component? • Further Developments • GUI-based editor for nature experience area descriptions based on the Java Batik SVG toolkit • Diploma thesis on the Integration of a Pedagogical Agent • Uses SVG-based character animations Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005