geoxml v3 highlight polygons when using multiple KML files

Question

In the need of a Portugal map where users can select districts onclick, I followed this example and this one. The problem is I'm using a KML file for each district to be drawn as a polygon instead of using a KML for ALL districts polygons.

Already searched many questions here and also tried to change the useTheData () callback function to include an extra for cycle like shown below but with no success...

    function useTheData(doc) {

        var sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';

        for (var j = 0; j < doc.length ; j++) { 
          ...
        }
        sidebarHtml += "</table>";

        document.getElementById("map_barralateral").innerHTML = sidebarHtml;
    };

Hovering districts on the map works fine, but when clicking highlight link on the sidebar it defaults to highlight the polygon created with the last KML file of the list...

Is there anyway to fix this?

My FULL Code is here: http://afonsogomes.com/mapas

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="utf-8">
    <title>XXXXX</title>
    <style>
    html,body {margin: 0;padding: 0;}
    #map_canvas, #map_barralateral {width: 300px;height: 500px;margin: 0;padding: 0;float: left;background-color: #e5e3df;}
    #map_canvas{height: 520px;}
    #map_barralateral{width: 300px;font-family: Arial, sans-serif;font-size: 12px;padding: 10px;}
    #loaddiv {width: 620px;background-color: #78A04C;border: none;padding: 20px 0;font-family: Arial, sans-serif;color: #FFF;font-weight: 700;text-align: center;position: absolute;left: 0;top: 200px;margin: 0 auto;filter: alpha(opacity=90);opacity: .90;z-index: 100;}
    </style>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>

    <script>
        var geoXml = null;
        var geoXmlDoc = null;
        var map = null;
        var myLatLng = null;
        var myGeoXml3Zoom = true;
        var sidebarHtml = "";

        var filename_example = ["kml/porto.kml", "kml/faro.kml", "kml/braganca.kml", "kml/evora.kml"];
        function initialize() {
           myLatLng = new google.maps.LatLng(39.96293, -8.03770);

            var myOptions = {
                zoom: 18,
                center: myLatLng,

                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

            showLoad();

            geoXml = new geoXML3.parser({
                map: map,
                zoom: myGeoXml3Zoom,
                suppressInfoWindows: true,
                singleInfoWindow: false,
                afterParse: useTheData
            });
            google.maps.event.addListener(geoXml, 'parsed', function () {
                hideLoad();
            });

            geoXml.parse(filename_example);
        };

        function kmlHighlightPoly(poly) {
            for (var i = 0; i < geoXmlDoc.gpolygons.length; i++) {
                if (i == poly) {
                    geoXmlDoc.gpolygons[i].setOptions({ fillColor: "#0000FF", strokeColor: "#0000FF" });
                } else {
                    geoXmlDoc.gpolygons[i].setOptions({ fillColor: "#FF0000", strokeColor: "#FF0000" });
                }
            }
        }

        function showAll() {
            map.fitBounds(geoXmlDoc.bounds);
            for (var i = 0; i < geoXmlDoc.gpolygons.length; i++) {
                geoXmlDoc.gpolygons[i].setMap(map);
            }
        }

        function highlightPoly(poly) {
            google.maps.event.addListener(poly, "mouseover", function () {
                poly.setOptions({ fillColor: "#FF0000", strokeColor: "#FF0000" });
            });
            google.maps.event.addListener(poly, "mouseout", function () {
                poly.setOptions({ fillColor: "#78A04C", strokeColor: "#78A04C", fillOpacity: 0.4 });
            });
        }

        function useTheData(doc) {

            var sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';

            for (var j = 0; j < doc.length ; j++) { // Added by me to parse all kml files to the map

                geoXmlDoc = doc[j];
                for (var i = 0; i < doc[j].gpolygons.length; i++) {
                    sidebarHtml += '<tr><td>' + doc[j].placemarks[i].name + ' - <a   href="javascript:kmlHighlightPoly(' + j + ');">highlight</a><br></td></tr>';
                    highlightPoly(doc[j].gpolygons[i]);
                }
            }
            sidebarHtml += "</table>";

            document.getElementById("map_barralateral").innerHTML = sidebarHtml;
        };

        function hideLoad() {
            var loaddiv = document.getElementById("loaddiv");
            if (loaddiv == null) {
                alert("Sorry can't find the loaddiv");
                return;
            }
            loaddiv.style.visibility = "hidden";
        }

        function showLoad() {
            var loaddiv = document.getElementById("loaddiv");
            if (loaddiv == null) {
                alert("Sorry can't find your loaddiv");
                return;
            }
            loaddiv.style.visibility = "visible";
        }
    </script>
</head>

<body onload="initialize()">
    <div id="loaddiv">A carregar.....&#160;&#160;&#160; Por favor aguarde!</div>
    <div id="map_canvas"></div>
    <div id="map_barralateral"></div>
    <div id="map_status"></div>
</body>
</html>

geocodezip · Accepted Answer · 2015-10-09T14:39:32.740

You need to modify kmlHighlightPoly also to account for the use of multiple KML files:

function kmlHighlightPoly(doc,poly) {
  for (var j=0; j < geoXmlDoc.length; j++) {
    for (var i = 0; i < geoXmlDoc[doc].gpolygons.length; i++) {
        if ((j == doc) && (i == poly)) {
            geoXmlDoc[j].gpolygons[i].setOptions({ fillColor: "#FF0000", strokeColor: "#FF0000" });
        } else {
            geoXmlDoc[j].gpolygons[i].setOptions({ fillColor: "#78A04C", strokeColor: "#78A04C", fillOpacity: 0.4 });
        }
    }
  }
}

And change useTheData to pass in the document to the kmlHighlightPoly function.

function useTheData(doc) {
    var sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';

    for (var j = 0; j < doc.length ; j++) { // Added by me to parse all kml files to the map

        geoXmlDoc = doc;
        for (var i = 0; i < doc[j].gpolygons.length; i++) {
            sidebarHtml += '<tr><td>' + doc[j].placemarks[i].name + ' - <a   href="javascript:kmlHighlightPoly('+j+','+i+');">highlight</a><br></td></tr>';
            highlightPoly(doc[j].gpolygons[i]);
        }
    }
    sidebarHtml += "</table>";
    document.getElementById("map_barralateral").innerHTML = sidebarHtml;
};

working example

thanks so much! been here all morning and the last 2 hours trying to achieve that. Just out of curiosity: would it be possible to include checkboxes on each item on the sidebar and when marked highlight each polygon and lot letting it be unhighlighter when the event mouseout occurs? — Afonso Gomes, Oct 09 '15 at 14:49
I was already doing that :) the think I notice with the kmlHighlightPoly function is that when it highlights a poly it removes the highlight from the previous highlighted one. — Afonso Gomes, Oct 09 '15 at 15:02

geoxml v3 highlight polygons when using multiple KML files

1 Answers1