GeoXML3 Sidebar Highlighting / KML Layout

Question

I have 3 KML files that I am loading in based on this example (thank you @geocodezip): http://www.geocodezip.com/geoxml3_test/v3_geoxml3_multipleKML_test.html

On the sidebar when hovering your mouse over one of the KML file names in the sidebar more than just that single file is being highlighted on the map when only the hovered item should be highlighted.

Multiple files highlighted wrong

Just one being highlighted correct

I did some investigating and I found that different pairs are being highlighted if they have the same number of "Placemarks" in the Document\Folder\Folder directory.

In the KML files that I have the files "ice.kml" and "rainier.kml" both have 1 placemark folder and "preston.kml" has 2 placemark folders.

The files I use are at the GitHub link below.

https://github.com/PieDevTest/KML-Website

EDIT:

Shouldn't "function kmlHighlightPoly(pm) {" function take 2 parameters? Like "function kmlHighlightPoly(pm, mp) {" or whatever you want to name the second var?

<td onmouseover="kmlHighlightPoly(2,2);" ... >

The above generated HTML seems to be like (# of placemarkers, row #). So if I added another placemarker to the "preston.kml" file it would be "kmlHighlightPoly(3,2)". Which would be fine until another kml file with 3 placemarkers was added and then they both would be highlighted together since the kmlHighlightPoly function is just looking at the first number and not the row number.

function kmlHighlightPoly(pm) {
    for (var j = 0; j < geoXmlDoc.length; j++) {
        for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
            var placemark = geoXmlDoc[j].placemarks[i];
            if (i == pm) {
                if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
            } else {
                if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
            }
        }
    }
}

Answer 1

So I ended up changing the below highlight function to take a second param and switched the if check to look at the "j" var which is what the "row" would be instead of what the "placemark" would be at.

Also made the same i to j switch in the makeSidebarPoly functions and highlightPoly(placemark.polygon, j); line in the useTheData(doc) function.

function kmlHighlightPoly(pm, polynum) {
    for (var j = 0; j < geoXmlDoc.length; j++) {
        for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
            var placemark = geoXmlDoc[j].placemarks[i];
            if (j == polynum) {
                if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
            } else {
                if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
            }
        }
    }
}

You can view the full set of changes on GitHub.

Answer 2

There were a number of places that needed to be updated for the additional doc to be handled correctly by the mouseover/mouseout event handlers.

updated page

function kmlHighlightPoly(pm, doc) {
 for (var j=0; j<geoXmlDoc.length;j++) {
   for (var i=0;i<geoXmlDoc[j].placemarks.length;i++) {
     var placemark = geoXmlDoc[j].placemarks[i];
     if (i == pm && j == doc) {
       if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
       if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
     } else {
       if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
       if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
     }
   }
 }
}
function kmlUnHighlightPoly(pm, doc) {
 for (var j=0; j<geoXmlDoc.length; j++) {
   for (var i=0;i<geoXmlDoc[j].placemarks.length;i++) {
     if (i == pm && j == doc) {
       var placemark = geoXmlDoc[j].placemarks[i];
       if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
       if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
     }
   }
 }
}

function highlightPoly(poly, polynum, doc) {
  google.maps.event.addListener(poly,"mouseover",function() {
    var rowElem = document.getElementById('row'+polynum+'_'+doc);
    if (rowElem) rowElem.style.backgroundColor = "#FFFA5E";
    if (poly instanceof google.maps.Polygon) {
      poly.setOptions(highlightOptions);
    } else if (poly instanceof google.maps.Polyline) {
      poly.setOptions(highlightLineOptions);
    }
  });
  google.maps.event.addListener(poly,"mouseout",function() {
    var rowElem = document.getElementById('row'+polynum+'_'+doc);
    if (rowElem) rowElem.style.backgroundColor = "#FFFFFF";
    poly.setOptions(poly.normalStyle);
  });
}  
function makeSidebarPolylineEntry(i,j) {
  if (geoXml && geoXml.docs && geoXml.docs[j] && geoXml.docs[j].placemarks
         && geoXml.docs[j].placemarks[i] && geoXml.docs[j].placemarks[i].name) {
  var name = geoXml.docs[j].placemarks[i].name;
   if (!name  || (name.length == 0)) name = "polyline #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'_'+j+'"><td onmouseover="kmlHighlightPoly('+i+','+j+');" onmouseout="kmlUnHighlightPoly('+i+','+j+');"><a href="javascript:kmlPlClick('+i+','+j+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+','+j+');">show</a></td></tr>';
  } 
}
function makeSidebarEntry(i,j) {
  if (geoXml && geoXml.docs && geoXml.docs[j] && geoXml.docs[j].placemarks
         && geoXml.docs[j].placemarks[i] && geoXml.docs[j].placemarks[i].name) {
  var name = geoXmlDoc[j].placemarks[i].name;
   if (!name  || (name.length == 0)) name = "marker #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'_'+j+'"><td><a href="javascript:kmlClick('+i+','+j+');">'+name+'</a></td></tr>';
  }
}

Then in useTheData:

function useTheData(doc){
  var currentBounds = map.getBounds();
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  // Geodata handling goes here, using JSON properties of the doc object
  sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
  geoXmlDoc = doc;
  for (var j = 0; j<geoXmlDoc.length;j++) {
  if (!geoXmlDoc[j] || !geoXmlDoc[j].placemarks || !geoXmlDoc[j].placemarks.length)
    continue;
  for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
    // console.log(doc[0].markers[i].title);
    var placemark = geoXmlDoc[j].placemarks[i];
    if (placemark.polygon) {
      if (currentBounds.intersects(placemark.polygon.bounds)) {
        makeSidebarPolygonEntry(i,j);
      }
      var kmlStrokeColor = kmlColor(placemark.style.color);
      var kmlFillColor = kmlColor(placemark.style.fillcolor);
      var normalStyle = {
          strokeColor: kmlStrokeColor.color,
          strokeWeight: placemark.style.width,
          strokeOpacity: kmlStrokeColor.opacity,
          fillColor: kmlFillColor.color,
          fillOpacity: kmlFillColor.opacity
          };
      placemark.polygon.normalStyle = normalStyle;

      highlightPoly(placemark.polygon, i, j);
    }
    if (placemark.polyline) {
      if (currentBounds.intersects(placemark.polyline.bounds)) {
         makeSidebarPolylineEntry(i,j);
      }
      var kmlStrokeColor = kmlColor(placemark.style.color);
      var normalStyle = {
          strokeColor: kmlStrokeColor.color,
          strokeWeight: placemark.style.width,
          strokeOpacity: kmlStrokeColor.opacity
          };
      placemark.polyline.normalStyle = normalStyle;

      highlightPoly(placemark.polyline, i, j);
    }
    if (placemark.marker) {
      if (currentBounds.contains(placemark.marker.getPosition())) {
         makeSidebarEntry(i,j);
      }
    }
   }
  }  
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};