[OpenLayers-Users] WFS layer visible in IE6 and IE7, but not in Firefox. Tried to set up proxy. No succes yet.

sendeman martijnsendenspam at gmail.com
Mon Jun 22 03:31:02 EDT 2009


Hi,

Thanks for your responses (to this thread and also to thread
http://n2.nabble.com/Scalebar-not-visible-td3086564.html). I did understand
that sending more information might be required, that's why I asked. :-)

I tried your suggestions. What struck me as odd is that when I changed
meters to m, the map doesn't get drawn at all. I get the error:

OpenLayers.Number.format is not a function     (line 310,
openlayers_scalebar.js)
this.element.title = this.scaleT... + OpenLayers.Number.format(this.scale);

When I comment the scalebar out in the init() function, the map does draw
correctly.

So, more information is —like you said— probably required. I hope the
information below helps to track down the issues I'm having.

Thanks again and next time I'll try to give any information I can find that
might be relevant.

Regards, Martijn Senden.

_____________________________________________________
Sample of the WFS request. I took it from the firebug console.
_____________________________________________________
<?xml version='1.0' encoding="ISO-8859-1" ?>
<wfs:FeatureCollection
   xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
   xmlns:wfs="http://www.opengis.net/wfs"
   xmlns:gml="http://www.opengis.net/gml"
   xmlns:ogc="http://www.opengis.net/ogc"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://www.opengis.net/wfs
http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd
 
                       http://mapserver.gis.umn.edu/mapserver
http://localhost/geoviewerbin/mapserv.exe
?SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=SpoortunnelWFS&OUTPUTFORMAT
=XMLSCHEMA">
      <gml:boundedBy>
      <gml:Box srsName="EPSG:28992">
      <gml:coordinates>83630.646163,446006.688340
84532.015815,448167.273662</gml:coordinates>
      </gml:Box>
      </gml:boundedBy>
    <gml:featureMember>
      <ms:SpoortunnelWFS fid="SpoortunnelWFS.0">
        <gml:boundedBy>
        <gml:Box srsName="EPSG:28992">
        <gml:coordinates>83630.646163,446006.688340
84532.015815,448167.273662</gml:coordinates>
        </gml:Box>
        </gml:boundedBy>
        <ms:msGeometry>
        <gml:Polygon srsName="EPSG:28992">
          <gml:outerBoundaryIs>
            <gml:LinearRing>
              <gml:coordinates>84142.478815,447382.011200
84147.593250,447371.887716 84152.635940,447361
.728420 84154.564082,447357.773911 84157.606746,447351.533580
84162.505308,447341.304028 84167.331415
,447331.039998 84172.084698,447320.742347 84176.765156,447310.411076
84181.372428,447300.047021 84185
.906219,447289.650744 84190.366526,447279.222569 84191.412015,447276.728803
84194.753002,447268.762981
 84194.887697,447268.426815 84199.065272,447258.272852
84203.303255,447247.752497 84207.466884,447237
.202205 84211.405768,447226.566062 84213.088456,447222.089365
84217.177223,447211.510242 84219.508433
,447205.379011 84221.191122,447200.902314 84223.371864,447194.715475
84227.159978,447184.024624 84230
.872276,447173.307543 84238.069100,447151.795658 84244.961132,447130.184023
84254.724243,447097.589567
 84260.847969,447075.747914 84266.660836,447053.826901
84272.938813,447028.688277 84294.383700,446938
.089521 84301.545087,446906.874940 84308.506556,446875.615165
84315.267820,446844.311477 84321.828603
,446812.965159 84328.188638,446781.577494 84334.347662,446750.149768
84341.763370,446710.810838 84357
.198724,446626.219224 84363.237902,446594.835635 84369.404344,446564.497450
84376.098173,446533.249184
 84383.124929,446502.074095 84390.483814,446470.975730
84398.173989,446439.957628 84406.194580,446409
.023317 84414.544676,446378.176318 84419.930390,446358.942840
84427.404262,446333.035436 84432.229537
,446316.758280 84435.746839,446304.769815 84439.206611,446293.802561
84441.870906,446285.205924 84451
.220527,446255.731467 84459.930485,446229.154742 84471.042481,446195.984832
84491.168678,446136.286808
 84511.614961,446075.640707 84532.015815,446015.129356
84507.951406,446006.688340 84494.882880,446045
.451138 84481.784480,446084.302546 84461.338197,446144.948647
84441.212149,446204.648811 84430.103591
,446237.860977 84421.399951,446264.509315 84417.292666,446277.512869
84414.549537,446286.084181 84411
.750719,446295.064430 84411.131404,446297.064468 84402.427951,446325.720731
84393.432709,446356.474728
 84384.766014,446387.322924 84376.428853,446418.261807
84368.422176,446449.287859 84360.746893,446480
.397548 84353.403876,446511.587336 84339.760852,446573.141920
84326.262913,446634.645566 84319.071953
,446665.783942 84306.927138,446715.246326 84296.115584,446756.828877
84280.329807,446816.804095 84272
.399205,446847.832165 84264.667343,446878.910354 84250.022220,446940.231868
84235.762323,447001.599982
 84219.099790,447072.726161 84213.748476,447094.263813
84208.183344,447115.401276 84202.312049,447136
.447914 84196.134043,447157.406545 84189.650518,447178.272691
84182.862825,447199.042184 84175.772651
,447219.710088 84168.381325,447240.272299 84160.690546,447260.724157
84152.701776,447281.061639 84140
.163825,447311.343858 84131.438031,447331.376028 84122.420492,447351.278867
84113.113155,447371.047920
 84108.351579,447380.880753 84103.518129,447390.678737
84098.613367,447400.441142 84093.637539,447410
.167340 84088.590628,447419.857041 84083.473269,447429.509545
84078.285487,447439.124473 84073.027553
,447448.701324 84067.699968,447458.239313 84062.302661,447467.738418
84056.836345,447477.197618 84051
.300888,447486.616847 84045.696405,447495.996115 84040.403244,447504.717574
84034.467772,447514.371502
 84028.913266,447523.295850 84028.692081,447523.659321
84023.100552,447532.566727 84017.262692,447541
.826987 84011.397553,447551.105943 83779.560048,447917.686708
83774.749472,447925.293177 83630.646163
,448153.148895 83654.095295,448167.273662 83654.832483,448166.120523
83661.617337,448155.433990 83668
.063913,448145.246101 83727.292670,448051.593709 83741.997020,448028.343365
83797.907687,447939.936731
 83802.710376,447932.327623 84050.641682,447540.301484
84056.688506,447530.736292 84062.505583,447521
.523865 84068.292075,447512.405915 84068.524289,447511.930323
84074.512459,447502.312567 84080.458976
,447492.663601 84086.349622,447482.981830 84087.451669,447481.154436
84093.265592,447471.422615 84099
.013430,447461.645136 84104.692048,447451.826948 84110.301007,447441.969201
84115.840179,447432.071812
 84121.309335,447422.135366 84126.707980,447412.160639
84132.035893,447402.148200 84137.293007,447392
.098015 84142.478815,447382.011200 </gml:coordinates>
            </gml:LinearRing>
          </gml:outerBoundaryIs>
        </gml:Polygon>
        </ms:msGeometry>
        <ms:Id>0</ms:Id>
        <ms:ET_ID>0</ms:ET_ID>
      </ms:SpoortunnelWFS>
    </gml:featureMember>
</wfs:FeatureCollection>


_____________________________________________________
The init() function as I currently have it. (With the scalebar
commented out, I off course also want this to work in the end.
_____________________________________________________
function init(){
  //OpenLayers.ProxyHost="/cgi-bin/proxy.cgi/?url=";
  //Create a new OpenLayers mapwindow with associated controls
  var map = new OpenLayers.Map('map', {
                projection: "EPSG:28992",
                maxResolution: 1328.125,
                numZoomLevels: 14,
                maxExtent : new
OpenLayers.Bounds(-23500,289000,316500,629000),
                restrictedExtent: new
OpenLayers.Bounds(80000,442000,88000,452000),
                units : "m",
                controls: [
                        new OpenLayers.Control.ZoomToMaxExtent(),
                        new OpenLayers.Control.PanZoomBar({zoomWorldIcon:
true}),
                        new
OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        //new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.MouseDefaults(),
                        new OpenLayers.Control.KeyboardDefaults()
                ]                  
        });

  // Add Spoortunnel Delft Mapserver .map-files
  layer = new OpenLayers.Layer.MapServer( "Topografie",
          "/geoviewerbin/mapserv.exe", {map:
"c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map", layers: "Topografie"} );
  map.addLayer(layer);
//  layer = new OpenLayers.Layer.MapServer( "Spoortunnel",
//          "/geoviewerbin/mapserv.exe", {map:
"c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map", layers: "Spoortunnel"},
//          {isBaseLayer: false, opacity: 0.6} );
//  map.addLayer(layer);
  wfs = new OpenLayers.Layer.WFS(
  "Contour spoortunnel",
 
"/geoviewerbin/mapserv.exe?map=c:/OSGeo4W/apps/geoviewer/maps/spoortunnel.map",
  {typename: 'SpoortunnelWFS'},
  {
    typename: "SpoortunnelWFS",
    extractAttributes: false
  },
  {featureNS: "/geoviewer"}
  );
  //wfs.styleMap = new OpenLayers.StyleMap({strokeColor: "#00ffff"});
  map.addLayer(wfs);
 
  //Add a scalebar to the map
  //scalebar = new OpenLayers.Control.ScaleBar();
  //map.addControl(scalebar);
 
        //Set extents of initial mapview
  var geoviewerExtent=new Array();
    geoviewerExtent[0] = 83600; // x-min
    geoviewerExtent[1] = 446000; // y-min
    geoviewerExtent[2] = 84600; // x-max
    geoviewerExtent[3] = 448200; // y-max
 
 
ZoomToSetExtent(geoviewerExtent[0],geoviewerExtent[1],geoviewerExtent[2],geoviewerExtent[3],map);

  // Add a permanent link to the current view
  //map.addControl(new OpenLayers.Control.Permalink() );
}
function ZoomToSetExtent(Xmin,Ymin,Xmax,Ymax,geoviewermap){
  // Set mapview extents to input parameters
        var extentRatio = (Xmax-Xmin)/(Ymax-Ymin);
  var geoviewerSize = geoviewermap.getSize();
  var sizeRatio = geoviewerSize.w/geoviewerSize.h;
  if (sizeRatio >= extentRatio) {
    var geoviewerResolution = (Ymax-Ymin)/geoviewerSize.h;
    var minX = ((Xmin+Xmax)/2)-(geoviewerResolution*geoviewerSize.w/2);
    var minY = Ymin;
    var maxX = ((Xmin+Xmax)/2)+(geoviewerResolution*geoviewerSize.w/2);
    var maxY = Ymax;
  } else {
    var geoviewerResolution = (Xmax-Xmin)/geoviewerSize.w;
    var minX = Xmin;
    var minY = ((Ymin+Ymax)/2)-(geoviewerResolution*geoviewerSize.h/2);
    var maxX = Xmax;
    var maxY = ((Ymin+Ymax)/2)+(geoviewerResolution*geoviewerSize.h/2);
  };
  // Zoom to set extent
  geoviewermap.zoomToExtent(new OpenLayers.Bounds(minX,minY,maxX,maxY));
}

_____________________________________________________
openlayers_scalebar.js
_____________________________________________________
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for
the
 * full text of the license. */

/**
 * @requires OpenLayers/Control.js
 */

/**
 * Class: OpenLayers.Control.ScaleBar
 * A scale bar styled with CSS.
 *
 * Inherits from:
 *  - <OpenLayers.Control>
 */
OpenLayers.Control.ScaleBar = OpenLayers.Class(OpenLayers.Control, {

    /**
     * Property: element
     * {Element}
     */
    element: null,
   
    /**
     * Property: scale
     * {Float} Scale denominator (1 / X) - set on update
     */    
    scale: 1,

    /**
     * APIProperty: displaySystem
     * {String} Display system for scale bar - metric or english supported.
     *     Default is metric.
     */
    displaySystem: 'metric',

    /**
     * APIProperty: minWidth
     * {Integer} Minimum width of the scale bar in pixels.  Default is 100
px.
     */
    minWidth: 100,

    /**
     * APIProperty: maxWidth
     * Maximum width of the scale bar in pixels.  Default is 200 px.
     */
    maxWidth: 200,

    /**
     * APIProperty: divisions
     * {Integer} Number of major divisions for the scale bar.  Default is 2.
     */
    divisions: 2,

    /**
     * APIProperty: subdivisions
     * {Integer} Number of subdivisions per major division.  Default is 2.
     */
    subdivisions: 2,

    /**
     * APIProperty: showMinorMeasures
     * {Boolean} Show measures for subdivisions.  Default is false.
     */
    showMinorMeasures: false,

    /**
     * APIProperty: abbreviateLabel
     * {Boolean} Show abbreviated measurement unit (ft, km).  Default is
false.
     */
    abbreviateLabel: false,

    /**
     * APIProperty: singleLine
     * {Boolean} Display scale bar length and unit after scale bar.  Default
     *     is false.
     */
    singleLine: false,

    /**
     * APIProperty: align
     * {String} Determines how scale bar will be aligned within the element
-
     * left, center, or right supported
     */
    align: 'left',
   
    /**
     * APIProperty: div
     * {Element} Optional DOM element to become the container for the scale
     *     bar.  If not provided, one will be created.
     */
    div: null,
   
    /**
     * Property: scaleText
     * Text to prefix the scale denominator used as a title for the scale
bar
     *     element.  Default is "scale 1:".
     */
    scaleText: "scale 1:",
   
    /**
     * Property: thousandsSeparator
     * Thousands separator for formatted scale bar measures.  The title
     *     attribute for the scale bar always uses
     *     <OpenLayers.Number.thousandsSeparator> for number formatting.  To
     *     conserve space on measures displayed with markers, the default
     *     thousands separator for formatting is "" (no separator).
     */
    thousandsSeparator: "",

    /**
     * Property: measurementProperties
     * {Object} Holds display units, abbreviations, and conversion to inches
     * (since we're using dpi) per measurement sytem.
     */
    measurementProperties: {
        english: {
            units: ['miles', 'feet', 'inches'],
            abbr: ['mi', 'ft', 'in'],
            inches: [63360, 12, 1]
        },
        metric: {
            units: ['kilometers', 'meters', 'centimeters'],
            abbr: ['km', 'm', 'cm'],
            inches: [39370.07874, 39.370079, 0.393701]
        }
    },

    /**
     * Property: limitedStyle
     * {Boolean} For browsers with limited CSS support, limitedStyle will be
     *     set to true.  In addition, this property can be set to true in
the
     *     options sent to the constructor.  If true scale bar element
offsets
     *     will be determined based on the <defaultStyles> object.
     */
    limitedStyle: false,
   
    /**
     * Property: customStyle
     * {Object} For cases where <limitedStyle> is true, a customStyle
property
     *     can be set on the options sent to the constructor.  The
     *     <defaultStyles> object will be extended with this custom style
     *     object.
     */
    customStyles: null,

    /**
     * Property: defaultStyles
     * {Object} For cases where <limitedStyle> is true, default scale bar
     *     element offsets are taken from this object.  Values correspond to
     *     pixel dimensions given in the stylesheet.
     */
    defaultStyles: {
        Bar: {
            height: 11, top: 12,
            borderLeftWidth: 0,
            borderRightWidth: 0
        },
        BarAlt: {
            height: 11, top: 12,
            borderLeftWidth: 0,
            borderRightWidth: 0
        },
        MarkerMajor: {
            height: 13, width: 13, top: 12,
            borderLeftWidth: 0,
            borderRightWidth: 0
        },
        MarkerMinor: {
            height: 13, width: 13, top: 12,
            borderLeftWidth: 0,
            borderRightWidth: 0
        },
        NumbersBox: {
            height: 13, width: 40, top: 24
        },
        LabelBox: {
            height: 15, top: -2
        },
        LabelBoxSingleLine: {
            height: 15, width: 35, top: 5, left: 10
        }
    },
   
    /**
     * Property: appliedStyles
     * For cases where <limitedStyle> is true, scale bar element offsets
will
     *     be determined based on <defaultStyles> extended with any
     *     <customStyles>.
     */
    appliedStyles: null,

    /**
     * Constructor: OpenLayers.Control.ScaleBar
     * Create a new scale bar instance.
     *
     * Parameters:
     * options - {Object} Optional object whose properties will be set on
this
     *     object.
     */
    initialize: function(options) {
        OpenLayers.Control.prototype.initialize.apply(this, [options]);
        if(!document.styleSheets) {
            this.limitedStyle = true;
        }
        if(this.limitedStyle) {
            this.appliedStyles = OpenLayers.Util.extend({},
this.defaultStyles);
            OpenLayers.Util.extend(this.appliedStyles, this.customStyles);
        }
        // create scalebar DOM elements
        this.element = document.createElement('div');
        this.element.style.position = 'relative';
        this.element.className = this.displayClass + 'Wrapper';
        this.labelContainer = document.createElement('div');
        this.labelContainer.className = this.displayClass + 'Units';
        this.labelContainer.style.position = 'absolute';
        this.graphicsContainer = document.createElement('div');
        this.graphicsContainer.style.position = 'absolute';
        this.graphicsContainer.className = this.displayClass + 'Graphics';
        this.numbersContainer = document.createElement('div');
        this.numbersContainer.style.position = 'absolute';
        this.numbersContainer.className = this.displayClass + 'Numbers';
        this.element.appendChild(this.graphicsContainer);
        this.element.appendChild(this.labelContainer);
        this.element.appendChild(this.numbersContainer);
    },
   
    /**
     * APIMethod: destroy
     * Destroy the control.
     */
    destroy: function() {
        this.map.events.unregister('moveend', this, this.onMoveend);
        this.div.innerHTML = "";
        OpenLayers.Control.prototype.destroy.apply(this);
    },

    /**
     * Method: draw
     */    
    draw: function() {
        OpenLayers.Control.prototype.draw.apply(this, arguments);
        // determine offsets for graphic elements
        this.dxMarkerMajor = (
            this.styleValue('MarkerMajor', 'borderLeftWidth') +
            this.styleValue('MarkerMajor', 'width') +
            this.styleValue('MarkerMajor', 'borderRightWidth')
        ) / 2;
        this.dxMarkerMinor = (
            this.styleValue('MarkerMinor', 'borderLeftWidth') +
            this.styleValue('MarkerMinor', 'width') +
            this.styleValue('MarkerMinor', 'borderRightWidth')
        ) / 2;
        this.dxBar = (
            this.styleValue('Bar', 'borderLeftWidth') +
            this.styleValue('Bar', 'borderRightWidth')
        ) / 2;
        this.dxBarAlt = (
            this.styleValue('BarAlt', 'borderLeftWidth') +
            this.styleValue('BarAlt', 'borderRightWidth')
        ) / 2;
        this.dxNumbersBox = this.styleValue('NumbersBox', 'width') / 2;
        // set scale bar element height
        var classNames = ['Bar', 'BarAlt', 'MarkerMajor', 'MarkerMinor'];
        if(this.singleLine) {
            classNames.push('LabelBoxSingleLine');
        } else {
            classNames.push('NumbersBox', 'LabelBox');
        }
        var vertDisp = 0;
        for(var classIndex = 0; classIndex < classNames.length;
++classIndex) {
            var cls = classNames[classIndex];
            vertDisp = Math.max(
                vertDisp,
                this.styleValue(cls, 'top') + this.styleValue(cls, 'height')
            );
        }
        this.element.style.height = vertDisp + 'px';
        this.xOffsetSingleLine = this.styleValue('LabelBoxSingleLine',
'width') +
                                 this.styleValue('LabelBoxSingleLine',
'left');
       
        this.div.appendChild(this.element);
        this.map.events.register('moveend', this, this.onMoveend);
        this.update();
        return this.div;
    },
   
    /**
     * Method: onMoveend
     * Registered as a listener for "moveend".
     */
    onMoveend: function() {
        this.update();
    },
   
    /**
     * APIMethod: update
     * Update the scale bar after modifying properties.
     *
     * Parameters:
     * scale - {Float} Optional scale denominator.  If not specified, the
     *     map scale will be used.
     */
    update: function(scale) {
        if(this.map.baseLayer == null || !this.map.getScale()) {
            return;
        }
        this.scale = (scale != undefined) ? scale : this.map.getScale();
        // update the element title and width
        this.element.title = this.scaleText +
OpenLayers.Number.format(this.scale);
        this.element.style.width = this.maxWidth + 'px';
        // check each measurement unit in the display system
        var comp = this.getComp();
        // get the value (subdivision length) with the lowest cumulative
score
        this.setSubProps(comp);
        // clean out any old content from containers
        this.labelContainer.innerHTML = "";
        this.graphicsContainer.innerHTML = "";
        this.numbersContainer.innerHTML = "";
        // create all divisions
        var numDiv = this.divisions * this.subdivisions;
        var alignmentOffset = {
            left: 0 + (this.singleLine ? 0 : this.dxNumbersBox),
            center: (this.maxWidth / 2) -
                (numDiv * this.subProps.pixels / 2) -
                (this.singleLine ? this.xOffsetSingleLine / 2 : 0),
            right: this.maxWidth -
                (numDiv *this.subProps.pixels) -
                (this.singleLine ? this.xOffsetSingleLine :
this.dxNumbersBox)
        }
        var xPos, measure, divNum, cls, left;
        for(var di=0; di<this.divisions; ++di) {
            // set xPos and measure to start of division
            xPos = di * this.subdivisions * this.subProps.pixels +
                   alignmentOffset[this.align];
            // add major marker
            this.graphicsContainer.appendChild(this.createElement(
                "MarkerMajor", " ", xPos - this.dxMarkerMajor
            ));
            // add major measure
            if(!this.singleLine) {
                measure = (di == 0) ? 0 :
                    OpenLayers.Number.format(
                        (di * this.subdivisions) * this.subProps.length,
                        this.subProps.dec, this.thousandsSeparator
                    );
                this.numbersContainer.appendChild(this.createElement(
                    "NumbersBox", measure, xPos - this.dxNumbersBox
                ));
            }
            // create all subdivisions
            for(var si=0; si<this.subdivisions; ++si) {
                if((si % 2) == 0) {
                    cls = "Bar";
                    left = xPos - this.dxBar;
                } else {
                    cls = "BarAlt";
                    left = xPos - this.dxBarAlt;
                }
                this.graphicsContainer.appendChild(this.createElement(
                    cls, " ", left, this.subProps.pixels
                ));
                // add minor marker if not the last subdivision
                if(si < this.subdivisions - 1) {
                    // set xPos and measure to end of subdivision
                    divNum = (di * this.subdivisions) + si + 1;
                    xPos = divNum * this.subProps.pixels +
                           alignmentOffset[this.align];
                    this.graphicsContainer.appendChild(this.createElement(
                        "MarkerMinor", " ", xPos - this.dxMarkerMinor
                    ));
                    if(this.showMinorMeasures && !this.singleLine) {
                        // add corresponding measure
                        measure = divNum * this.subProps.length;
                       
this.numbersContainer.appendChild(this.createElement(
                            "NumbersBox", measure, xPos - this.dxNumbersBox
                        ));
                    }
                }
            }
        }
        // set xPos and measure to end of divisions
        xPos = numDiv * this.subProps.pixels;
        xPos += alignmentOffset[this.align];
        // add the final major marker
        this.graphicsContainer.appendChild(this.createElement(
            "MarkerMajor", " ", xPos - this.dxMarkerMajor
        ));
        // add final measure
        measure = OpenLayers.Number.format(
            numDiv * this.subProps.length,
            this.subProps.dec, this.thousandsSeparator
        );
        if(!this.singleLine) {
            this.numbersContainer.appendChild(this.createElement(
                "NumbersBox", measure, xPos - this.dxNumbersBox
            ));
        }
        // add content to the label element
        var labelBox = document.createElement('div');
        labelBox.style.position = 'absolute';
        var labelText;
        if(this.singleLine) {
            labelText = measure;
            labelBox.className = this.displayClass + 'LabelBoxSingleLine';
            labelBox.style.left = Math.round(
                xPos + this.styleValue('LabelBoxSingleLine', 'left')) +
'px';
        } else {
            labelText = '';
            labelBox.className = this.displayClass + 'LabelBox';
            labelBox.style.textAlign = 'center';
            labelBox.style.width = Math.round(numDiv * this.subProps.pixels)
+ 'px'
            labelBox.style.left = Math.round(alignmentOffset[this.align]) +
'px';
            labelBox.style.overflow = 'hidden';
        }
        if(this.abbreviateLabel) {
            labelText += ' ' + this.subProps.abbr;
        } else {
            labelText += ' ' + this.subProps.units;
        }
        labelBox.appendChild(document.createTextNode(labelText));
        this.labelContainer.appendChild(labelBox);
    },
   
    /**
     * Method: createElement
     * Create a scale bar element.  These are absolutely positioned with
     *     hidden overflow and left offset.
     *
     * Parameters:
     * cls - {String} Class name suffix.
     * text - {String} Text for child node.
     * left - {Float} Left offset.
     * width - {Float} Optional width.
     *
     * Returns:
     * {Element} A scale bar element.
     */
    createElement: function(cls, text, left, width) {
        var element = document.createElement("div");
        element.className = this.displayClass + cls;
        OpenLayers.Util.extend(element.style, {
            position: "absolute",
            textAlign: "center",
            overflow: "hidden",
            left: Math.round(left) + "px"
        });
        element.appendChild(document.createTextNode(text));
        if(width) {
            element.style.width = Math.round(width) + "px";
        }
        return element;
    },
   
    /**
     * Method: getComp
     * Get comparison matrix.
     */
    getComp: function() {
        var system = this.measurementProperties[this.displaySystem];
        var numUnits = system.units.length;
        var comp = new Array(numUnits);
        var numDiv = this.divisions * this.subdivisions;
        for(var unitIndex = 0; unitIndex < numUnits; ++unitIndex) {
            comp[unitIndex] = {};
            var ppdu = OpenLayers.DOTS_PER_INCH *
                system.inches[unitIndex] / this.scale;
            var minSDDisplayLength = ((this.minWidth - this.dxNumbersBox) /
                                       ppdu) / numDiv;
            var maxSDDisplayLength = ((this.maxWidth - this.dxNumbersBox) /
                                       ppdu) / numDiv;
            // add up scores for each marker (even if numbers aren't
displayed)
            for(var vi=0; vi<numDiv; ++vi) {
                var minNumber = minSDDisplayLength * (vi + 1);
                var maxNumber = maxSDDisplayLength * (vi + 1);
                var num = this.getHandsomeNumber(minNumber, maxNumber);
                var compNum = {
                    value: (num.value / (vi + 1)),
                    score: 0, tie: 0, dec: 0, displayed: 0
                };
                // tally up scores for all values given this subdivision
length
                for(var vi2=0; vi2<numDiv; ++vi2) {
                    var position = num.value * (vi2 + 1) / (vi + 1);
                    var num2 = this.getHandsomeNumber(position, position);
                    var major = ((vi2 + 1) % this.subdivisions == 0);
                    var last = ((vi2 + 1) == numDiv);
                    if((this.singleLine && last) ||
                       (!this.singleLine && (major ||
this.showMinorMeasures))) {
                        // count scores for displayed marker measurements
                        compNum.score += num2.score;
                        compNum.tie += num2.tie;
                        compNum.dec = Math.max(compNum.dec, num2.dec);
                        compNum.displayed += 1;
                    } else {
                        // count scores for non-displayed marker
measurements
                        compNum.score += num2.score / this.subdivisions;
                        compNum.tie += num2.tie / this.subdivisions;
                    }
                }
                // adjust scores so numbers closer to 1 are preferred for
display
                compNum.score *= (unitIndex + 1) * compNum.tie /
compNum.displayed;
                comp[unitIndex][vi] = compNum;
            }
        }
        return comp;
    },
   
    /**
     * Method: setSubProps
     * Set subdivision properties based on comparison matrix.
     */
    setSubProps: function(comp) {
        var system = this.measurementProperties[this.displaySystem];
        var score = Number.POSITIVE_INFINITY;
        var tie = Number.POSITIVE_INFINITY;
        for(var unitIndex = 0; unitIndex < comp.length; ++unitIndex) {
            var ppdu = OpenLayers.DOTS_PER_INCH *
                system.inches[unitIndex] / this.scale;
            for(var vi in comp[unitIndex]) {
                var compNum = comp[unitIndex][vi];
                if((compNum.score < score) ||
                   ((compNum.score == score) && (compNum.tie < tie))) {
                    this.subProps = {
                        length: compNum.value,
                        pixels: ppdu * compNum.value,
                        units: system.units[unitIndex],
                        abbr: system.abbr[unitIndex],
                        dec: compNum.dec
                    };
                    score = compNum.score;
                    tie = compNum.tie;
                }
            }
        }
    },
   
    /**
     * Method: styleValue
     * Get an integer value associated with a particular selector and key.
     *     Given a stylesheet with .displayClassSomeSelector {border: 2px
solid red},
     *     styleValue('SomeSelector', 'borderWidth') returns 2
     *
     * Returns:
     * {Integer} A value associated with a style selector/key combo.
     */
    styleValue: function(selector, key) {
        var value = 0;
        if(this.limitedStyle) {
            value = this.appliedStyles[selector][key];
        } else {
            selector = "." + this.displayClass + selector;
            rules:
            for(var i = document.styleSheets.length - 1; i >= 0; --i) {
                var sheet = document.styleSheets[i];
                if(!sheet.disabled) {
                    var allRules;
                    try {
                        if(typeof(sheet.cssRules) == 'undefined') {
                            if(typeof(sheet.rules) == 'undefined') {
                                // can't get rules, keep looking
                                continue;
                            } else {
                                allRules = sheet.rules;
                            }
                        } else {
                            allRules = sheet.cssRules;
                        }
                    } catch(err) {
                        continue;
                    }
                    for(var ruleIndex = 0; ruleIndex < allRules.length;
++ruleIndex) {
                        var rule = allRules[ruleIndex];
                        if(rule.selectorText &&
                           (rule.selectorText.toLowerCase() ==
selector.toLowerCase())) {
                            if(rule.style[key] != '') {
                                value = parseInt(rule.style[key]);
                                break rules;
                            }
                        }
                    }
                }
            }
        }
        // if the key was not found, the equivalent value is zero
        return value ? value : 0;
    },

    /**
     * Method: getHandsomeNumber
     * Attempts to generate a nice looking positive number between two other
     *     positive numbers.
     *
     * Parameters:
     * small - {Float} Lower positive bound.
     * big - {Float} Upper positive bound.
     * sigFigs - {Integer} Number of significant figures to consider. 
Default
     *     is 10.
     *
     * Returns:
     * {Object} Object representing a nice looking number.
     */
    getHandsomeNumber: function(small, big, sigFigs) {
        sigFigs = (sigFigs == null) ? 10 : sigFigs;
        // if all else fails, return a small ugly number
        var num = {
            value: small,
            score: Number.POSITIVE_INFINITY,
            tie: Number.POSITIVE_INFINITY,
            dec: 3
        };
        // try the first three comely multiplicands (in order of comliness)
        var cmult, max, dec, tmult, multiplier, score, tie;
        for(var hexp = 0; hexp < 3; ++hexp) {
            cmult = Math.pow(2, (-1 * hexp));
            max = Math.floor(Math.log(big / cmult) / Math.LN10);
            for(var texp = max; texp > (max - sigFigs + 1); --texp) {
                dec = Math.max(hexp - texp, 0);
                tmult = cmult * Math.pow(10, texp);
                // check if there is an integer multiple of tmult
                // between small and big
                if((tmult * Math.floor(big / tmult)) >= small) {
                    // check if small is an integer multiple of tmult
                    if(small % tmult == 0) {
                        multiplier = small / tmult;
                    } else {
                        // smallest integer multiple between small and big
                        multiplier = Math.floor(small / tmult) + 1;
                    }
                    // test against the best (lower == better)
                    score = multiplier + (2 * hexp);
                    tie = (texp < 0) ? (Math.abs(texp) + 1) : texp;
                    if((score < num.score) || ((score == num.score) &&
                       (tie < num.tie))) {
                        num.value = parseFloat((tmult *
multiplier).toFixed(dec));
                        num.score = score;
                        num.tie = tie;
                        num.dec = dec;
                    }
                }
            }
        }
        return num;
    },
   
    CLASS_NAME: "OpenLayers.Control.ScaleBar"
   
});

_____________________________________________________
openlayers_scalebar.css
_____________________________________________________
.olControlScaleBar {
    bottom: 10px;
    left: 10px;
    font-family: sans-serif;
    color: #000;
}

.olControlScaleBarBar {
    height: 1px;
    top: 14px;
    background: #333;
}

.olControlScaleBarBarAlt {
    height: 1px;
    top: 14px;
    background: #333;
}

.olControlScaleBarMarkerMajor {
    height: 7px;
    width: 1px;
    top: 11px;
    background: #333;
}

.olControlScaleBarMarkerMinor {
    height: 5px;
    width: 1px;
    top: 12px;
    background: #333;
}

.olControlScaleBarNumbersBox {
    width: 40px;
    height: 13px;
    top: 21px;
    font-size: 0.7em;
}

.olControlScaleBarLabelBox {
    top: -2px;
    height: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 0.7em;
    font-variant: small-caps;
}

.olControlScaleBarLabelBoxSingleLine {
    height: 15px;
    width: 35px;
    top: 5px;
    left: 10px;
    font-size: 0.7em;
    font-variant: small-caps;
}
-- 
View this message in context: http://n2.nabble.com/WFS-layer-visible-in-IE6-and-IE7%2C-but-not-in-Firefox.-Tried-to-set-up-proxy.-No-succes-yet.-tp3113693p3131506.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.




More information about the Users mailing list