main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:mapApp

mapApp Object, Version 1.2.3, 2011-10-02, (see history at the end of the page)

This ECMAScript object should assist authors of SVG webapplications in creating user interfaces. It helps converting evt.clientX/clientY coordinates to viewBox coordinates, gives basic information about the UA and provides tooltips.

Why should you create SVG only web applications? Advantages of SVG only applications are flexiblity (you can control every single aspect of a SVG GUI element) and scalability (in SVG your userinterface elements are scalable as well). If you need a pixel-precise, scalable application, HTML is not very well suited, since HTML form elements don't scale well. SVG also potentially allows more sophisticated GUI elements than HTML provides, such as slider, dial knobs, complex colourpickers, etc. Disadvantages include complexity (more complex than using HTML form elements) and a potentially bad user experience, if your SVG GUI elements behave different than native GUI elements of the operating system the user is used to. Some browsers still don't support SVG to HTML or HTML to SVG communication. In that case you are sort of locked into doing everything with SVG in order to reach the broadest audience. Another advantage of creating SVG only applications is, that your applications also work in SVG viewers outside the webbrowser (e.g. Batik, eSVG or SVG embedded applications).

Almost all mapping or GUI examples on the page make use of this mapApp object. Have a look at the GUI examples to see some examples. For an example of the use of the tooltip functionality provided in this object see the tooltip example.

The mapApp object is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements of are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to in your project's "about page" or impressum. If you plan to use the GUI elements in a commercial product, please check back with the author of the GUI elements to investigate arrangements. The original URL for the mapApp object is



To use the mapApp object, your project needs to meet the following requirements:


Dependencies on external functions

  1. mapApp.js:
    • all of the objects and functions in this file are necessary
  2. helper_functions.js:
    • all the global variables at the top of the file
    • function getTransformToRootElement(node) provided by Kevin Lindsey


The following constructor function creates the mapApp object:

var myMapApp = new mapApp(adjustVBonWindowResize,resizeCallbackFunction);

The instance myMapApp should be made global in your ECMAScript file and should be named myMapApp in order to make it accessible to all functions or objects in your SVG web application. Most examples on assume that this object is present. The instance should be initialized by the onload event attribute.


myMapApp = new mapApp(true,svgResized);

The arguments are the following:

  1. adjustVBonWindowResize (Boolean):
    Determines whether the mapApp object should update the viewBox always to the window.innerWidth and window.innerHeight values after the SVG viewing area was resized
  2. resizeCallbackFunction (function):
    an optional callback function that is called after each resize. Note that this function is not called during mapApp initialization, it is called the first time the user resizes the SVG viewing area



Version history


Last modified: Tuesday, 10-Dec-2019 21:54:02 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: