Using PostGIS, GeoServer & OpenLayers for simple web mapping application?

Question

I'm very new to web-mapping and I develop a simple web mapping application for a small city called Berrechid in Morocco has a latitude 4099485 and longitude -14.2884 in Google Maps...

For that I already created 12 layers with GeoServer using the projection EPSG:26191 and it's work fine the problem is when I want to display my data on OSM map (or Google Maps... etc.) the data is to small and the zoom is focused always in center of Africa not on the my city !!!

Here is my code:

var extents = new OpenLayers.Bounds(293,460.544281415, 294,831.25, 299,954.8125,304,268.46875); 
   var map = new OpenLayers.Map("map", {
controls: [
new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.ArgParser(),
        new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('dropdown-content')}),
        new OpenLayers.Control.MousePosition(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.KeyboardDefaults()
    ],
maxExtent: extents,
    minExtent: "auto",
    restrictedExtent: extents
},
    {projection: new OpenLayers.Projection("EPSG:26191")},
    {units: 'm'},
    {allOverlays: true} 
    );

var OSM = new OpenLayers.Layer.OSM("OpenStreetMap");

 var geoportail_lyrs = new OpenLayers.Layer.WMS (
        "Geoportail Lyrs",
        "http://localhost:8080/geoserver/geoportail/wms",
        {layers:"geoportail:geoportail_lyrs",transparent: true, format: "image/gif"},
        {visibility: true},
        {'displayInLayerSwitcher':true}
);

map.addLayers([OSM,geoportail_lyrs]);

map.setCenter(new OpenLayers.LonLat(4099485, -14.2884),11);

here is the result :

I don't know why it's always focusing on Sao Tome and my data is too small.

Answer 1

There are a number of issues with your code:

1. Your bounding box coordinates are badly formatted - var extents = new OpenLayers.Bounds(293,460.544281415, 294,831.25, 299,954.8125,304,268.46875); should not have commas in the numbers it will confuse OpenLayers.

2. Your map projection will be changed to EPSG:3857 (Web Mercator) when you add the OpenStreetMap layer. So you will need to reproject your bounds and centre point from 26191 to 3857.

3. map.setCenter(new OpenLayers.LonLat(4099485, -14.2884),11); is mixing metres and degrees in one point and neither of them will be right as I said in point 2.