Technical documentation of Geoportal API

  • FR
  • UK

Index / Documentation / Technical documentation

Changing styles

The Geoportal API default styles

Default CSS styles for Geoportal API and OpenLayers (style.css) are automatically loaded by the standard and extended APIs if necessary:

coordinates fields

When using the minimum API or in order to load CSS styles, one can use the following URLs :

  • OpenLayers :
    http://api.ign.fr/geoportail/api/js/VERSION/theme/default/style.css
    http://api.ign.fr/geoportail/api/js/VERSION/theme/default/ie6-style.css
    http://api.ign.fr/geoportail/api/js/VERSION/theme/default/google.css
    • ie6-style.css for IE 6 or before (png alpha channel fix);
    • google.css when OpenLayers.Layer.Google is used.
  • Geoportal :
    http://api.ign.fr/geoportail/api/js/VERSION/theme/geoportal/style.css
    http://api.ign.fr/geoportail/api/js/VERSION/theme/geoportal/standard.css
    • standard.css overwrites styles when Geoportal.Viewer.Standard is used.

The example Changing the layout shows how to load CSS directly.

It is worth to know that CSS are set up for 800 by 600 default map size. It is advised to overwrite CSS rules when changing map's size.

Predefined themes of the Geoportal API

The different themes:

  • The legacy theme:

    This theme was used by default until the 2.0 version of the API. Here is an overview of it:

coordinates fields

To load this style, use the following url:

http://api.ign.fr/geoportail/api/js/VERSION/theme/black/style.css
  • Le thème black:

    Here is an overview of this style:

coordinates fields

To load this style, use the following url:

http://api.ign.fr/geoportail/api/js/VERSION/theme/black/style.css

How can we change them?

  • Using the method Geoportal.load

    Add the attribute theme to the loader's options:

        window.onload= function() {
            iv= Geoportal.load(
                // div's ID:
                'viewerDiv',
                // API's keys:
                ['VOTRE_LICENCE'],
                {// map's center :
                    // longitude:
                    lon:2.731525,
                    // latitude:
                    lat:45.833333
                },
                null,
                {
                  language:'fr',
                  geormUrl:config.serverUrl,
                  theme:{
                    name:'black',
                    styles:[{css:'http://api.ign.fr/geoportail/api/js/VERSION/theme/black/style.css',
                             id:'__GeoportalBlackCss__'}
                           ]
                  },
                  viewerClass:'Geoportal.Viewer.Default',
                  componentsOptions:{
                    'Geoportal.Component.LegalNotice.Logo':{logoSize:30}
                  }
                }
            );
        };
  • Without using the method Geoportal.load

    Add to the viewer's options the loadTheme option whose value is a function that loads the style in question:

    viewer= new Geoportal.Viewer.Default(
                    "viewerDiv",
                    OpenLayers.Util.extend({
                            mode:'normal',
                            territory:'FXX',
                            loadTheme: function() {
                                    Geoportal.Util.setTheme('black');
                                    Geoportal.Util.loadCSS('http://api.ign.fr/geoportail/api/js/VERSION/theme/black/style.css','__GeoportalBlackCss__','');
                            }
                    }, window.gGEOPORTALRIGHTSMANAGEMENT===undefined? {apiKey:['VOTRE_LICENCE']}:gGEOPORTALRIGHTSMANAGEMENT)
    );