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