Technical documentation of Geoportal API

  • FR
  • UK

Index / Documentation / Technical documentation

Adding Controls to the Map

We will see in this section how to add and modifiy the following controls:

DrawingToolbar 
LayerCatalog 
LayerSwitcher 
Search engines 
Elevation tools

DrawingToolbar

The DrawingToolbar control is part of the extended API.

Adding the DrawingToolbar control in the multiple mode (default mode) to the map is as simple as that :

var layer = new OpenLayers.Layer.Vector("My drawing layer");
myMap.getMap().addControl( new Geoportal.Control.DrawingToolbar(layer) );

To use it in the single mode (one drawing toolbar which interacts with an active vector layer), the mode option must be passed in the toolbar options :

var layer = new OpenLayers.Layer.Vector("My drawing layer");
myMap.getMap().addControl( new Geoportal.Control.DrawingToolbar(layer, { mode: 'single' }) );

LayerCatalog

Adding the LayerCatalog control to the map is as simple as that :

myMap.getMap().addControl( new Geoportal.Control.LayerCatalog() );

The catalog control can also be configurated with options :

var filterByKeyword = new OpenLayers.Filter.Comparison({
    type:OpenLayers.Filter.Comparison.LIKE,
    property:'keywords',
    value:'%admin%'});
var options = {
    editable : false, // default value is true
    filter : filterByKeyword
};
myMap.getMap().addControl( new Geoportal.Control.LayerCatalog() );
  • editable option allows to choose if the filter button (c) is visible or not.
  • filter option allows to define a filter for the catalog. Filters are here instance of the OpenLayers.Filter class. Possible filter property values are :
    • the_geom to restrict on an extent
    • title to search a layer by its name (expected value format is "%myvalue%")
    • keywords to filter layers by keywords (expected value format is "%myvalue%")
    • inspirethematics to filter layers by thematics (expected value format is "%myvalue%")
    • startproduction to filter layers by start production date (expected date value format is 'YYYY-MM-DDTHH:MM:SSZ', see OpenLayers.Date.toISOString method to convert javascript date objects)
    • endproduction to filter layers by end production date (expected date value format is 'YYYY-MM-DDTHH:MM:SSZ', see OpenLayers.Date.toISOString method to convert javascript date objects)
    • publicationdate to filter layers by publication date (expected date value format is 'YYYY-MM-DDTHH:MM:SSZ', see OpenLayers.Date.toISOString method to convert javascript date objects)

Filter examples

  • Filter layers on an extent :
    var spatialFilter = new OpenLayers.Filter.Spatial({
            type:OpenLayers.Filter.Spatial.BBOX,
            property:'the_geom',
            value:new OpenLayers.Bounds(43.1195390625,-5.6269609375,50.4144609375,7.2929609375)
        });
    myMap.getMap().addControl( new Geoportal.Control.LayerCatalog( {filter: spatialFilter} );
  • Filter layers by keywords :
    var keywordsFilter1 = new OpenLayers.Filter.Comparison({
        type:OpenLayers.Filter.Comparison.LIKE,
        property:'keywords',
        value:'%admin%'});
    var keywordsFilter2 = new OpenLayers.Filter.Comparison({
        type:OpenLayers.Filter.Comparison.LIKE,
        property:'keywords',
        value:'%ortho%'});
    var keywordsFilterOr = new OpenLayers.Filter.Logical({ 
        filters : [keywordsFilter1,keywordsFilter2], 
        type: OpenLayers.Filter.Logical.OR });
    myMap.getMap().addControl( new Geoportal.Control.LayerCatalog( {filter: keywordsFilterOr} );
  • Filter layers by start production date :
    var startproductionMinFilter = new OpenLayers.Filter.Comparison({
        type:OpenLayers.Filter.Comparison.GREATER_THAN,
        property:'startproduction',
        value:'2012-01-10T00:00:00Z'});
    var startproductionMaxFilter = new OpenLayers.Filter.Comparison({
        type:OpenLayers.Filter.Comparison.LESS_THAN,
        property:'startproduction',
        value:'2012-01-25T00:00:00Z'});
    var filters = [startproductionMinFilter, startproductionMaxFilter];
    var startproductionFilter = new OpenLayers.Filter.Logical({ 
        filters : filters, 
        type: OpenLayers.Filter.Logical.AND });
    myMap.getMap().addControl( new Geoportal.Control.LayerCatalog( {filter: startproductionFilter} );

LayerSwitcher

When creating a layer, there are a lot of options. Some of them directly impacts the final rendering in the layer's manager :

  • when opacity or view options are in use for a given layer, the manager renders (1). This handle allows showing/hidding inside components :
    • (2) renders the opacity option (a number between 0.0 and 1.0, the higher is this number, the less transparent is the layer) : it is a slider that allows modifying the current transparency of the layer ;
    • (3) renders the view.drop option when it is turned to true : clicking on the trash definitively removes the layer from the layers manager list ;
    • (4) renders the view.zoomToExtent option when it is turned to true : clicking on the icon zooms to the maximum extent of the layer. []

Search engines

The search bar allows to make different types of research :

  • Simple search form an auto-completed single field
    • Advanced search from a form of multi-criteria (number, street address, zip code, city, country)
    • Reverse search near a point within a circle, or within an extent

The search bar uses, whether for "direct" geocoding or reverse geocoding, a standard service Open LS, the one of the Geoportal by default.

Geographical names search :

var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var panel= new Geoportal.Control.Panel({
    div:OpenLayers.Util.getElement(tbx.id+'_search')
});

var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(
    new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
        'PositionOfInterest:OPENLS;Geocode',//layer name
        {
            maximumResponses:100
        }
    ),{
        // control options
        //Add autocompletion
        autoCompleteOptions: {}
    }
);

panel.addControls([gazetteer]);
viewer.getMap().addControls([panel]);

Addresses search :

var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var panel= new Geoportal.Control.Panel({
    div:OpenLayers.Util.getElement(tbx.id+'_search')
});

var geocode= new Geoportal.Control.LocationUtilityService.Geocode(
        new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
            'StreetAddress:OPENLS;Geocode',//layer name
            {
                maximumResponses:100
            }
        ),{
          // control options
        }
    );
panel.addControls([geocode]);
viewer.getMap().addControls([panel]);

Recherche par parcelles cadastrales :

var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var panel= new Geoportal.Control.Panel({
    div:OpenLayers.Util.getElement(tbx.id+'_search')
});

var cadastralSearch= new Geoportal.Control.LocationUtilityService.cadastralParcel(
                                  new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
                                        'CadastralParcel:OPENLS;Geocode',//layer name
                                        {  
                                           maximumResponses:100
                                         }
                                  ),{
                                      // control's options
                                  }
              );
panel.addControls([cadastralSearch]);
viewer.getMap().addControls([panel]);

Reverse search :

var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var panel= new Geoportal.Control.Panel({
    div:OpenLayers.Util.getElement(tbx.id+'_search')
});

var gazetteer = new Geoportal.Control.LocationUtilityService.ReverseGeocode(
        new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
            'PositionOfInterest:OPENLS;ReverseGeocode',
            {
                formatOptions: {
                }
            }
        ),{
            title: 'gpControlLocationUtilityServiceReverseGeocode.title',
            setZoom: Geoportal.Control.LocationUtilityService.ReverseGeocode.setZoomForBDNyme
        }
    );
panel.addControls([gazetteer]);
viewer.getMap().addControls([panel]);

Elevation tools

Elevation tools allow developpers to get the elevation of one point on the map or a set of elevations along a path thanks to Geoportal elevation services.

  • Elevation of a point

    With high level API :

        // iv == InterfaceViewer
        // toolbox
        var tbx = iv.getViewer().getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
    
        iv.addComponent('Geoportal.Control.MeasureToolbar',
              [{
                  targetElement: OpenLayers.Util.getElement(tbx.id+'_meares'),
                  div: OpenLayers.Util.getElement(tbx.id+'_measure'),
    
                  elevationOptions : {
                     active: true,
                     targetElement: null
                  },
                  elevationPathOptions : {
                     active: false   // we don't want elevation path tool
                  }
               }]
        );
  • Elevation path

    With high level API :

        // iv == InterfaceViewer
        // toolbox
        var tbx = iv.getViewer().getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
    
        iv.addComponent('Geoportal.Control.MeasureToolbar',
              [{
                  targetElement: OpenLayers.Util.getElement(tbx.id+'_meares'),
                  div: OpenLayers.Util.getElement(tbx.id+'_measure'),
    
                  elevationOptions : {
                     active: false // we don't want single elevation tool
                  },
                  elevationPathOptions : {
                     active: true,   
                     targetElement: null
                  }
               }]
        );
    
        // Elevations set processing
        var ctrlelevationpath = map.getControlsByClass('Geoportal.Control.Measure.ElevationPath')[0];
        ctrlelevationpath.events.on({ 
            // "measure" event is triggerred when results come out of the service
            "measure": function(data) {
                // process data
                // ...
            }
        });