Using SVG-based Maps for Mobile Guide Systems A 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

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

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

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

System Architecture

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

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

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

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

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

Interpretive Maps Autumn Spring 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

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

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