Mappetizer Tourist- and City-Info and Mappetizer Travel Diary

Ruth Lang and Armin Müller
uismedia
Play (29min) Download: MP4 | MP3

Introduction

Mappetizer “Tourist Info”, “City Info” and “Travel Diary” are SVG based web mapping applications, which directly can read GPS data (GPX files).

As Mappetizer “Tourist Info” and “City Info” are for public use on the internet (whether municipality, county or city), “Travel Diary” can be seen as an application for everybody’s use. But the philosophy and technique behind all the applications are the same.

Main goals and ideas of the products are:

  • Quasi-direct import of GPS data (GPX files)
  • Displaying of any information based on geograpic data, like points (= waypoints, e.g. hotels, schools, places of interest, underground stations), lines (= tracks, e.g. bicycle and hiking tours, online guided city tours) and polygons.
  • Extended scope on descriptive information about the tracks and waypoints, including text, pictures, links, addresses, ranking and rating.
  • Support of multilingualism.
  • Analyses of the tracks (e.g. length, duration, elevation).
  • Not depending on any specific web server technologies or database.
  • Not depending on Google Maps and their terms of use.
  • Full control on layout and design.
  • Expandability and flexibility.

All web mapping solutions simply bases on open standards like HTML, SVG and XML.
So they can be used on a local machine, published on the web or be given away on CD-ROM or DVD and be viewed within a web browser.

Underlaying Technique

Dojo Toolkit (http://www.dojotoolkit.org)

The application uses the open source modular JavaScript library Dojo Toolkit (http://www.dojotoolkit.org) and the Dojo widgets system. These are prepackaged components of JavaScript code, HTML markup and CSS style declarations that can be used to enrich websites with various interactive features that work across browsers.

SVG elements, Map and Legend

The map and the legend of the application are (embedded) SVG elements.

OpenStreetMap (http://www.openstreetmap.org)

The web application uses OpenStreetMap (OSM) as a background layer. OSM data are directly imported via the OSM Mapnik Tile Server (http://tile.openstreetmap.org/), so the user benefits from perpetual up-to-dateness without having to concern about. The slippy map application rendered by Mapnik provides 18 zoom levels. Depending on the choosen extent the appropriate zoom level is calculated, and displayed then.

OSM Mapnik data are in a Mercator projection, so all GPS data have to be transformed from longitude/latitude values to the Mercator projection.

The GPX-files then are overlaid on this background layer, organized in different groups (<g/>) and displayed as SVG paths (<path/>), circles (<circle/>) or images (<image/>).

Importing the GPX Files

The XMLHttpRequest object is used for making asynchronous calls to the server to retrieve data. Dojo Toolkit offers for this the dojo.xhrGet() function and does all the work.
The data returned from the server are then handled as an XML object. To avoid problems with MIME types, the filename extension .gpx has to be changed to .xml and the gpx tag has to be cleaned from its attributes. Beside being aware of the appropriate character encoding, these are all changes which has to be done with the gpx file so the application can visualize it.

Using and Extending the GPX 1.1 Schema Documentation (http://www.topografix.com/gpx/1/1) for describing the GPS data

The GPS/XML files take over the GPX 1.1 Schema Documentation and uses different existing tags for further information about the track or waypoint, like the name <name/>, comment <cmt/>, description <desc/> or type <type/>.
Further information which are requested within a city and tourist information system (like rendering options, symbology, images, specifications, addresses) are described within the tag . This tag is explicitly implemented to extend the GPX schema.

As the application supports multilingualism, the tags can be expanded with different language tags, like:
<name>
<en>English name</en>
<de>Deutscher Name</de>
</name>

GeoNames WebServices (http://www.geonames.org)

To expand the functionalities, the application uses different Geonames WebServices, like “findNearbyWikipedia” or “countryInfo”.
Dojo Toolkit offers cross-site data access with the function dojo.io.script.get() for JSON objects.

Next Steps

  • Support of geotagged photos
  • Implementing other GeoNames WebServices (e.g. findNearByWeather, findNearbyStreet)
  • Extending the analyses tools, e.g. providing altitude profiles

Links:

You may also like:

  1. Imagining, building and using an XSLT virtual machine
  2. SVG Electronic Program Guides
  3. Lightning fast data plotting and graphics with JSXGraph
  4. SVG animations’ constrain in SCADA application
  5. Time Travel for the Scholarly Web

  • Share
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading ... Loading ...