• Like
Mappetizer Web mapping software
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Mappetizer Web mapping software


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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • , underground stations
  • 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.
  • 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.
  • Mappetizer uses for example dojox.image.Lightbox to show images centered on the screen.
  • 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.
  • As OSM Mapnik data are in a Mercator projection, all GPS data have to be transformed from latitude/longitude values to the Mercator projection.
  • 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.
  • 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 example.
  • As the application supports multilingualism, the tags within the GPX files can be expanded with different language tags. 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:
  • I want to explain a bit of the technology by showing the use of the Weather webservice within the application.
  • 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.
  • 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)!
  • 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.


  • 1. Mappetizer Web Mapping Applications Mappetizer Tourist- and City-Info and Mappetizer Travel Diary Ruth LANG , Armin MÜLLER
  • 2. 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
  • 3. 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.
  • 4. 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.
  • 5. Contents
    • Dojo Toolkit
    • OpenStreetMap
    • Importing and displaying the GPX files
    • Organizing the application
    • GeoNames Webservices
    • OSM Nominatim
    • Next Steps
  • 6. 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:
    • Dojo
    • Dijit
    • DojoX
  • 7. 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
  • 8. 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
  • 9. 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)
  • 10. 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.
  • 11. 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.
  • 12. TabContainer, ContentPane
    • Declarative example of a TabContainer:
    • <div dojoType=&quot;dijit.layout.TabContainer&quot;>
    • <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Legend&quot;>
    • Displaying the legend in this tab
    • </div>
    • <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Info&quot;>
    • Displaying identify results in this tab
    • </div>
    • </div>
  • 13. 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.
  • 14. TitlePane
    • Programmatic example of a TitlePane:
    • var tp = new dijit.TitlePane({ title: &quot;I'm a TitlePane&quot;, content: &quot;Click arrow to close me!&quot; });
    • dojo.byId(&quot;holder&quot;).appendChild(tp.domNode);
  • 15. 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.
  • 16. 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.
  • 17. OpenStreetMap
    • The slippy map application rendered by Mapnik provides 18 zoom levels, whereas the tiles are
    • 256 x 256 pixel PNG files.
  • 18. OpenStreetMap
    • For a given lat/lon value at
    • a 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
  • 19. OpenStreetMap
    • For example with
    • zoom level = 18
    • lon = 11.7408
    • lat = 48.4057
    • the appropriate png file is http://tile.openstreetmap.org/18/139621/90681.png
  • 20. 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/>).
  • 21. 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.
  • 22. 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.
  • 23. 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.
  • 24. GPX 1.1 Schema For Tracks <trk/>
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot; ?>
    • <gpx>
      • <trk>
      • <name/>
      • <cmt/>
      • <desc/>
      • <link/>
      • <extensions>
      • <score/><spec/><sym/><img/><transport/>
      • </extensions>
      • <trkseg>
      • <trkpt lat=&quot;48.405993&quot; lon=&quot;11.740448&quot;>
      • <ele>491.85</ele>
      • <time>2009-12-27T09:31:27Z</time>
      • </trkpt>
      • </trkseg>
      • </trk>
    • </gpx>
  • 25. 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.
  • 26. Building up the Legend/Topics
    • Structure of the gpxconfig.xml file:
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <mappetizer>
    • <gpxLayer>
    • <name>
    • In and around Freising
    • </name>
    • <gpxLayer>
    • <gpxfile>
    • freising/walking/office.xml
    • </gpxfile>
    • </gpxLayer>
    • <gpxLayer>
    • </gpxLayer>
    • </gpxLayer>
    • </mappetizer>
  • 27. 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>
  • 28. 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.
  • 29. GeoNames Weather Webservice
    • GeoNames weather webservice provides weather data in the METAR (METeorological Aviation Report) format, like
    • &quot;EDDM 201520Z 08005KT 050V120 9999 SCT040 30/14 Q1016 NOSIG&quot;
    • 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
    • ...
  • 30. GeoNames Weather Webservice
    • http://ws.geonames.org/weatherJSON?north=48.3&south=48.5&east=11.9&west=11.6
    • returns entries like
    • {&quot;weatherObservations&quot;:[{&quot;clouds&quot;:&quot;scattered clouds&quot;,&quot;weatherCondition&quot;:&quot;n/a&quot;, &quot;observation&quot;:&quot;EDDM 201520Z 08005KT 050V120 9999 SCT040 30/14 Q1016 NOSIG&quot;, &quot;windDirection&quot;:80,&quot;ICAO&quot;:&quot;EDDM&quot;,&quot;lng&quot;:11.8166666666667,
    • &quot;temperature&quot;:„30&quot;,&quot;dewPoint&quot;:&quot;14&quot;,&quot;windSpeed&quot;:&quot;05&quot;,&quot;humidity&quot;:53,
    • &quot;stationName&quot;:&quot;Munchen&quot;,&quot;datetime&quot;:&quot;2010-07-20 15:20:00&quot;, &quot;lat&quot;:48.3666666666667,&quot;hectoPascAltimeter&quot;:1016}]}
  • 31. GeoNames Weather Webservice
  • 32. 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:
    • {&quot;time&quot;:&quot; 2010-07-20 16:04 &quot;,&quot;countryName&quot;:&quot;Germany&quot;,&quot;sunset&quot;:
    • &quot;2010-07-20 21:05&quot;,&quot;rawOffset&quot;:1,&quot;dstOffset&quot;:2,&quot;countryCode&quot;:&quot;DE&quot;,
    • &quot;gmtOffset&quot;:1,&quot;lng&quot;:11.8166666666667, &quot;sunrise&quot;:&quot;2010-07-20 05:32&quot;,&quot;timezoneId&quot;:&quot;Europe/Berlin&quot;,&quot;lat&quot;:48.3666666666667}
  • 33. 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
  • 34. OSM Nominatim
    • [{&quot;place_id&quot;:13658848,&quot;licence&quot;:&quot;Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0.&quot;,&quot;osm_type&quot;:&quot;way&quot;,&quot;osm_id&quot;:4682991, &quot;boundingbox&quot;:[48.4051322937012,48.4068412780762,11.738881111145,11.7456321716309], &quot;lat&quot;:48.4058400212232,&quot;lon&quot;:11.7423118715494,&quot;display_name&quot;:&quot;Vimystraße, Domberg, Freising, Bayern, 85354,Regierungsbezirk Oberbayern, Freistaat Bayern, Deutschland&quot;, &quot;class&quot;:&quot;highway&quot;,&quot;type&quot;:&quot;residential&quot;}}]
  • 35. Next Step
    • Support of geotagged photos
    • Extending the analyses tools, e.g. providing altitude profiles
    • ...
  • 36. Thank you very much for your attention Armin MÜLLER, Ruth LANG Further information about Mappetizer http://www.mappetizer.de