Layout concepts
From MapbenderWiki
There are various concepts how to layout a Mapbender application. This tutorial will show three basic concepts.
Absolute positioning
This is the default way in which Mapbender handles layout.
In the Edit application elements interface, you can set the top and left values (and also width and height).
- Pro
- Easy to understand for people unfamiliar with CSS
- Has been tested thoroughly
- Con
- Changes are cost-intensive (You might want to use a clever SQL if you want to, say, move 20+ elements 10px to the right. (There is a graphical layout tool, but it is deprecated)
- Does not scale well on different resolutions
Container elements
There are various container elements that allow you to position your elements in containers. Here are the available container elements in Mapbender 2.7
- Pro
- Easy to change layout, the containing elements are just listed in the target field in the Edit application elements form.
- Adjusts itself to different screen resolutions
- Con
- Knowledge of CSS might be required (for example when using the pan container)
- Has not been thoroughly tested (expect problems with legacy modules, especially IFrames).
Free layout
In a free layout you more or less include HTML, CSS and JavaScript, bypassing the CMS qualities (and constraints) of Mapbender. You would basically use this layout type if you would not be using existing Mapbender modules, and just wanted to benefit from Mapbender's authentication and service compilation aspects.
You could add a single application element "body". In the Edit application elements form you could add your HTML under "content" and reference a single PHP/JavaScript file under "JavaScripts", plus a CSS file in the Edit element vars dialogue.
- Pro
- Very flexible, no constraints by Mapbender CMS
- Con
- Doesn't mix well with the other approaches, so you won't be able to use any existing Mapbender application elements.
