I tryed context functions to change the offsets of the points (by dividing
bikes and docks to 2 features) but unfortunately after bike's style applied
then when docks style gets applied bike's style also changes. Might be a bug
because of me, I could came to this position lastly, maybe you can see the
error here, couldn't have time to recheck:
//Stations layer
var stations = []; // my data of stations i want in a vector layer
var station1 = {
position:new OpenLayers.Geometry.Point(-5000000,0),
data: {
bikes: 8,
docks: 20
}
}
var station2 = {
position:new OpenLayers.Geometry.Point(500000,4000000),
data: {
bikes: 2,
docks: 10
}
}
stations.push(station1);
stations.push(station2);
var resultVectors=[];
var tempData=[];
for(var i=0;i<stations.length;i++){
//here we create new point features for each type
//for bike points
tempData.bikes=stations[i].data.bikes;
resultVectors.push(new OpenLayers.Feature.Vector(stations[i].position,
tempData));
tempData=[];
tempData.docks=stations[i].data.docks
resultVectors.push(new OpenLayers.Feature.Vector(stations[i].position,
tempData));
tempData=[];
}
//how to define a custom style to display BOTH labels of stations datas
(bikes and docks) one on top, one on bottom of the green circle centered to
the station position?
var context = {
label : function(station){
// docks or bikes , how ?
if(typeof station.data.bikes!='undefined')
return "bikes:"+station.data.bikes ;
else if(typeof station.data.docks!='undefined')
return "docs:"+station.data.docks;
} ,
yOffset : function(station){
// - for docks, + for bikes , how ?
if(typeof station.data.bikes!='undefined')
return 100;
else if(typeof station.data.docks!='undefined')
return 0;
},
grap : function(station){
// - for docks, + for bikes , how ?
if(typeof station.data.bikes!='undefined')
return
'http://www.inflatable-watertoy.com/photo/pm818499-lovely_durable_pvc_inflatable_beach_balls_with_smiling_face_to_play_in_the_water_pool.jpg'
;
else if(typeof station.data.docks!='undefined')
return
'http://www.gettyicons.com/free-icons/123/onebit-3/png/48/sad_face_48.png';
}
}
var style = new OpenLayers.Style({
pointRadius : 15,
fillColor: '#32cd32',
label: '${label}',
graphicYOffset: "${yOffset}",
externalGraphic: "${grap}"
},{
context:{
label : function(station){
// docks or bikes , how ?
if(typeof station.data.bikes!='undefined')
return "bikes:"+station.data.bikes ;
else if(typeof station.data.docks!='undefined')
return "docs:"+station.data.docks;
} ,
yOffset : function(station){
// - for docks, + for bikes , how ?
if(typeof station.data.bikes!='undefined')
return 100;
else if(typeof station.data.docks!='undefined')
return 0;
},
grap : function(station){
if(typeof station.data.bikes!='undefined')
return
'http://www.inflatable-watertoy.com/photo/pm818499-lovely_durable_pvc_inflatable_beach_balls_with_smiling_face_to_play_in_the_water_pool.jpg'
;
else if(typeof station.data.docks!='undefined')
return
'http://www.gettyicons.com/free-icons/123/onebit-3/png/48/sad_face_48.png';
}
}
});
var stationsLayer = new OpenLayers.Layer.Vector('Stations' , {styleMap :new
OpenLayers.StyleMap(style)} );
//stationsLayer.addFeatures(stations);
stationsLayer.addFeatures(resultVectors);
var map = new OpenLayers.Map({
div: "map",
center : [0,0],
zoom:2,
layers: [new OpenLayers.Layer.OSM(),stationsLayer ],
controls:[new OpenLayers.Control.Navigation(),new
OpenLayers.Control.LayerSwitcher()]
});
--
View this message in context:
http://osgeo-org.1560.n6.nabble.com/Vector-layer-and-multiple-symbolizers-tp5032127p5032993.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users
