2

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

1

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...

  • thanks Aragon for your help but it's not helping me much...perhaps because I have not shared code hence sharing it now...please see my original question I have edited it with the code. – G.S.Tomar May 29 '12 at 11:00
  • i have updated my answer..check out now.. – Aragon May 29 '12 at 11:23
  • @G.S.Tomar says: UPDATE AFTER FOLLOWING SUGGESTION: - When I followed your suggestion "vectorLayerOfMap1" is floating over "map2" :) – Aragon May 29 '12 at 14:28
  • check out this jsfiddle which i make for you. and it works... – Aragon May 29 '12 at 14:29
0

real isse was this that if we are having multiple maps along with vector layers and point features then internal id of point features(which is auto generated by OpenLayers) collides...so we have to make sure in such scenarios that we provide "custom ids" to the point features...thanks Aragon for helping me in and apology for responding so late :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.