[GIS] Multiple Maps with Styles not working in OpenLayers

openlayers-2stylesymbologyvector

I have created 2 maps(within 2 in a same page) along with their respective style maps.

Both maps are having vector layers along with "LineString" geometry… added into them.

Both style maps are having common "label" symbolizer.

The issue is this that "label" symbolizer of map2 is getting added into the vector layer of

map1 rather than vector layer of map2.

Code:

mainHtml.html

Following are my 2 divs:

Following is the function which is rendering 2 different maps in above div :

function createMapForDiv1()
{
boundsForPatternMapImage = new OpenLayers.Bounds();
boundsForPatternMapImage.extend(new OpenLayers.LonLat(-180,-90));
boundsForPatternMapImage.extend(new OpenLayers.LonLat(180,90));

styleForFeature1 = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style(null, {
rules: [new OpenLayers.Rule({symbolizer: 
{
fillColor:"red", 
fillOpacity: 1,
label:  '$'+'{myLabel1}',
pointRadius: 2.5, 
pointerEvents: "visiblePainted",
graphicName:"x",
backgroundGraphic: "public/images/dot_cross_select.png",
backgroundHeight:10,
backgroundWidth:10,   
backgroundYOffset:-6, 
backgroundXOffset:-5, 
labelAlign : "rm",
labelXOffset : "24",
labelYOffset : "0"                            
}
})
}


optionsForMap1 = {         
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
numZoomLevels: ${zoomScale},    
controls: [
new OpenLayers.Control.Attribution()
]};

map1 = new OpenLayers.Map('divForMap1', optionsForPatternMap);

vectorLayer1ForMap1= new OpenLayers.Layer.Vector("Vector Layer",{styleMap:          styleForFeature1});

map1.addLayer(vectorLayer1ForMap1);



***//Following bounds,styles and layers are for "map2"***

  boundsForMap2 = new OpenLayers.Bounds();
  boundsForMap2 .extend(new OpenLayers.LonLat(-180,-90));
  boundsForMap2 .extend(new OpenLayers.LonLat(180,90));


  styleMapForMap2 = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style(null, {
            rules: [                                     
                        new OpenLayers.Rule({
                            symbolizer: {
                                 label: '$'+'{myLabel2}',
                                 strokeColor: "rgb(120,120,120)", 
                                 strokeWidth: 1.5,                   
                                 fontFamily: "Calibri", 
                                 fontSize: "10px", 
                                 fontColor: "black",
                                 fontWeight: "bold",
                                 labelAlign : "rm",
                                 labelXOffset : "-10",
                                 labelYOffset : "-10",
                   }                             
                        })]

                })        

            });

 vectorLayerForMap2= new OpenLayers.Layer.Vector("Vector Layer",{styleMap:   styleMapForMap2 }); 

optionsMap2 = {
                         minResolution: "auto",  
                         minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),  
                         maxResolution: "auto",    
                         maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),   
                         tileSize: new OpenLayers.Size(200,200),                                     
                         controls: []    
                 };

                map2 = new OpenLayers.Map('divForMap2', optionsMap2);

Now problem here is this that "myLabel2" defined in "styleMapForMap2" is getting added into

"vectorLayer1ForMap1" (I saw this while debugging in IE 8) and because of that "myLabel2"

is not appearing there where it is suppose to be.

Could anyone please help in this?

Thanks

Best Answer

I can not say concrete things owing to not seeing the code but the fundamental thing is that if you add your feature to other vector map, it naturally takes added vector map style. maybe the best solution is that check out them with firebug...

here, there is an example, if it works for you - Styling and Labeling Vector Layers in OpenLayers and here.

and beside this adding rule based styles, maybe make your needs easily.

an example:

var style = new OpenLayers.Style();
var rule_fsa = new OpenLayers.Rule({
symbolizer: {
fillColor: "#ff9a9a",
fillOpacity: 0.5,
strokeColor: "#000000",
strokeWidth: 1,
strokeDashstyle: "dash",
label: "${FSA}",
labelAlign: "cc",
fontColor: "#333333",
fontOpacity: 0.9,
fontFamily: "Arial",
fontSize: 14}
});
style.addRules([rule_fsa]);

if you can share your code, we will help you better.

UPDATE:

try to use sth like this, dont add another OpenLayers.StyleMap method :

vectorLayer1ForMap1= new OpenLayers.Layer.Vector("Vector Layer",{
styleMap: new OpenLayers.StyleMap({
'default': { 
fillColor:"red", 
fillOpacity: 1,
label:  '$'+'{myLabel1}',
pointRadius: 2.5, 
pointerEvents: "visiblePainted",
graphicName:"x",
backgroundGraphic: "public/images/dot_cross_select.png",
backgroundHeight:10,
backgroundWidth:10,   
backgroundYOffset:-6, 
backgroundXOffset:-5, 
labelAlign : "rm",
labelXOffset : "24",
labelYOffset : "0" 
}
})
});

and do second style to as i do... if dont work again try to use:

OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

i hope it helps you...

Related Question