Mappetizer Web mapping software

SVG OPEN, Aug. 30 - 1. Sep. 2010, Paris

Mappetizer Web Mapping Applications

Mappetizer Tourist- and City-Info and Mappetizer Travel Diary

Ruth LANG , Armin MÜLLER


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.

View as an example:

http://www.uismedia.de/mappetizer/traveldiary/TravelDiary_Ruth/index.html


Main Goals and Ideas

• Quasi-dynamic import/display of GPS data (GPX files).

• Displaying of any information based on geographic data, like points (= waypoints, e.g. hotels, schools, places of interest), lines (= tracks, e.g. bicycle and hiking tours, online guided city tours) and polygons.

• Based on open standards (SVG, HTML, XML).The map, overview and legend of the applications are

embedded SVG elements within the HTML page.

• Not depending on any specific web server technologies or database.


Main Goals and Ideas

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

• Not depending on Google or Bing Maps and their terms of use.


Contents

• Dojo Toolkit

• OpenStreetMap

• Importing and displaying the GPX files

• Organizing the application

• GeoNames Webservices

• OSM Nominatim

• Next Steps


Dojo Toolkit

The application uses the open source modular JavaScript library Dojo Toolkit and the Dojo widgets system.

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 which we use in our application, like:

•Array Utilities, String Utilities

•DOM manipulation and Events

•Ajax / IO Tools, JSON Tools

•Objects / OO Tools


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


Dijit

• Widgets (e.g. dijit.Menu and dijit.MenuItem, dijit.Toolbar, dijit.TitlePane)

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

• Layout (e.g. dijit.layout.BorderContainer, dijit.layout.ContentPane, dijit.layout.TabContainer)


Dijit

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.


TabContainer, ContentPane

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.


TabContainer, ContentPane

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>


TitlePane

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.


TitlePane

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.


OpenStreetMap

The web application uses OpenStreetMap (OSM) as a background layer. OSM data are directly imported via the OSM Mapnik Tile Server, so the user benefits from perpetual up-to-dateness without having to concern about.


OpenStreetMap

The slippy map application rendered by Mapnik provides 18 zoom levels, whereas the tiles are256 x 256 pixel PNG files.


OpenStreetMap

For a given lat/lon value ata specific zoom level, the xTile and yTile are calculated:

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 organized, 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


OpenStreetMap

For example with

zoom level = 18lon = 11.7408lat = 48.4057

the appropriate png file is http://tile.openstreetmap.org/18/139621/90681.png


Importing/Displaying the GPS Data

The XMLHttpRequest object is used for making asynchronous calls to the server to retrieve the GPS data. Dojo Toolkit offers for this the dojo.xhrGet() function.

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


GPX (GPS Exchange Format)

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 1.1 Schema

The GPX 1.1 Schema Documentation 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.


GPX 1.1 Schema

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 to store information about rendering options, symbology, images and slideshows, specifications, addresses, rating etc.


GPX 1.1 Schema For Tracks <trk/>

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><gpx>

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

</gpx>


Organizing the Application

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.


Building up the Legend/Topics

Structure of the gpxconfig.xml file:

<?xml version="1.0" encoding="UTF-8"?> <mappetizer><gpxLayer><name>In and around Freising</name><gpxLayer><gpxfile>freising/walking/office.xml</gpxfile> </gpxLayer><gpxLayer></gpxLayer></gpxLayer></mappetizer>


Multilingualism

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

gpxinterface.xml:

<cmt><de>Bemerkung</de><en>Comment</en><fr>Remarque</fr><it>Commento</it></cmt>


GeoNames Webservices

To expand the functionalities, the application uses different Geonames WebServices 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.


GeoNames Weather Webservice

GeoNames weather webservice provides weather data in the METAR (METeorological Aviation Report) format, like

"EDDM 201520Z 08005KT 050V120 9999 SCT040 30/14 Q1016 NOSIG"

whereas

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

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

•08005KT wind direction and wind speed

•...



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 201520Z 08005KT 050V120 9999 SCT040 30/14 Q1016 NOSIG", "windDirection":80,"ICAO":"EDDM","lng":11.8166666666667,"temperature":„30","dewPoint":"14","windSpeed":"05","humidity":53,"stationName":"Munchen","datetime":"2010-07-20 15:20:00", "lat":48.3666666666667,"hectoPascAltimeter":1016}]}




UTC Time Zone

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}


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


OSM Nominatim

[{"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"}}]


Next Step

• Support of geotagged photos

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

• ...


Thank you very much for your attention

Armin MÜLLER, Ruth LANG

Further information about Mappetizerhttp://www.mappetizer.de

Documents

Mappetizer Web mapping software