Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting a KML layer transparency

Is there a way to set the transparency of a kml layer when you add it? I am adding a kml layer that you cannot see through to the streets below. Is there a way to accomplish this

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'images/test3.kml'
  });

  var ctaLayer2 = new google.maps.KmlLayer({
    url: 'images/test.kml'
  });
  var ctaLayer3 = new google.maps.KmlLayer({
    url: 'images/kmztest2.kmz'
  });
  ctaLayer3.setMap(map);
  ctaLayer2.setMap(map);
  ctaLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
like image 674
shinjuo Avatar asked Jun 02 '13 20:06

shinjuo


People also ask

How do I change opacity in Google Earth?

On the control panel to the left of the Google Earth image, click the layer you have added, and use the slider to adjust the transparency of the layer.

How do I edit a KML file in Google Maps?

To edit a KMZ file, you can open it in Google Earth, right-click it in the Places Pane, choose Copy from the menu, and paste the contents into a text editor.

How do you simplify KML?

kml size can be reduced by decreasing the vertices of the features. this can be done by using arcmap with the simplify polygon tool.


3 Answers

As KML are added by Google Maps API as images in the DOM, you can change its opacity with CSS by searching the <img> elements that contain "kml" in its src attribute:

#map img[src*='kml'] {
    opacity: .5;
}

Also, you can achieve this using jQuery:

jQuery("#map").find("img[src*='kml']").css("opacity","0.5");

But keep in mind that when user zoom's out or moves the map, new KML images will be loaded, so you'll have to call that jQuery function again.

like image 84
campsjos Avatar answered Nov 05 '22 06:11

campsjos


You can't modify the opacity of the polygons in a KmlLayer. You have three options (that I can think of):

  1. define the opacity in the KML

example, the KML looks like this:

<Style
  id="Style1">
  <LineStyle><color>66000001</color><width>1</width></LineStyle>
  <PolyStyle>
    <color>00ff6633</color>  <!-- first 00 is opacity of zero -->
    <fill>1</fill>
    <outline>1</outline>
  </PolyStyle>
</Style>
<Placemark id="Opacity0">
  <name>Opacity 0</name>
  <visibility>1</visibility><open>0</open><styleUrl>#Style1</styleUrl>
  <Polygon><extrude>0</extrude><tessellate>1</tessellate><altitudeMode>clampToGround</altitudeMode>
    <outerBoundaryIs><LinearRing><coordinates>-116.365673309192,43.6628960911185 -116.365591334179,43.6560111958534 -116.364375539124,43.6559975333512 -116.364402864128,43.6483204644173 -116.359539767727,43.6483955662698 -116.359567092732,43.64422573708 -116.356452545151,43.6442223004997 -116.356329582632,43.6403188481927 -116.355482675135,43.6384234484285 -116.354444492608,43.6376550793648 -116.354198567569,43.6375697515905 -116.354198567569,43.6375560890883 -116.354348855093,43.6375355534256 -116.352818906307,43.6375834140927 -116.349636046216,43.6375697515905 -116.349677033722,43.6339155770838 -116.317438473925,43.6339155770838 -116.314392238855,43.6339600011706 -116.314187301323,43.6484194546938 -116.334391040727,43.6484843306243 -116.33440470323,43.6627594660968 -116.335292598233,43.6629438679665 -116.336767980829,43.6629097536206 -116.359348576516,43.6629985179752 -116.360673587769,43.6628994438797 116.365673309192,43.6628960911185</coordinates>

 </LinearRing></outerBoundaryIs></Polygon>
 </Placemark>

screenshot of resulting map

  1. import the KML into FusionTables, and use a FusionTablesLayer (which allows you to change the opacity of polygons) (No longer useful as FusionTables will be turned down/off on December 3, 2019)

  2. If the KML is not too complex, use a third party parser (geoxml3 or geoxml-v3, which will parse the KML and render it as native Google Maps Javascript API v3 objects (which allow you to modify the opacity).

like image 43
geocodezip Avatar answered Nov 05 '22 06:11

geocodezip


This solution is not perfect because it causes a slight flash when changing zoom levels, but some may find this useful:

google.maps.event.addListener(map, 'tilesloaded', function() {
            $("#map").find("img").css("opacity","0.5");
});
like image 23
Dewayne Avatar answered Nov 05 '22 07:11

Dewayne