Internalization in OpenLayers 2.10

The way offered in OpenLayers to localize the messages is very simple. It is implemented through the OpenLayers.Lang class and the extensions for each language.

If you want to use another locale different from the default (English), you have to import in your web pages the javascript file corresponding to the desired language. For example, to include Galician, it is necessary to import the gl.js file in your context:

<script type="text/javascript" src="OpenLayers/Lang/gl.js">

The second step to localize your elements with OpenLayers is to indicate the to locale to be used:

OpenLayers.Lang.setCode('gl');

Moreover, it is also posible to define new messages in each language through the extension of the corresponding OpenLayers locale classes with our own definitions:

OpenLayers.Util
     .extend(OpenLayers.Lang.gl, {
           'My layer' : 'A miña capa',
           'My control' : 'O meu control',
           ...
});

To use the new messages that you have defined, use the function OpenLayers.i18n. An example could be:

var mylayer = new OpenLayers.Layer.WMS.Post(
            OpenLayers.i18n("My layer"),
            ...
};

If the message for the specified locale is not found, the parameter of the function will be shown without changes.

Changing the font in MapServer 5.x+

The first step to change the size and font type of labels and legends provided by MapServer is to create a fontset file in the root specified in the configuration as it is explained in http://mapserver.org/mapfile/fontset.html.

Legends:

The MapServer 5.x+ configuration required to change the font used in legends is shown below:

MAP
 ...
 FONTSET "../fonts/fonts.list"

 ...

 LEGEND
   LABEL
     FONT "arial"
     TYPE truetype
     SIZE 8
   END
   TRANSPARENT ON
 END

 LAYER
 ...
 END

 ...
END

Once this has been done, you can query the legends to MapServer using for example an OGC standard query:


https://localhost/cgi-bin/mapserv?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&FORMAT=image%2Fpng&LAYER=mylayer

Labels: 

To associate this font also to the labels included in the map images provided by MapServer you have to include the same configuration in each layer:

MAP
 ...
 FONTSET "../fonts/fonts.list"

 ...

 LAYER
   CLASS
      ...
      LABEL
          ...
          FONT "arial"
          TYPE truetype
          SIZE 8
      END                  
    END   
 ...
 END

 ...
END

Point/Polygon layers depending on the zoom level

The way to define a layer served as a group of points or polygons according to the zoom level, always following the OGC standard queries, varies depending on the map server used:

• GeoServer: if it is your map server, you only have to follow the standard specifications and define a SLD style for the layer which difers the Symbolizer according to the zoom level. An example could be the following:

              <?xml version="1.0" encoding="utf-8"?>

              <StyledLayerDescriptor version="1.0.0"

                xmlns="http://www.opengis.net/sld" 

                xmlns:ogc="http://www.opengis.net/ogc"

                xmlns:xlink="http://www.w3.org/1999/xlink" 

                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">

                ...

                <NamedLayer>

                  <Name>mylayer</Name>

                  <UserStyle>

                    ...

                    <FeatureTypeStyle>

                      <Rule>

                        ...

                        <MaxScaleDenominator>300000</MaxScaleDenominator>

                        <PolygonSymbolizer>

                          ...

                        </PolygonSymbolizer>

                      </Rule>

                      <Rule>

                        ...

                        <MinScaleDenominator>300000</MinScaleDenominator>

                        <PointSymbolizer>

                          ...

                        </PointSymbolizer>

                      </Rule>

                    </FeatureTypeStyle>

                  </UserStyle>

                </NamedLayer>

                ...

              </StyledLayerDescriptor>

• MapServer: in the case of MapServer, it is necessary to asign a type to each layer defined in the configuration, but you can not assign to a layer several types (in this case POLYGON and POINT). To settle this, we defined two different layers (one of Polygon type and the other of Point type) and grouped them so we ask for the the group in the WMS queries instead of the individual layers. Bellow it is shown the necessary configuration for MapServer:

          MAP

              ...

              LAYER

                  NAME mylayer_poly

                  GROUP mylayer

                  TYPE POLYGON

                  MAXSCALE 35000 

                  STATUS OFF

                  DUMP TRUE

                  ...

                  METADATA

                      "wms_title"               "mylayer_poly"

                      "wms_group_title"    "mylayer"

                      ...

                  END

                  ...
              END

              LAYER

                  NAME mylayer_point

                  GROUP mylayer

                  TYPE POINT

                  MINSCALE 35000

                  STATUS OFF

                  DUMP TRUE

                  ...

                  METADATA

                      "wms_title"               "mylayer_point"

                      "wms_group_title"    "mylayer"

                      ...

                  END

                  ...

              END

          ... 

          END

ExtJS 3: Tooltips for panel's expland/collapse icons

In ExtJS 3.X there does not exist a predefined way to asociate tooltips to the links of expand and collapse a panel inside another panel or a viewport.

I have found out the following options to achieve it in an easy way:

• The first one is to change the implementation of the ExtJS components, adding the tooltip in the corresponding element. You can see the solution in the mailing list of Sencha, but remember always to extend the ExtJS clases with your own changes instead of change the library files directly:

http://www.sencha.com/forum/showthread.php?25136-Panel-Expand-Collapse-Icon-Tooltip-Solution

• Other solution can be so simple as search the corresponding div html element and incorporate it a title field, which in most of web browsers will automatically be traduced in a tooltip:

           mainPanel = new Ext.Panel( {
                               items : [ centralPanel, rightPanel ],
                               layout : 'border',
                               ....
                               listeners : {
                                       "afterrender" : function(c) {
                                              var d =                                                    this.getEl().dom.getElementsByTagName("div");
                                              var found = 0;
                                              for (var i=0; i<d.length; i++) {
                                                      if (d[i].className.contains("x-tool-expand")) {
                                                              d[i].title = "Expand Leyend";                                                              found++;
                                                      } else if (d[i].className.contains("x-tool-collapse")) {
                                                              d[i].title = "Collapse Leyend";
                                                              found++;
                                                      }
                                                      if (found == 2) break;
                                              }
                                       }
                               }
                       });

• Finally, the solution which I have chosen is described in http://www.sencha.com/forum/showthread.php?109443-Add-tooltip-to-Expand-Collapse-icon-and-Minimize-and-Maximize-icon, which I have adapted to my case:

                       rightPanel = new Ext.Panel( {
                               region : "east",

                               collapsible: true,
                               ...
                               toggleTip: {
                                       text: "Collapse Leyend"
                               },
                               listeners : {
                                       "afterrender" : function(c) {
                                               c.toggleTip.target = c.tools['toggle'];
                                               Ext.QuickTips.register(c.toggleTip);
                                       }
                               }
                       });

                       mainPanel = new Ext.Panel( {
                               ...
                               items : [ centerPanel, rightPanel ],
                               layout : 'border',
                               toggleTip: {
                                     text: "Expand Leyend"
                               },
                               listeners : {
                                       "afterrender" : function(c) {
                                               c.toggleTip.target = 
                                                  c.layout.east.collapsedEl.dom.firstChild;
                                               Ext.QuickTips.register(c.toggleTip);                                       

                                        }
                               }
                       });

Including Projections in OpenLayers

If you are using the OpenLayers viewer and you need to operate with the Projection of the map and layers, perhaps you notice that the behavior of the functions (e.g. OpenLayers.Bounds.transform) is not the expected. More specifically, it seems that they don't do anything at all.

The origin of that is that OpenLayers only includes the EPSG4326 and EPSG90013 projections. If you use another one, you'll have to include it using the proj4js library.


You can see all the necessary documentation in:

http://trac.osgeo.org/openlayers/wiki/Documentation/Dev/proj4js

Here there are the steps I followed:

• First of all, I downloaded the most recent version of Proj4js.

$ wget http://trac.osgeo.org/proj4js/attachment/wiki/Download/proj4js-1.0.1.zip

• Then, I included the corresponding Javascript file in my HTML page:

<script type="text/javascript" src="proj4js/proj4js-compressed.js></script>

• In my case, the desired projection is not defined by default in Proj4js, so I looked for it in http://spatialreference.org/:

Proj4js.defs["EPSG:23029"] = "+proj=utm +zone=29 +ellps=intl +units=m +no_defs";

• Finally, I copied the Proj4 format of the projection in a Javascript file which I also included in my page:

<script type="text/javascript" src="proj4js/defs/EPSG23029.js></script>

And now all the operations over projections with the projection EPSG23029 work well.