[OpenLayers-Users] Problem showing OpenLayer controls in a page
with a DOCTYPE
Ignacio Talavera
ignacio.talavera at gmail.com
Mon Mar 23 13:58:47 EDT 2009
Hi In your code you didn't load the stylesheet containing the class smallmap
,so you have to load the file styles.css located in the examples directory
of OL, or add the following line:
<style type="text/css">
.smallmap {
width: 600px;
height: 300px;
border: 1px solid #ccc;
}
</style>
I had the same problem (but using xhtml and JSF) and I fixed changing the
style of the div map,
I'm using smallmap and work properly
But it doesn't work with this other
.other{
width:60%;
height: 60%;
border: 1px solid black;
}
Regards
Nacho
PD: Try to use firebug to check if the stylesheet is loaded properly
On Tue, Mar 17, 2009 at 10:52 AM, sun761980 <sun761980 at hotmail.com> wrote:
>
> Hi
>
> I am using Visual Studio 2005 and I am also facing a similar problem.
>
> I just used the sample EXAMPLE1.htm file into a aspx code. When i remove
> this DOCTYPE i see the map component with zoomin and zoom out icon. When i
> add this, the map component does not appear.
>
> Below is the code
>
> <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
> Inherits="_Default" %>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml" >
>
> <head runat="server">
> <title>Integrating OpenLayers in .NET</title>
> <script src="OpenLayers.js"></script>
> <script type="text/javascript">
>
>
> //alert("Open Layer Method");
> // making this a global variable so that it is accessible for
> // debugging/inspecting in Firebug
> var map = null;
>
> function init(){
>
> map = new OpenLayers.Map('map');
> //alert(map.id);
> //alert(map.innerText);
>
> var ol_wms = new OpenLayers.Layer.WMS(
> "OpenLayers WMS",
> "http://labs.metacarta.com/wms/vmap0",
> {layers: 'basic'}
> );
>
> var jpl_wms = new OpenLayers.Layer.WMS(
> "NASA Global Mosaic",
> "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
> {layers: "landsat7"}
> );
>
> var dm_wms = new OpenLayers.Layer.WMS(
> "DM Solutions Demo",
> "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
> {
> layers: "bathymetry,land_fn,park,drain_fn,drainage," +
> "prov_bound,fedlimit,rail,road,popplace",
> transparent: "true", format: "image/png"},
> {
> minResolution: 0.17578125,
> maxResolution: 0.703125
> }
> );
>
> map.addLayers([ol_wms, jpl_wms, dm_wms]);
> map.addControl(new OpenLayers.Control.LayerSwitcher());
> map.zoomToMaxExtent();
> }
>
>
> </script>
> </head>
>
> <body onload="init()">
> <h1 id="title">OpenLayers Example</h1>
> <div id="tags"></div>
> <p id="shortdesc">
> Demonstrate a simple map with an overlay that includes layer
> switching controls.
> </p>
> <div id="map" class="smallmap"></div>
> <div id="docs"></div>
> </body>
> </html>
>
> Regards
> Sunny
>
>
>
>
> vsaquicela wrote:
> >
> > I don't understand.
> > How????
> >
> >
> > Ruben Pardo-2 wrote:
> >>
> >> Hi everybody,
> >> i solve the problem, it seems to be a wrong path in the images
> directory.
> >> Thanks a lot .
> >>
> >> Rubén P.
> >>
> >> 2007/6/28, Christian López Espínola <penyaskito at gmail.com>:
> >>>
> >>> I can't reproduce the bug with a example.
> >>> What browser are you using? Do the problem occurs in other browsers?
> >>> I can add that in my application i'm using XHTML Strict, but I think
> >>> that using HTML 4 mustn't be a problem.
> >>>
> >>> Cheers from the hot Seville :)
> >>>
> >>>
> >>> On 6/28/07, Ruben Pardo <correosig at gmail.com> wrote:
> >>> > Hi,
> >>> >
> >>> > I'm checking my html source generated but it doesn't work. I'm using
> >>> > OpenLayers 2.4 API, and still have the same problem. When i remove
> the
> >>> tag
> >>> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
> >>> > http://www.w3.org/TR/html4/loose.dtd" > it works fine.
> >>> >
> >>> > My code :...........
> >>> >
> >>> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
> >>> > http://www.w3.org/TR/html4/loose.dtd" >
> >>> > <html >
> >>> > <head>
> >>> > <meta content="text/html;charset=ISO-8859-1"
> >>> > http-equiv="Content-Type">
> >>> > </head>
> >>> > <body onload="init();" >
> >>> >
> >>> > <style type="text/css">
> >>> > #map {
> >>> > width: 800px;
> >>> > height: 500px;
> >>> > border: 1px solid black;
> >>> > }
> >>> > </style><script src="js/lib/OpenLayers.js"
> >>> > type="text/javascript"></script> <script
> >>> > type="text/javascript" >
> >>> > <!--
> >>> > var map,layer;
> >>> >
> >>> > function init(){
> >>> >
> >>> > map = new OpenLayers.Map('map', { controls: [],tileSize:
> >>> new
> >>> > OpenLayers.Size(500,500) });
> >>> > layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS","
> >>> >
> >>>
> http://192.168.212.20:84/cgi-bin/mapserv.exe?map=/ms4w/apps/prbmosaico/htdocs/prbmosaico.map
> >>> ",{layers:
> >>> > 'PARCELASDE', TRANSPARENT: 'true'},{ maxExtent: new
> >>> > OpenLayers.Bounds(186555.49,4136068.22,211516.81,4156763.12),
> >>> maxResolution:
> >>> > 104} );
> >>> >
> >>> > map.addControl(new OpenLayers.Control.PanZoomBar());
> >>> > map.addControl(new OpenLayers.Control.MouseToolbar ());
> >>> > map.addControl(new OpenLayers.Control.OverviewMap());
> >>> >
> >>> > map.addLayer(layer);
> >>> > if (!map.getCenter())
> >>> > map.zoomToMaxExtent();
> >>> >
> >>> >
> >>> > }
> >>> > </script>
> >>> >
> >>> > <div style="margin:0px" id="map"></div>
> >>> > </body>
> >>> >
> >>> >
> >>> >
> >>> >
> >>> >
> >>> > 2007/6/28, Christian López Espínola < penyaskito at gmail.com>:
> >>> > > Hola Ruben,
> >>> > >
> >>> > > The doctype mustn't be a problem with OpenLayers. I'm using
> ASP.NET
> >>> > > with OpenLayers and I hadn't any problem.
> >>> > > Please check the HTML source generated by your application and if
> >>> you
> >>> > > can't find the solution, post a piece.
> >>> > >
> >>> > > Hope this helps
> >>> > >
> >>> > > On 6/28/07, Ruben Pardo <correosig at gmail.com> wrote:
> >>> > > > Hi everybody,
> >>> > > >
> >>> > > > I've got a problem showing controls with OpenLayers when i put a
> >>> > doctype on
> >>> > > > my html page.
> >>> > > > I'm integrating OpenLayers in a custom jsf component, that
> >>> autogenerate
> >>> > the
> >>> > > > DOCTYPE.
> >>> > > > It shows me the layers, but not the controls over the layers
> >>> > (PanZoomBar,
> >>> > > > Overview, etc...)
> >>> > > > It works fine when i remove the doctype in the generated code.
> >>> > > > ¿how can i solve this?
> >>> > > >
> >>> > > > Thanks a lot in advance
> >>> > > >
> >>> > > > My generated code is ...
> >>> > > >
> >>> > > >
> >>> > ------------------------------------------------------------------
> >>> > > >
> >>> > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> >>> > > > "http://www.w3.org/TR/html4/loose.dtd" >-->
> >>> > > > <html >
> >>> > > > <head>
> >>> > > > <meta content="text/html;charset=ISO-8859-1"
> >>> > > > http-equiv="Content-Type">
> >>> > > > </head><body onload="init();">
> >>> > > > <style type="text/css">
> >>> > > > #map {
> >>> > > > width: 800px;
> >>> > > > height: 500px;
> >>> > > > border: 1px solid black;
> >>> > > > }
> >>> > > > </style><script src="js/lib/OpenLayers.js"
> >>> > > > type="text/javascript"></script> <script
> >>> > > > type="text/javascript" >
> >>> > > > <!--
> >>> > > > var map,layer;
> >>> > > >
> >>> > > > function init(){
> >>> > > >
> >>> > > > map = new OpenLayers.Map('map', { controls:
> >>> [],tileSize:
> >>> new
> >>> > > > OpenLayers.Size(500,500) });
> >>> > > > layer = new OpenLayers.Layer.MapServer( "OpenLayers
> >>> > > > WMS","
> >>> >
> >>>
> http://192.168.212.20:84/cgi-bin/mapserv.exe?map=/ms4w/apps/prbmosaico/htdocs/prbmosaico.map
> >>> > > > ",{layers: 'PARCELASDE', TRANSPARENT: 'true'},{ maxExtent: new
> >>> > > > OpenLayers.Bounds(186555.49,4136068.22,211516.81,4156763.12),
> >>> > maxResolution:
> >>> > > > 104} );
> >>> > > >
> >>> > > > map.addControl(new OpenLayers.Control.PanZoomBar());
> >>> > > > map.addControl(new OpenLayers.Control.MouseToolbar
> ());
> >>> > > > map.addControl(new OpenLayers.Control.OverviewMap());
> >>> > > >
> >>> > > > map.addLayer(layer);
> >>> > > > if (!map.getCenter())
> >>> > > > map.zoomToMaxExtent ();
> >>> > > >
> >>> > > >
> >>> > > > } //-->
> >>> > > > </script>
> >>> > > >
> >>> > > >
> >>> > > > <div id="map"></div>
> >>> > > > </body>
> >>> > > >
> >>> >
> >>>
> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
> >>> > > >
> >>> > > > _______________________________________________
> >>> > > > Users mailing list
> >>> > > > Users at openlayers.org
> >>> > > > http://openlayers.org/mailman/listinfo/users
> >>> > > >
> >>> > > >
> >>> > >
> >>> > >
> >>> > > --
> >>> > > Regards,
> >>> > >
> >>> > > Christian López Espínola
> >>> > >
> >>> >
> >>> >
> >>>
> >>>
> >>> --
> >>> Regards,
> >>>
> >>> Christian López Espínola
> >>>
> >>
> >> _______________________________________________
> >> Users mailing list
> >> Users at openlayers.org
> >> http://openlayers.org/mailman/listinfo/users
> >>
> >>
> >
> >
>
> --
> View this message in context:
> http://n2.nabble.com/Problem-showing-OpenLayer-controls-in-a-page-with-a-DOCTYPE-tp1827971p2491480.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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090323/dcd0cb5e/attachment.html
More information about the Users
mailing list