Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Mapa com osm e ruas</title>
        <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
        <style>
            #map-id {
                width: 1024px;
                height: 512px;
            }
        </style>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
        <h1>My Map</h1>
        <div id="map-id"></div>
        <script>

            var mercator = new OpenLayers.Projection("EPSG:900913");
            var extend = new OpenLayers.Bounds(-789032.43216791,4977612.1650746,-784140.46235833,4980058.1499794)

            var opcoes = {
            maxExtent: extend,
            <!--restrictExtent: extend,-->
            units: 'm',
            projection: mercator,};

            var map = new OpenLayers.Map("map-id");

            <!--var ruas = new OpenLayers.Layer.WMS( 'Ruas', 'http://localhost:8080/geoserver/it.geosolutions/wms', {layers: 'it.geosolutions:ruas'},{isBaseLayer: false});-->


            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);

            var ruas = new OpenLayers.Layer.WMS(
            'ruas',
            'http://localhost:8080/geoserver/it.geosolutions/wms',
            {layers: 'it.geosolutions:ruas_test',
            styles: 'line',
            srs: 'EPSG:900913',
            format: 'image/png',
            transparent: true
            },{isBaseLayer: false});


            map.addLayer(ruas);


            map.zoomToExtent(extend);


            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.ScaleLine());
            map.addControl(new OpenLayers.Control.OverviewMap());


        </script>
    </body>
</html>