3

I've got a google map page on my website where I want to load a series of KMZ files showing blocks of land. I am generating the KMZs in Google Earth which are made up of an Image Overlay and a series of Polygons. I first load the Image Overlay, which is a PNG made up of black lines and transparent background - this shows the boundary lines of the plots of land. Then I draw polygons over this image to group related plots. Before exporting the KMZ from Google Earth I make sure the image is displayed in the foreground, above the polygons. However, after exporting and loading the KMZ into the Google Map on my webpage, the Image Overlay is loaded at the back with the polygons layered on top, obscuring the boundary-line details shown in the image.

I have tried the following options in Google Earth to bring the image to the top, none of which result in the correct layering in my map:

  • Setting the Altitude to "Absolute" and raising to >50m (which displays it above the polygons in Google Earth).
  • Increasing the Draw Order to a value higher than those of the polygons.
  • In the document tree, reordering the image in the list of polygons (positioning above and then below the polygons).
  • In the document tree, placing the image in its own folder in the tree (positioned both above and below the polygons folder).

However, every one of these attempts still results in the KMZ being displayed incorrectly in my webpage - the Image Overlay is displayed at the back:

Google Earth vs Google Maps rendering

I've also attempted putting the polygons into one KMZ and the Image Overlay into another, loading each separately into my map with a higher zIndex for the KMZ with the image, and the Image Overlay is still layered below the polygons.

In terms of my client-side code to add the KMZ files (in case I'm doing something wrong there), I get the URL for each KMZ and pass it into the following method: 

function addKMZFile(myMap, kmzUrl) {
    var kmzLayer = new google.maps.KmlLayer({
        url: kmzUrl,
        preserveViewport: true,
        map: myMap,
        clickable: true
    });
}

I've uploaded an example KMZ to my file server, which can be used for testing purposes (the KMZ is added to my map with the method above): http://bassmanjase.altervista.org/SO_Test.kmz

I can't seem to see any specific mention in the Google Maps KML documentation about image-overlay or how layering within KML is carried out. Is there a way to configure the KML so that the Image Overlay is layered above the Polygons when being displayed in Google Maps?

Bassmanjase
  • 167
  • 4
  • 14
  • possible duplicate question: [Loading kml markers above polygon](http://stackoverflow.com/questions/27896861/loading-kml-markers-above-polygon/) – geocodezip Feb 18 '15 at 00:20
  • Do you have a sample of the image overlay or the KML/KMZ that you used when you tried to overlay it? – geocodezip Feb 18 '15 at 00:25
  • I presume you mean when I tried to overlay the two layers separately? These are at http://bassmanjase.altervista.org/Image.kmz and http://bassmanjase.altervista.org/Polygons.kmz. – Bassmanjase Feb 18 '15 at 00:56
  • Probably not useful for you, but I can reproduce the issue. Not sure why we can't seem to control the ordering, even when using a third party parser, but that may have to do with the details of how the ground overlays are rendered. – geocodezip Feb 18 '15 at 11:46
  • I would think you could make it work with a customized version of a third party KML parser. Whether that will perform well enough in the final application will depend on how complex the final KML is. – geocodezip Feb 18 '15 at 23:09
  • Yes, it appears that the Google Maps API (at this point in time, v3.20) renders the overlay below everything else without the ability to specify the layering order. I suppose in most instances this would be correct as the user would generally be interacting with the polygons / pins and not the overlay. I appreciate you confirming that there doesn't appear to be another way to do it without other 3rd party tools - for this webpage I think attempting to incorporate that might be more than I'm able to do. – Bassmanjase Feb 18 '15 at 23:11

2 Answers2

1

Since there doesn't appear to be a way to render the overlay above the polygons natively in Google Maps, the workaround I've gone with is to reduce the opacity of the polygons so that the overlay is visible below them.

This also gives the added benefit that the underlying map imagery is somewhat visible (since my overlay has a transparent background):

Semi-opaque polygons with image overlay below

Bassmanjase
  • 167
  • 4
  • 14
0

I've been able to achieve it with this style:

#map > div > div > div > div > div:nth-child(2) img[draggable="false"] {
  opacity: 0.4;
}

enter image description here

joseluismurillorios
  • 1,005
  • 6
  • 11