Mappetizer Web Mapping Applications

Mappetizer Tourist- and City-Info and Mappetizer Travel Diary

Ruth Lang

Armin Mueller


Table of Contents

Introduction
Dojo Toolkit
Dojo
Dijit
DojoX
OpenStreetMap
Importing/Displaying the GPX Files
Using and Extending the GPX (the GPS Exchange Format) for describing the GPS data
Organizing the Application: Building up the Legend/Topics
Supporting Headings and Multilingualism: the gpxinterface.xml
GeoNames Webservices
findNearBy
Wikipedia Geocoding Webservice
countryInfo
Weather
OSM Nominatim
Next Steps
Links
Bibliography

Introduction

Mappetizer "Tourist Info", "City Info", and "Travel Diary" are SVG based web mapping applications, which directly can display 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-dynamic import/display 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

  • Full control on layout and design

  • Extensive map features, like navigation, measure distances, overview map, location search

  • Expandability and flexibility

  • Based on open standards (SVG, HTML, XML)

  • Not depending on any specific web server technologies or database

  • Not depending on Google Maps and their terms of use

Dojo Toolkit

The application uses the open source modular JavaScript library Dojo Toolkit [REF1] and the Dojo widgets system. The map, overview and legend of the applications are embedded SVG elements within the HTML page.
Dojo Toolkit is divided into the following packages:

  1. Dojo

  2. Dijit

  3. DojoX

Dojo

Dojo Base is the functionality you get by just including dojo.js in the page. It provides utilities we use in our application, like:

Dijit

Dijit is Dojo’s UI Library, a widget system layered on top of Dojo. 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, like

  1. widgets (e.g. dijit.Menu and dijit.MenuItem, dijit.Toolbar, dijit.TitlePane)

  2. form handling (e.g. buttons like dijit.form.Button, dijit.form.ToggleButton, dijit.form.DropDownButton or other controls like dijit.form.Slider)

  3. layout (e.g. dijit.layout.BorderContainer, dijit.layout.ContentPane, dijit.layout.TabContainer)

Dijit comes bundled with different themes (called Claro, Tundra, Soria, and Nihilo). Themes are collections of images (icons and background images) and CSS, and brings a common visual style and color scheme to all the widgets in that page.
Dijit can be used in one of two ways: declaratively by using special attributes inside of regular HTML tags, and programmatically through JavaScript.

Mappetizer makes extensive use of these widgets, so two of them will be explained briefly:

A TabContainer is a container that has multiple ContentPanes, but shows only one pane at a time. There are a set of tabs corresponding to each pane, where each tab has the title (label) of the pane, and optionally a close button.
Mappetizer arranges most of the information in such a TabContainer. The main advantage is the space saving possibilities which come across with this kind of solution.

Declarative example of a TabContainer:

<div dojoType="dijit.layout.TabContainer">
   <div dojoType="dijit.layout.ContentPane" title="Legend">
      Displaying the legend in this tab
   </div>
   <div dojoType="dijit.layout.ContentPane" title="Info">
      Displaying identify results in this tab
   </div>
</div>

A TitlePane is a pane that can be opened or collapsed, with a title on top. The visibility of the pane’s contents is toggled by activating an arrow button on the title bar via the mouse or keyboard.
Mappetizer uses this kind of widget to display the identify results. When clicking on an object in the map, a new TitlePane is programmatically created through JavaScript and appended to the info tab, which stores all the information (TitlePanes). This allows you to have easy access to all information once requested, without covering the map (and losing orientation on it) at the same time.

Programmatic example of a TitlePane:

var tp = new dijit.TitlePane({
   title: "I'm a TitlePane",
   content: "Click arrow to close me!"
});
dojo.byId("holder").appendChild(tp.domNode);

DojoX

DojoX is an area for development of extensions to the Dojo toolkit. It is a repository for more stable and mature extensions and also acts as an incubator for experimental code, a testbed for additions to the main toolkit. Unlike Dojo and Dijit, DojoX is managed by subprojects, each of which has at least one module, a sponsor and a mission statement.

Mappetizer uses for example dojox.image.Lightbox to show images centered on the screen (here in an iframe):

OpenStreetMap

The web application uses OpenStreetMap (OSM) [REF2] as a background layer. OSM data are directly imported via the OSM Mapnik Tile Server [REF3], 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, whereas the tiles are 256 x 256 pixel PNG files.

0 1 tile covers whole world 1 tile
1 2 x 2 tiles 4 tiles
2 4 x 4 tiles 16 tiles
n 2n x 2n tiles 22n tiles
18 Maximum zoom for Mapnik layer 68.719.476.736 tiles

For a given lat/lon value at a specific zoom level, the xTile and yTile number is calculated with the following functions:

n = 2 ^ zoom
xTile = ((lon_deg + 180) / 360) * n
yTile = (1 - (log(tan(lat_rad) + sec(lat_rad)) / p)) / 2 * n   //sec = 1/cos

The tiles are organzied in such way, that each zoom level is a directory, each column is a subdirectory, and each tile in that column is a file, so the filename(URL) format is /zoom/xTile/yTile.png.
For example with zoom level = 18, lon = 11.7408 and lat = 48.4057 the appropriate png file is http://tile.openstreetmap.org/18/139621/90681.png

OSM Mapnik Tile

http://tile.openstreetmap.org/18/139621/90681.png

In our application the appropriate zoom level for the choosen extent is calculated this way, that the displayed width of one tile doesn't goes beyond its size (256 pixel), then the next zoom level is choosen. With this method it seems like you have a continous zooming behaviour and not only the descrete zoom levels known from Google Maps, Bing Maps or OpenStreetMap, which sometimes ends in loosing orientation while zooming in or out.
When knowing the zoom level the xminTile, xmaxTile, yminTile and ymaxTile can be estimated and all the tiles in between are appended as image nodes to the SVG document.

Importing/Displaying the GPX Files

The XMLHttpRequest object is used for making asynchronous calls to the server to retrieve the GPX 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.

The retrieved XML objects are then analyzed within the application and overlaid on the OSM layer. They are organized in different groups (<g/>) and displayed as SVG paths (<path/>), circles (<circle/>) or images (<image/>).

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

Using and Extending the GPX (the GPS Exchange Format) for describing the GPS data

The GPS/XML files take over the GPX (the GPS eXchange) format, which is a light-weight XML data format for the interchange of GPS data between applications and web services on the internet. GPX is developed by Topografix and has been the de-facto XML standard since the initial GPX 1.0 release in 2002. GPX is being used by dozens of software programs and web services for GPS data exchange, mapping, and geocaching.

The GPX 1.1 Schema Documentation [REF4] describes GPS data as waypoints <wpt/>, tracks <trk/>, and routes <rte/>. A waypoint represents a point of interest, or named feature on a map. A track is an ordered list of points describing a path. A route is an ordered list of waypoints representing a series of turn points leading to a destination. Routes are not considered within the application.
For further description the GPX 1.1 Schema offers different tags like name <name/>, comment <cmt/>, description <desc/>, link <link/>, or type <type/>. The tag <extensions/> is implemented to extend the GPX schema for further needs. We use this tag within our city and tourist information system to store information about rendering options, symbology, images and slideshows, specifications, addresses, rating etc.

A GPS/XML file looks similar to the following

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<gpx>
   <metadata/>
   <wpt lat="48.4118" lon="11.7411">
      <name/>
      <cmt/>
      <desc/>
      <type/>
   </wpt>

   <trk>
      <name/>
      <cmt/>
      <desc/>
      <link/>
      <extensions>
         <score/>
         <spec/>
         <transport/>
         <sym/>
         <img/>
      </extensions>
      <trkseg>
         <trkpt lat="48.405993" lon="11.740448">
            <ele>491.85</ele>
            <time>2009-12-27T09:31:27Z</time>
         </trkpt>
      </trkseg>
   </trk>
</gpx>	

All the information within the GPX/XML file is used to display the data. Either as images, circles or paths on the map or as further information when clicking on one of those elements in the map.

Organizing the Application: Building up the Legend/Topics

While starting the application, an XMLHttpRequest is used to load an XML file, called gpxconfig.xml. This file organizes the legend/topics of the travel diary and has the following structure:

<?xml version="1.0" encoding="UTF-8"?>
<mappetizer>
   <gpxLayer>
      <gpxLayer>
         <gpxfile>freising/walking/office.xml</gpxfile>
      </gpxLayer>
      <gpxLayer>
         <gpxfile>freising/nordicwalking/nw2.xml</gpxfile>
      </gpxLayer>
   </gpxLayer>
   <gpxLayer>
      <gpxfile>freising/sundaytrips/silly_drive.xml</gpxfile>
   </gpxLayer>
</mappetizer>

The legend itself is an embedded SVG element. Each gpxLayer makes an entry in the legend and can be seen as a sort of a chapter. A gpxLayer may include other gpxLayer(s), as sub chapters/layers. This kind of gpxLayer can be seen as a "group layer" unlike those layers which include one ore more <gpxfile>. So after designing the gpxconfig.xml file, the legend might have a look in the application like this:

Legend of the Application

The Topics of the Application

Supporting Headings and Multilingualism: the gpxinterface.xml

Within the gpxinterface.xml file the terms for display (captions and headings) are set. For example if a comment is made about the track, it will be noted within the specific tag like this:

<cmt>
   Until end of 2009 this was our daily walk to the office,
   in the morning and back in the night.
</cmt>

What will be seen then as the heading to this comment (here "Comment") is actually defined in the gpxinterface.xml and can be changed there.

<?xml version="1.0" encoding="UTF-8"?>
<mappetizer>
   <interface>
      <region name="global">
         <cmt>
            <de>Bemerkung</de>
            <en>Comment</en>
            <fr>Remarque</fr>
            <it>Commento</it>
            <es>Comentario</es>
         </cmt>
      </region>
   </interface>
</mappetizer>
Display of Captions and Headings

Display of Captions and Headings

As the application supports multilingualism, the tags within the GPX files can be expanded with different language tags, like:

<cmt>
   <en>	
      Until end of 2009 this was our daily walk to the office,
      in the morning and back in the night.
   </en>
   <de>
      Dies war bis Ende 2009 unser täglicher Arbeitsweg. 
   </de>
   <fr>
      .... 
   </fr>
</cmt>

GeoNames Webservices

To expand the functionalities, the application uses different Geonames WebServices [REF5] like wikipedia geocoding webservice, weather webservice, and other information at given latitude/longitude (lat/lng) values as well as data about countries.
Dojo Toolkit offers cross-site data access with the function dojo.io.script.get() for JSON objects.

findNearBy

When clicking on a track in the application, the request "findNearBy" is sent to GeoNames to get information about the closest toponym for the starting point of this track.

http://ws.geonames.org/findNearbyJSON?lat=48.405687&lng=11.740979&maxRows=1

returns

{"geonames":[{"countryName":"Germany","adminCode1":"02","fclName":"spot, building, farm",
"countryCode":"DE","lng":11.7421,"fcodeName":"hotel","distance":"0.2569",
"toponymName":"Marriott Munich Airport","fcl":"S","name":"Marriott Munich Airport",
"fcode":"HTL","geonameId":6472983,"lat":48.4035,"adminName1":"Bavaria","population":0}]}

This information is displayed then in the info window, automatically describing where the track starts about.

info window

FindNearby request to get information about the closest toponym

Wikipedia Geocoding Webservice

GeoNames offers two different webservices which give access to georeferenced wikipedia articles when passing lat/lng values: "Find nearby Wikipedia Entries" (findNearbyWikipedia) and "Wikipedia Articles in Bounding Box" (wikipediaBoundingBox).
WikipediaBoundingBox would be better suited because of offering a bounding box, but it only supports German and English. FindNearbyWikipedia supports 240 languages but gives back wikipedia entries in a circle around the lat/lng value.

Both web services are used within the application. WikipediaBoundingBox is used when clicking on the wikipedia button in the toolbar, whereas the request findNearByWikipedia is implemented within the identify window. Depending on the settings, up to three wikipedia buttons are added automatically:

  1. wikipedia articles of the country's language where the track is located (if the track is located in Germany, the wikipedia entries will be in German, if the track is located in Russia, the wikipedia entries will be in Russian language),

  2. the language choosed in the drop down menue (or the default language of the application, which can be set by the owner of the application),

  3. English (assuming that beside the local language most entries will be available in English language)

http://ws.geonames.org/findNearbyWikipediaJSON?lat=48.405687&lng=11.740979&r=1&lang=de

returns a list of wikipedia entries looking similar to the following

{"geonames":[{"summary":"Die Pallottinerkirche St. Johannes der Täufer ist ein moderner
Kirchenbau im nördlichen Stadtgebiet von Freising (Oberbayern). Sie wurde in den Jahren
1928 bis 1930 zusammen mit einem langgestreckten Missionsseminar nach Plänen des Darmstädter
Architekten Jan Hubert Pinand erbaut. Pinand schuf mit dem Komplex eine der bedeutendsten
Bauten des kirchlichen Expressionismus in Altbayern. (...)","distance":"0.0971",
"title":"Pallottinerkirche St. Johannes der Täufer (Freising)",
"wikipediaUrl":"de.wikipedia.org/wiki/Pallottinerkirche_St._Johannes_der_T%C3%A4ufer_
%28Freising%29","elevation":0,"countryCode":"DE","lng":11.7422222222222,
"feature":"landmark","lang":"de","lat":48.4059722222222,"population":0}]}

In a next step, the application appends the location of the wikipedia entries as image nodes to the SVG document. A mouseover event shows the title of the entry, when clicking on a wikipedia image, a info window will display further information, like the summary and the URL to the wikipedia article:

Displaying wikipedia entries on the map

Displaying wikipedia entries in the info window

FindNearbyWikipedia request to get information about wikipedia entries on a given lat/lng value, radius and language

countryInfo

As we need information about the local language, the request countryInfo is done once while loading the application.

http://ws.geonames.org/countryInfoJSON

returns for all countries information like here for Germany:

{"geonames":[{"countryName":"Germany","bBoxWest":5.865639,"currencyCode":"EUR","fipsCode":"GM",
"countryCode":"DE","isoNumeric":"276","capital":"Berlin","areaInSqKm":"357021.0","languages":"de",
"bBoxEast":15.039889,"isoAlpha3":"DEU","continent":"EU","bBoxNorth":55.055637,"geonameId":2921044,
"bBoxSouth":47.275776,"population":"82369000"}]}

Weather

http://ws.geonames.org/weatherJSON with the parameter north, south, east, west (coordinates of bounding box) returns a list of weather stations with the most recent weather observation.

http://ws.geonames.org/weatherJSON?north=48.3&south=48.5&east=11.9&west=11.6

returns entries like

{"weatherObservations":[{"clouds":"scattered clouds","weatherCondition":"n/a",
"observation":"EDDM 201220Z 08005KT 050V120 9999 SCT040 24/14 Q1016 NOSIG",
"windDirection":80,"ICAO":"EDDM","lng":11.8166666666667,"temperature":"24","dewPoint":"14",
"windSpeed":"05","humidity":53,"stationName":"Munchen","datetime":"2010-07-20 12:20:00",
"lat":48.3666666666667,"hectoPascAltimeter":1016}]}

Weather data is provided in the METAR (METeorological Aviation Report) format, like
"EDDM 201600Z 08005KT 050V120 9999 SCT040 24/14 Q1016 NOSIG"

whereas

  • EDDM is the ICAO (International Civil Aviation Organization) airport code for Munich airport

  • 201600Z indicates the time of the observation. It is the day of the month (the 20th) followed by the time of day (16.00 UTC time zone)

  • 08005KT wind direction and wind speed

  • ...

GeoNames already offers some decoding of the METAR format, like stationName, datetime, windSpeed, windDirection, but we realized that cloudiness as well as information about snow or rain need further analyses of the string. So depending on the cloud ceiling, the specific picture is appended as an image node to the SVG document and other information (temperature, wind direction, wind speed) are drawn on top on it. The mouseover gives information about the station name and (local) time of observation.

Displaying weather info on the map

Displaying weather info on the map

Weather request to get information about the weather condition

As the time of the observation is in UTC time zone, each record of the request needs another request to get the local time for that weather observation:

http://ws.geonames.org/timezoneJSON?lat=48.3666666666667&lng=11.8166666666667

which returns

{"time":"2010-07-20 16:04","countryName":"Germany","sunset":"2010-07-20 21:05",
"rawOffset":1,"dstOffset":2,"countryCode":"DE","gmtOffset":1,"lng":11.8166666666667,
"sunrise":"2010-07-20 05:32","timezoneId":"Europe/Berlin","lat":48.3666666666667}

and the desired information: rawOffset. As our idea was to change the symbol from day (sunlight) to night (moonlight) I wanted information about sunrise and sunset from the specific lat/lng values. This information was available for us within one day (thanks Marc for your help)!

OSM Nominatim

The application provides address search provided by OpenStreetMap Nominatim. This is a tool to search OSM data by name and address.

http://nominatim.openstreetmap.org/search?q=Vimystra%C3%9Fe,+Freising&format=json&polygon=0&addressdetails=0

returns a list with records looking similar to the following

[{"place_id":13658848,"licence":"Data Copyright OpenStreetMap Contributors,
Some Rights Reserved. CC-BY-SA 2.0.","osm_type":"way","osm_id":4682991,
"boundingbox":[48.4051322937012,48.4068412780762,11.738881111145,11.7456321716309],
"lat":48.4058400212232,"lon":11.7423118715494,"display_name":"Vimystraße, Domberg,
Freising, Bayern, 85354,Regierungsbezirk Oberbayern, Freistaat Bayern, Deutschland",
"class":"highway","type":"residential"}}]

In a next step, the application will either zoom to that location (if it is only one record) or will list all entries below the text box, so the user can choose from the list and then zoom to that location in a next step.

info window

Results from OSM Nominatim for "Vimystraße, Freising"

info window

Clicking on the first entry will zoom you to this location

As OpenStreetMap unfortunately does not provide translations of the tags assigned to OSM-Elements in a JSON format, the gpxinterface.xml file has to be expanded for these tags and different languages.

Next Steps

  • Support of geotagged photos

  • Extending the analyses tools, e.g. providing altitude profiles

  • ...

Links

Mappetizer Web Mapping applications are products of uismedia, a software developing company, mainly focusing on web mapping and GIS applications. Since 2002 they are using SVG as a technique to create powerful web maps.

Bibliography

[REF1] Dojo Toolkit: http://www.dojotoolkit.org

[REF2] OpenStreetMap: http://www.openstreetmap.org

[REF3] OSM Mapnik Tile Server: http://tile.openstreetmap.org/

[REF4] GPX 1.1 Schema Documentation: http://www.topografix.com/gpx/1/1

[REF5] Geonames Webservices: http://www.geonames.org