>> Back to manual

Layout configuration

Using resizeable elements - jQuery ui layout

v4 uses as default the ui layout jQuery library for a flexible layout design with nested and resizable zones. The default map.phtml file is one of the main files users will typically modify and adapt to their specific needs. The current layout configuration is done in the <header> part of this file, like

$(document).ready(function () {
    myLayout = $('body').layout({
        west__initClosed: true,
        north__size: 40,
        south__size: 35,
        east__size: 220,
        north__spacing_open: 0,
        south__spacing_open: 0,
        center__onresize: "PM.Layout.resizeMapZone",
        east__onresize: function(name, element){$('#toc').height(element.height() - $('#refmap').height() - 3) }
    /** Some components to be added to UI */
    $('#uiLayoutCenter').toolBar(PM.buttonsDefault);  // ToolBar, REQUIRED
    $('#uiLayoutNorth').toolLink(PM.linksDefault);   // Tool links
    $('#uiLayoutCenter').appendElement('div').addClass('map-top-bar');  // Top bar over map

The first part contains jQuery layout definitions, for detailed descriptions of the various options at the respective homepage at

The part below /** Some components to be added to UI */ is more p.mapper-specific and defines e.g. the toolbar definition (placement and tools included). Exact placement is done via CSS in templates/layout.css.

Plain layout

An alternative layout using a simplified approach is available via the map_plainlayout.phtml start page. Auto-resizing of selected elements (typically the map) is performed via the JavaScript functions inside the <head> part of the file.

        resizeContainers: function() {


The function resizeContainers: function() has to be adapted in case the layout should be modified, e.g. having the TOC on the left side etc. This should be quite straightforward and require only basic knowledge of JavaScript, taking as template the existing function.

Adapt the section below for details of element positioning, margins etc.

    $(document).ready(function () {
        var mrgH = 6;
        var mrgV = 6;
        $('#uiLayoutRoot').css({position:'absolute',  top:10, bottom:10, left:10, right:10});
        $('#uiLayoutEast').css({position:'absolute', width:0, 'margin-right':mrgH});
        $('#uiLayoutWest').css({position:'absolute', left:0, width:240, height:'100%', 'margin-left':mrgH, 'margin-right':mrgH, 'z-index':99});
        $('#uiLayoutNorth').css({position:'absolute', top:0, height:40, width:'100%', 'margin-bottom':mrgV});
        $('#uiLayoutSouth').css({position:'absolute', bottom:0, height:35, width:'100%', 'margin-top':mrgV+2});

some Style (CSS) settings can either be applied also at this section listed above or in the specific style section:

 <style type="text/css">
   .ui-layout-west {border: 1px solid #999999; background-color:#e9e9e9;}
   .ui-layout-center {border: 1px solid #999999;}
   .ui-layout-root {border: 1px solid #000000;}

See also the FAQ about customizations.

Alternative Layout Samples

A bunch of sample layouts is available via the SVN here or via the sourceforge repository.

You can also view the samples online here

Last modified 7 years ago Last modified on Nov 29, 2009, 1:19:28 PM