Using JQuery to set opacity to a KMZ's png file

[weekend]

Hello.

So I've been trying to use JQuery to make the png in my overlay transparent. I've gotten it to the point where it makes every "img" transparent, but can't quite seem to isolate the PNG in the KMZ. Any tips?

Website: www.vicinitynyc.com

Press "Map It" with "Union Square" in the field box. Then click "dim the lights".

code:

<script type="text/javascript"> 

    $(document).ready(function(){

    $(".b_opacity").click(function(){

//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src

    $("#map_canvas").find("img").css("opacity","0.4")

    })

    })

</script>

Any ideas on how to have the script not affect the GMap tiles? Or a better way to do the same?

[geoco...@gmail.com]

On Aug 3, 3:37 pm, weekend <mehin...@gmail.com> wrote:
> Hello.
>
> So I've been trying to use JQuery to make the png in my overlay transparent.
> I've gotten it to the point where it makes every "img" transparent, but
> can't quite seem to isolate the PNG in the KMZ. Any tips?
>
> Website:www.vicinitynyc.com
> Press "Map It" with "Union Square" in the field box. Then click "dim the
> lights".

KmlLayer is going to create tiles from your KMZ file, if you are
trying to locate a specific image loaded by that KMZ, it won't be
there.

If you use geoxml3 to parse your kml (and make it kml, not kmz, and
put the image on a public webserver rather than embedding it in the
kmz), you can do this:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/44x58_kml.xml

set the opacity of the png to 30%:
javascript:geoXmlDoc.ggroundoverlays[0].setOpacity(30);
set the opacity of the png to 0%:
javascript:geoXmlDoc.ggroundoverlays[0].setOpacity(0);
set the opacity of the png to 100%:
javascript:geoXmlDoc.ggroundoverlays[0].setOpacity(100);

-- Larry

[weekend]

Hi Larry, thanks for the input.

So my only recourse is to split my kmz's into xml/png and then upload them to the geocodezip server? Doesn't seem like it would scale very well for me if I started to cache 1,000s of maps.

Am I understanding this clearly?

[geoco...@gmail.com]

On Aug 3, 6:19 pm, weekend <mehin...@gmail.com> wrote:
> Hi Larry, thanks for the input.
>
> So my only recourse is to split my kmz's into xml/png and then upload them
> to the geocodezip server?

No. You don't have the option to put your files on my server. One
possible way you can achieve your desired result is to use kml rather
than kmz and use geoxml3 to display it (geoxml3 does not support kmz).

I don't think you can do what you want with KmlLayer, but I could be
wrong.

-- Larry

[William]

On Aug 4, 8:37 am, weekend <mehin...@gmail.com> wrote:
> Any ideas on how to have the script not affect the GMap tiles?

you could just search for <img> with kml in the src attribute:

$("#map_canvas").find('img[src*="kml"]').css("opacity","0.4")

...

[weekend]

WIlliam- that doesn't seem to work. Am I missing anything? Just replaced my line with yours.

Larry- I'll give it a go. 

Thanks

[weekend]

Larry- It's starting to come together. Am I adding myParser to an array groundoverlays[]? I don't seem to know where the setOpacity method is.

I don't see it in your code.

Thanks

[geoco...@gmail.com]

The groundoverlays are implemented using the ProjectedOverlay.js third
party library, that is where the setOpacity method is defined.

The geoXmlDoc.ggroundoverlays array (in my code) is an array of
ProjectedOverlay objects created by the geoxml3 parser that implement
the kml GroundOverlays.

-- Larry

>
> Thanks

[weekend]

Phew, saved me again Larry. Got it up and working, here's a question though:

I was feeding the ProjectedOverlay constructor the XML file as the image, but was getting an invalid image, so I fed it the PNG and it worked like a charm. Since the bounds of the png are already set through the Bounds variable, am I just ditching the KML/XML file altogether?

[geoco...@gmail.com]

You don't need to use kml or kmz, inf fact it looks like you don't
need geoxml3 or kml/kmz at all right now.

This is what is creating the overlay on the map:
new ProjectedOverlay(map, '/maps/44x58/
_agse669e0e8005449db80a6b5e75b0be482.png', overlaybounds,
overlayOptions)

Which for some reason you have as an argument to the myParser.parse
function, where:
var myParser = new geoXML3.parser({map: map});

If you want to vary the opacity, save a reference to the object
returned by the new ProjectedOverlay and use that to call setOpacity.


(BTW - the ProjectedOverlay was developed originally by John Coryat, I
have been maintaining the version in the geoxml3 project because it
allows geoxml3 to display groundoverlays)

-- Larry

[weekend]

Thought so. The KML is a great way to store 1,000 of maps though since the coords and PNG reference are in there. You think I should be working to import Bounds data and PNG file name data from a KML?

Thanks for keeping up on the project!

[geoco...@gmail.com]

On Aug 4, 12:56 pm, weekend <mehin...@gmail.com> wrote:
> Thought so. The KML is a great way to store 1,000 of maps though since the
> coords and PNG reference are in there. You think I should be working to
> import Bounds data and PNG file name data from a KML?

That is really up to you, and really depends on your data source and
your tools.

If you have a tool that creates the kml/kmz for you that might be
simpler and it is a "standard".

But if your tools provide the bounds and the images in a way that lets
you easily create the native map elements, that might be better as you
won't depend on a third party library (geoxml3) which you don't
control or Google's kml parser on google's servers which occasionally
breaks, and which we have no insight into (doesn't correspond to API
releases, seems to be shared by Google Maps, and both Google Maps
APIs).

I guess you can't get away from ProjectedOverlay though.

Others may have better insight into the advantages and disadvantages
of kml vs other options.

-- Larry

[William]

On Aug 4, 10:45 pm, weekend <mehin...@gmail.com> wrote:
> WIlliam- that doesn't seem to work. Am I missing anything? Just replaced my
> line with yours.

yeah you are right, it doesn't work with your KML.

Maybe you could search for <img> that are on the <div> with z-index of
101 (this is the plane on which KML tiles are displayed).

I don't know the best way to use jquery to find elements with a
particular z-index, so maybe there's a shorter way to write this:

$("#map_canvas").find('div').filter(function(index){return
this.style.zIndex==101}).find('img').css("opacity","0.4");

...