Let's Go Outside


Is there anyway to change the index of ShapeLayers I'm doing different searches and setting pins into their respective ShapeLayers, and need be able to move a layer to the front or back.




Re: Move ShapeLayer to back/front

Let's Go Outside


Anyone




Re: Move ShapeLayer to back/front

Derek Chan

The only undocumented property that resembles what you are looking for is the VEShapeLayer._index property. When its set apparently it will apply it to all the shapes inside the layer.

The alternative is to grab the ID of the layer and then do a document.getElementById(ID) on the layer, then set the z-index using javascript.

Hope that helps,





Re: Move ShapeLayer to back/front

Let's Go Outside

It looks like changing the _index does not change the appear of the layers. I went ahead and just limited each search to ten results and ran them from lowest to highest priority. The client was originally askign for a threshold of ~50 pins on the screen. So I was running my locations and customer searches first then getting VE to make up the difference. But I found that once you go over ten, exceptions start getting thrown (not consistently, but most of the time). That's just fine by me. Smile

Thanks,

Steve





Re: Move ShapeLayer to back/front

dario77

Hi
I'm having the same problems: I added some shapes to 3 different VEShapeLayers and I want to move them to the front or back. I can't figure out how to do it. _index property does not work at all.
It might be a silly question, but how do I get the IDs of the VEShapeLayers in order to use document.getElementById(ID)
Thanks in advance!
Dario




Re: Move ShapeLayer to back/front

dario77

Hello
In my effort to move layers to back and front, I assigned a different css class to pushpins in different layers. In this class I specify and the zindex property but again, that does not help. I also wrote a js script that searches for pushpins of a given class (getElementsByClassName) after all the pushpins have been loaded and assignes a new zindex but again, no changes...any hint
Thanks
Dario




Re: Move ShapeLayer to back/front

Earthware

Hello

My guess is there must be some css somewhere in the ve code overriding your z-index property changes. Try on your css classes adding the following to the z-index line.

z-index:2 !important;

The !important should ensure that z-index is applied over all over css, however its only supported by FF and IE7 but at least if will confirm my hunch.

Brian Norman

www.earthware.co.uk





Re: Move ShapeLayer to back/front

Let's Go Outside

Same deal. I'm pretty sure it just hides/removes the control after "foreground" elements are moused out for an allotted amount of time.



Re: Move ShapeLayer to back/front

dario77

Hi Brian and thanks for your suggestions.
I just changed my code with the !important tag but it didn't work (I'm testing with ff2 and ie7). This is my css:

Code Snippet

.layerFront { cursor: pointer; z-index : 70!important; }
.layerBack { cursor: pointer; z-index : 60!important ;}



this is my veshapes initialization:

Code Snippet

var shape1 = new VEShape(VEShapeType.Pushpin, new VELatLong12, 12));
shape1.SetCustomIcon("<div class='layerFront'><img src='someimages.jpg'></div>") ;
layer1.AddShape(shape1);

var shape2 = new VEShape(VEShapeType.Pushpin, new VELatLong(12, 12));
shape2.SetCustomIcon("<div class='layerBack'><img src='someimages2.jpg'></div>") ;
layer2.AddShape(shape2);



After this code, shape2 is shown in front of shape1.
Once the map has been fully loaded, I iterate through all the pushpins of both classes and I assign again the right z-index. The code is something like this:

Code Snippet

layer1_ = document.getElementsByClassName("layerFront");
for(i = 0; i < layer1_.length; i++)
{
layer1_ [i].style.zindex='70!important';
}



Unfortunately, this code has no effects.
I finally tried to assign a proper zindex to the parent div of all the pushpins (I inspected the html with firebug, and I noticed that every veshapelayer has its own div element) but again, no effects.
I'm sure there must be an easier way to accomplish this task...any hints
Thanks in advance!
Dario





Re: Move ShapeLayer to back/front

Derrick

The reason changing the icon's zindex does not work is because the icon is inside a veshape div. And all the veshape div has the same zindex.

The following solution might not be support in future release. But, currently, if the following happens,

map.AddShape(shape1);

map.AddShape(shape2);

shape1 will appear below shape2. So, you can use this method to order your shapes. If you need to reorder the shapes, remove all the shapes and add them back in the correct order.





Re: Move ShapeLayer to back/front

dario77

Hi Derrick,
As I said in my last post, I tried to change the zindex for the velayershape div as well, not just for the pushpin icons and it did not work.
Anyway I'll follow your advice and see if it works in my case. However, I wonder what layers are from, if I have to handle manually the grouping, ordering and visualizaton of different pushpins...




Re: Move ShapeLayer to back/front

citygirl

I am able to control the pushpin layers using this bit of CSS:

/* Set the appropriate z-index.
Pushpin layer ID and pushpin class is hardcoded here.
Z-index is smaller by one than the default pushpin z-index set by VE.*/

#msftve_1002 .VEAPI_Pushpin {
z-index:997;
}


The layer ID is hardcoded, I found it doesn't change as long as all the layers area always added in the same order.

Default z-index for pushpins seems to be 998 so setting it to 997 for this layer only makes sure this layer displays underneath the other layers.





Re: Move ShapeLayer to back/front

dario77

Citygirl, your hint works, thanks a lot!
Dario