Opacity for a KML Layer

1,932 views
Skip to first unread message

Jennifer Dudeck

unread,
Jul 6, 2011, 1:30:58 PM7/6/11
to Google Maps JavaScript API v3
This has been an issue I've been struggling with for a few weeks now:
is there any way to change the overall opacity of a KML Layer? I need
to be able to add any arbitrary number of KML Layers to a map, and
adjust the opacity of each one individually with sliders. I can do the
opacity sliders just fine with Overlays, using the 'opacity' setting,
but KML Layers don't seem to have an opacity attribute. I know that
the opacity of an object inside KML can be set by making the first bit
of the color of that object FF. But, I can't see a clean way of
changing that in the KML and then refreshing the changes.

Is there a simply solution that I'm just missing? Or even a more round-
about solution that I can use?

Thanks,
J. Dudeck

Dave Herndon

unread,
Nov 21, 2011, 3:30:23 AM11/21/11
to google-map...@googlegroups.com
Hi,
 Did you ever get an answer to this question?  I also have a kml overlay I diced up into tiles and need to set the transparency to 65%.  The files are either .png or .jpeg.  The transparency looked good in google earth but I need to get it done on a web page without GE.

Marcelo

unread,
Nov 21, 2011, 1:00:42 PM11/21/11
to Google Maps JavaScript API v3
You cannot modify a KML layer after it's been loaded because it is
parsed and rendered from Google's servers. The only way to change it
is to use an AJAX call to a server side script that modifies the KML
file and then reload it.

On the other hand, if you've already converted it to custom tiles then
you have full control, and you can use something like my
MCustomTileLayer object to set the opacity of the tiles:
http://maps.forum.nu/v3/gm_customTiles.html

--
Marcelo - http://maps.forum.nu
--

Dave Herndon

unread,
Nov 22, 2011, 11:48:48 AM11/22/11
to google-map...@googlegroups.com
Cool,
As far as the MCustomTileLayer object.   I don't see any reference to KML in the source code.  I suspect the code is not out where you can see it in the source code correct?  Is this a pay to play object?
Dave


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.




--
           343  NYFD
All Gave ... Some Gave All

Marcelo

unread,
Nov 22, 2011, 12:36:47 PM11/22/11
to Google Maps JavaScript API v3
On Nov 22, 9:48 am, Dave Herndon <kitethew...@gmail.com> wrote:
> Cool,
> As far as the MCustomTileLayer object.   I don't see any reference to KML
> in the source code.  I suspect the code is not out where you can see it in
> the source code correct?

Read again what I wrote in my previous post. MCustomTileLayer has
nothing to do with KML.

> Is this a pay to play object?

The answer to that question is right at the beginning of
MCustomTileLayer.js
Again, read!

--
Marcelo - http://maps.forum.nu
--

> Dave


>
>
>
>
>
>
>
>
>
> On Mon, Nov 21, 2011 at 10:00 AM, Marcelo <marcelo...@hotmail.com> wrote:
> > You cannot modify a KML layer after it's been loaded because it is
> > parsed and rendered from Google's servers. The only way to change it
> > is to use an AJAX call to a server side script that modifies the KML
> > file and then reload it.
>
> > On the other hand, if you've already converted it to custom tiles then
> > you have full control, and you can use something like my
> > MCustomTileLayer object to set the opacity of the tiles:
> >http://maps.forum.nu/v3/gm_customTiles.html
>
> > --

> > Marcelo -http://maps.forum.nu

Dave Herndon

unread,
Nov 22, 2011, 7:19:36 PM11/22/11
to Google Maps JavaScript API v3
Thanks. Well here is my code. It overlays a couple hundred fully
opaque tiles over a google map. The "dim the lights" button changes
the opacity of all the tiles but when you zoom in or scroll across the
page the tiles revert back to there original opaque status. Can
anyone help me to get this done not on a mouse click but when the page
reloads after a zoom or pan? Thanks a bunch!
Dave


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</
title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<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.6")

})
})


function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

var ctaLayer = new google.maps.KmlLayer('https://s3-us-
west-1.amazonaws.com/alsfdmap/FiveLevels/WebKml.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">

<div id="map_canvas" style="width: 600px;height: 600px;"></div>
<input type="button" value="dim the lights" class="b_opacity">
</body>
</html>


On Nov 22, 9:36 am, Marcelo <marcelo...@hotmail.com> wrote:
> On Nov 22, 9:48 am, Dave Herndon <kitethew...@gmail.com> wrote:
>
> > Cool,
> > As far as the MCustomTileLayer object.   I don't see any reference to KML
> > in the source code.  I suspect the code is not out where you can see it in
> > the source code correct?
>
> Read again what I wrote in my previous post. MCustomTileLayer has
> nothing to do with KML.
>
> > Is this a pay to play object?
>
> The answer to that question is right at the beginning of
> MCustomTileLayer.js
> Again, read!
>
> --

> Marcelo -http://maps.forum.nu

Rossko

unread,
Nov 22, 2011, 9:09:42 PM11/22/11
to Google Maps JavaScript API v3
> Thanks.  Well here is my code.  It overlays a couple hundred fully
> opaque tiles over a google map.

Strictly speaking, it doesn't. Googles servers read your KML and
render into the dozen or so tiles that fit the current API map. When
you pan or zoom, the API fetches new tiles from Google.

If you must go your way, try listening for map idle event to re-
trigger your CSS tweak

Reply all
Reply to author
Forward
0 new messages