Search code examples
google-mapskmlfill

Rendered KML layer doesn't fills polygons


I'm trying to render some simple kml layers on a Gmaps API project, but I'm finding that, despite anything I try, polygons doesn't fill.

I load a KML layer with this code:

var kmlLayerCenter = new   google.maps.KmlLayer('<kmlFileRoute>', {
        suppressInfoWindows: true,
        preserveViewport: true,
        map: map
    });

And this is the KML code:

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document id="root_doc">
    <Folder>
      <name>Distrito_Centro_KML</name>
      <Placemark>
        <Style>
          <LineStyle>
            <color>ff0000ff</color>
          </LineStyle>
          <PolyStyle>
            <fill>1</fill>
            <color>ff0000ff</color>
            <outline>1</outline>
          </PolyStyle>
        </Style>
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates>
                -5.67256283331951,43.5397440536399 
                ----- LOTS OF POINTS ------
                -5.67256283331951,43.5397440536399
              </coordinates>
            </LinearRing>    
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
  </Document>
</kml>

The polygon renders ok with red border, but there isn't any fill color. I tried to touch values here and there inside the KML, but to no success.

Any help will be appreciated.


Solution

  • Ok, Incredible but true... it seems that points on KML layers should be ordered counter-clockwise to allow Gmaps API to render fill colors.

    I don't understand completely why is this, but it seems to work fine.

    I found info about the solution here, although geocodezip answer was more or less on the same direction it wasn't until I reverse every point in the coordinates string that fill color appeared.