Adjustable tile layer opacity via DHTML?

Hi,

I was wondering if it is possible to adjust the opacity of a loaded tile layer via a dhtml control's event, say a slider. I've tried it but the tile layer seems unaffected by the slider setting a new opacity value even though I've made sure it's a float between 0 and 1. It doesn't even work when I hard code an appropriate value to be set on event.




Answer this question

Adjustable tile layer opacity via DHTML?

  • Prasenna

    I was just working on this last night; it's pretty easy:

    In my slider event, I calculate the percentage of transparency (based on the sliding scale), set the opacity, delete the layer, and then add it again:

    var trans = CalculateTransparency();

    tileLayer1.Opacity = trans;

    map.DeleteLayer('lidar');

    map.AddLayer(tileLayer1);

    I've requested the ability to alter a layer without having to remove it and re-add it to the map. It'll be a while before we see any fix, but hopefully it will get in there at some point.


  • Steven Gilissen

    Yeah, I was trying to do something like this with the mapcruncher layer object before this sdk release; couldn't track down the tile objects via a dom walk, though, so I opted for a "stacked" map hack where I loaded my crunched tiles into the top map and adjusted the transparency of that div. Things are better now :) Since the images are apparently now leveragable I might test this approach, but as I replied below, I'm currently working with the delete/add tile layer solution. Cheers!

  • David Mc Dermid

    Yikes; that's what I was afraid of; it's hack time :)

  • da_Codez

    Another temporary option would be to scan the page's DOM and look for img tags that have a src set to your location of custom tiles. For example, I see a series of img tags like:

    <img src=http://localhost:8080/layertiles/layer1/032003210.png style="left: 576px; top: 272px; width: 256px; height: 256px; position: absolute; z-index: 1; opacity: 0.5;"/>
    Dynamically grabbing these img tags using a loop over DOM elements, grabbing the src, using an indexOf to see if your host is in there, and changing the opacity style seems like it would work. (I have not tried it out, this is just thinking through it.)
    I was going to use MapCruncher's js file on my project, but then I saw the layers feature in VE 3.1 and have been testing it out. It seems like there are significant bugs though, so I will most likely revert to the MapCruncher js file for now, until the VE control is repaired. I'm not sure if others are seeing this, but rendering 50% opacity png tiles in IE seems really screwed up in VE 3.1, but works great (without opacity) in the MapCruncher js. I'm also seeing intermittent problems with the z-index of my tiles when using VE 3.1, but this does not seem to be the case with the MapCruncher js. Ex:
    tileLayer = new VELayerSpecification(VELayerType.VETileSource, id, id);
    tileLayer.zIndex = 100;
    tileLayer.Opacity=0.5;
    map.AddLayer(tileLayer);

    This ends up with img tags, like the one I pasted above, on the page with a z-index = 1, and therefore not visible. Zooming in and out on the map gets the tiles to show up correctly some of the time. I'm curious to know if others are seeing this behavior.



  • darthziv

    I suspect you would have to delete the layer then add it again with the new value.
    John.


  • Tigerroad

    I would test the performance of simply deleting the layer and then adding it again. As Caleb posted it's simple code, should have no issues (especially with changes to the VE API) and since the tiles would be cached i suspect will be quite quick. It depends on how well the browser can change a bunch of tiles transparency versus delete them and add them again.
    That said if you have to time to do it manually feel free to post it :)
    John.


  • Terry Showers

    I went with the "delete/re-add the tile layer" solution, which works well enough except I'm getting "hour-glassed" repeatedly with the slide-bar. So, I opted for a series of 5 radio buttons with discrete incemental values between 0 an 1; works really well! :) Then I added a dropdown that loads a list of all my tile layers per map view on the fly; then my transparency control acts upon the selected layer. I love it!!

    Cheers



  • Adjustable tile layer opacity via DHTML?