1. 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

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. 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

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, c />
...
</svg>
Autumn
Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

11. 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

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