I have a OpenLayers project where I am producing a map and a dynamically loaded KML. this all works as expected. how ever my place markers (different things a hunter has shot or seen) are all on top of each other and you can't read the Labels.
what I am trying to achieve is clustering that re-renders as you zoom in and out, but clusters the points but NOT the lineString showing the hunter where he has been.
I am new to javascript (2 months) and this I can't find a solution for anywhere on the web.
here is my code,
map = new OpenLayers.Map("map");
//var layer= new OpenLayers.Layer.OSM();
var layer = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
layer.wrapDateLine=false;
map.addLayer(layer);
myStyles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "#00ffff",
strokeWidth:4,
strokeOpacity:1,
fillColor:"#003333",
fillOpacity: 1,
labelYOffset: 15,
pointRadius: 5,
label:"${label}",
fontColor:"#ff0000",
context: {
getLabel: function(f) {
if(f.attributes.label===""){
return "here"; }
return f.attributes.label;
}
}
})
})
var clusterStyle = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "#00ffff",
strokeWidth:5,
strokeOpacity:1,
fillColor:"#003399",
fillOpacity: 1,
// externalGraphic: "icons/redcircle.png",
labelYOffset: 15,
pointRadius: 5,
label:"${label}",
fontColor:"#ff0000",
context: {
getLabel: function(f) {
var label="init";
if(f.cluster[0].attributes.label!=" "){
label=" "+f.cluster.getClusterCount+" "+f.cluster[0].attributes.label;}
return label;
}
}
})
})
kmlLayer = new OpenLayers.Layer.Vector("Trip", {
styleMap: myStyles,
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
// new OpenLayers.Strategy.Cluster()], //causing the problem
protocol: new OpenLayers.Protocol.HTTP({
params:{ tripid:tripid},
url: "kml2.php",
readWithPOST:true,
//{userid:userid,tripid:tripid},
format: new OpenLayers.Format.KML({
// extractStyles: true,
extractAttributes: true
})
})
});
map.addLayer(kmlLayer);
var clat=(parseFloat(minlat)+parseFloat(maxlat))/2;
var clon=(parseFloat(minlon)+parseFloat(maxlon))/2;
var lonlat = new OpenLayers.LonLat(clon,clat).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
map.setCenter(lonlat);
map.zoomTo(15);