[OpenLayers-Users] Scalebar not visible

Andreas Hocevar ahocevar at opengeo.org
Fri Jun 19 06:00:21 EDT 2009


Hi,

usually when you do not get a reply to a question within a day, then
there is probably information missing that would allow for quick
examination of the problem. So just re-posting the same question may
not be the best way to get a reply.

In this specific case, we know that you are using the hosted version
of the OpenLayers API, but we have no idea what hides behind your
openlayers_scalebar.js and css/scalebar.css.

Anyway, a quick glance at your code shows me that the units property
of the map should not be "meters", but "m". Maybe changing this will
get you somewhere.

Also, if you use a single file build of OpenLayers, you should also
add the theme/default/style.css stylesheet to your webpage.

Regards,
Andreas.

On Fri, Jun 19, 2009 at 11:07 AM, sendeman<martijnsendenspam at gmail.com> wrote:
>
> Hi again,
>
> I'm still struggling with the scalebar problem I described earlier (see
> below). Does anyone see an error in the code I posted? Do I need to provide
> additional information? Please let me know if I need to give more input.
>
> Thanks again in advance!
>
> Best regards,
> Martijn Senden.
>
>
> sendeman wrote:
>>
>> Hi All,
>>
>> Does anyone have a solution for the problem I described earlier (see
>> below)? I haven't been able to tackle it yet. Thanks a lot in advance!
>>
>> Best regards,
>> Martijn Senden.
>>
>>
>> sendeman wrote:
>>>
>>> Hi all!
>>>
>>> I'm trying to add a scalebar to my mapserver + openlayers webapp. I tried
>>> implementing
>>> http://dev.openlayers.org/addins/scalebar/trunk/examples/scalebar.html
>>> the online example  into my own page, but until now, I haven't succeeded.
>>> I used firebug to see the generated source and the javascript does add
>>> divs for the scalebar, I just don't see it anywhere. I have made no
>>> changes to the css or javascript, just changed the location and filename.
>>> The src values of the scripts and href of the linked stylesheet are
>>> correct.
>>>
>>> I added the code I used below.
>>>
>>> Does anyone see what's going wrong? Because I don't. :-)
>>>
>>> Thanks in advance, any help will be greatly appreciated!
>>>
>>> Best regards,
>>> Martijn Senden.
>>>
>>> _________________________________________________________________
>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
>>> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
>>> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
>>> <title>Untitled</title>
>>> <style type="text/css">
>>> body,
>>> html {
>>>      overflow: hidden;
>>>      height: 100%;
>>> }
>>> #map {
>>>      position: absolute;
>>>      z-index:1;
>>>      top: 100px;
>>>      bottom: 50px;
>>>      left: 0;
>>>      width: 70%;
>>>      /* height:80%; */
>>>      border: 1px solid black;
>>>      background: red;
>>> }
>>> #scalebar {
>>>   position: absolute;
>>>   right: 0;
>>>   bottom: 50px;
>>>   width: 25%;
>>>   height: 200px;
>>>   border: 1px solid #000;
>>> }
>>> </style>
>>> <!--[if lte IE 8]>
>>> <style type="text/css">
>>> #map {
>>>      bottom: auto;
>>>      height: expression(document.documentElement.clientHeight - 150 +"px");
>>> }
>>> </style>
>>> <![endif]-->
>>> <script type="text/javascript"
>>> src="http://openlayers.org/api/OpenLayers.js"></script>
>>> <script type="text/javascript"
>>> src="javascript/openlayers_scalebar.js"></script>
>>> <link href="css/scalebar.css" rel="stylesheet" type="text/css"
>>> media="screen">
>>> <script type="text/javascript">
>>> function init(){
>>>   //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 : "meters",
>>>              controls: [
>>>                      new OpenLayers.Control.ZoomToMaxExtent(),
>>>                      new OpenLayers.Control.PanZoomBar({zoomWorldIcon: true}),
>>>                      new OpenLayers.Control.LayerSwitcher({'ascending':false}),
>>>                      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);
>>>
>>>   //Add a scalebar to the map
>>>   scalebar = new OpenLayers.Control.ScaleBar();
>>>   map.addControl(scalebar);
>>>
>>>   map.zoomToExtent(new OpenLayers.Bounds(83600,446000,84600,448200));
>>> }
>>> window.onload=init;
>>> </script>
>>> </head><body>
>>>
>>> <div id="map"></div>
>>> </body></html>
>>>
>>
>>
>
> --
> View this message in context: http://n2.nabble.com/Scalebar-not-visible-tp3086564p3118597.html
> Sent from the OpenLayers Users mailing list archive at Nabble.com.
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>



-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.



More information about the Users mailing list