Technical documentation of Geoportal API

  • FR
  • UK

Index / Documentation / Technical documentation

Use the Flex 2D Web API

Setting up the environment

Before developing your first application with the Flex 2D Web API, it is necessary to install tools to compile your application.

Flash Builder is the official solution to develop Flex applications. It's installation is described in the tutorial Developing with Flash Builder.

Another possibility, according to the developer's preference is to use Maven: follow the tutorial Developing with Maven

Finally, install the release version(eg 11.1 R102) of the Flash Player on your browser.

actually, development versions can sometimes be the cause of anomalies (eg, lattice effect on the WMTS with version 10.3 D162).

Recovering the libraries - quickstart project

Donwload the pre-configured project.

To import the project into Flex Builder, follow the procedure outlined in the "import an existing Flex application" tutorial Developing with Flash Builder.

To compile the project with Maven, follow the tutorial Developing with Maven

Open the project folder to view files and folders it contains.

quickstart project

The Geoportal API libraries and Openscales can be found in the 'libs' directory.

An application model file 'MainApplication.mxml' which is in the src/main/flex/ directory has the following contents:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:geoportail="http://geoportail.fr"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           >

    <geoportail:Map id="fxMap"
                        projection="EPSG:4326"
                        center="2.418611,48.842222"
                        resolution="0.00034332275390625"
                        maxExtent="-180,-90,180,90"
                        width="100%" height="100%"
                        defaultLayers="false"
                        defaultControls="false" >

        <!-- En: Geographic data displayed by the Map are defined by Layers. You can overlay multiple Layers
                 in the Map, and adjust their alpha.-->
        <!-- Fr: Les données géographiques affichées dans la carte sont définies par des Layers.
                 Il est possible de superposer plusieurs couches et de gérer leur transparence. -->
        <!-- En: Layers -->
        <!-- Fr: couches -->

        <!-- En: Controls -->
        <!-- Fr: Contrôles -->


    </geoportail:Map>
</s:Application>

This is the base file from which we will be able to develop a Flex application using the Flex 2D Web API.

The first detail to note is the attribute xmlns:geoportail="http://geoportail.fr" of the Application tag. It can import the components of the Geoportal API in the application. They will then be accessible as <Geoportal:....>

The Map component is the main component of the application, it enables displaying a map, which is a set of geographical data in a given projection, centered on a given point, at a given resolution (m/pixel or °/pixel) and on a maximum extent.

Here, for example, the map is in EPSG: 4326 projection, centered on the coordinates 2.418611, 48.842222, at a resolution of 0.00034332275390625°/pixel, on the world.

From this model, we can construct an application by adding layers and interface components in MXML or ActionScript. Refer to the documentation pages or following various tutorials on the subject.

Compiling a flex application

Compiling a flex application differs depending on the chosen development environment. If it is maven, see Developing with Maven tutorial ; in the case of Flex Builder, see Tutorial Developing with Flash Builder.

Integrating a flash visualization into a web page

Once the application is written and compiled, there are two ways to integrate it into an HTML page: using an <object> tag or using the loader.

  • using an <object> tag

    See matching Flash tutorial: "Integrating its application in a web page"

  • using the loader

    The use of the loader consists on using the high-level API to hide the use of the <object> tag. To do this, consult page dedicated to the use of the loader.