Vector Layer not visible in openlayers

Question

I'm trying to create a map where I have one wms layer and then a vector layer which is created from a kml file - held in the same directory as the web page.

I'm trying to implement the cluster strategy but to no avail. I think I might me going wrong even before the cluster strategy kick is in as I can't see the vector layer at all when I remove the wms layer?

This is the code for the vector layer:

var map;

function init() {
   map = new OpenLayers.Map('map_element', {});
   var wms = new OpenLayers.Layer.WMS(
    'WMS Layer Title',
    'http://vmap0.tiles.osgeo.org/wms/vmap0',
    {layers: 'basic'},
    {}
);

var masts = new OpenLayers.Layer.Vector("Masts", {
projection: displayProjection //EPSG:4326,
protocol: new OpenLayers.Protocol.HTTP({
url: "masts.kml",
format: new OpenLayers.Format.KML({
        extractStyles: true, 
        extractAttributes: true
        })
}),
strategies: [
new OpenLayers.Strategy.BBOX(),
new OpenLayers.Strategy.Cluster()
],

styleMap: new OpenLayers.StyleMap({
"default": {
        fillColor: "#8aeeef",
        strokeColor: "#32a8a9"
        }
     })
});

var StaffTravel = new OpenLayers.Layer.Vector("StaffTravel", {
protocol: new OpenLayers.Protocol.HTTP({
    url: "staff.kml",
    format: new OpenLayers.Format.KML()
}),
strategies: [
    new OpenLayers.Strategy.Fixed(),
    new OpenLayers.Strategy.Cluster({distance: 15, threshold: 3})
]
});

map.addLayers([StaffTravel]); 

Any ideas where I might be going wrong?

Answer 1

can you check out from console when adding my code to your app if your kml file is loaded or not? beside this you should glance at this example here and here.

var StaffTravel = new OpenLayers.Layer.Vector("StaffTravel", {
projection: displayProjection //EPSG:4326,
protocol: new OpenLayers.Protocol.HTTP({
    url: "staff.kml",
    format: new OpenLayers.Format.KML({
                extractStyles: true, 
                extractAttributes: true
                })
}),
strategies: [
    new OpenLayers.Strategy.BBOX(),
    new OpenLayers.Strategy.Cluster()
],

styleMap: new OpenLayers.StyleMap({
    "default": {
                fillColor: "#8aeeef",
                strokeColor: "#32a8a9"
                }
                    })
});

map.addLayers([StaffTravel]);

i hope it helps you...