Viewing vector overlay in an OpenLayers Map

Question

I am new to creating maps using HTML and I have been attempting to add two vector layers (places, points) to a base map (roads), however I cannot see the vector layers on the map. The layers should appear as vector overlays to the base map. The layers are there as they are being shown in the layer switcher, but are not being displayed on screen. I believe the problem is to do with the way the vectors layers are being called. What is the solution to get the vector layers to be displayed. Thanks

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

    var roads= new OpenLayers.Layer.WMS(
    "roads",
    "http://localhost:8080/geoserver/wms",
    {layers: "roads"});

var points= new OpenLayers.Layer.Vector(
    "points",
    "http://localhost:8080/geoserver/wms",
    {layers: "points"});

var places= new OpenLayers.Layer.Vector(
    "places",
    "http://localhost:8080/geoserver/wms",
    {layers: "places"});

map.addLayer(roads);
map.addLayer(points);
map.addLayer(places);
map.addControl(new OpenLayers.Control.LayerSwitcher());

Answer 1

You are trying to display your vector data through WMS protocol. For this purpose you should use OpenLayers.Layer.WMS instances instead OpenLayers.Layer.Vector. For displaying WMS layer as overlay use isBaseLayer option:

map = new OpenLayers.Map('map'); 
var places = new OpenLayers.Layer.WMS('places',
  "http://localhost:8080/geoserver/wms",
  {layers: "places", transparent: true},
  {isBaseLayer: false, opacity: 1, singleTile: true, visibility: true}
);
map.addLayers([places]);