geoxml3

GeoXml3 Display Custom Field From KML File In A DIV Tag


I am trying to get data from a custom field in the KML file to display in the div id=summary section when that KML file is selected from either the map or the sidebar. I just simply copied the sidebar html to make a summary html section and wanted the content from the KML at (Document/Folder/Placemark/summary.text) to be displayed in that div tag.

<table style="width:100%;">
    <tr>
        <td>
            <div id="loaddiv">Loading.....&#160;&#160;&#160; please wait!
                <br />
            </div>
            <div id="map_canvas">
            </div>
        </td>
        <td>
            <div id="sidebar" style="width:300px;height:600px; overflow:auto"></div>
        </td>
        <td>
            <div id="summary" style="width:300px;height:600px; overflow:auto"></div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="link"></div>
        </td>
    </tr>
</table>

I feel like this may require some function overrides from the geoxml3.js file. I saw a section that had the below in geoxml3.js and it seemed like there may need to be something added to pull info from the KML file.

        placemark = {
          name:  geoXML3.nodeValue(node.getElementsByTagName('name')[0]),
          description: geoXML3.nodeValue(node.getElementsByTagName('description')[0]),
          styleUrl: geoXML3.nodeValue(node.getElementsByTagName('styleUrl')[0]),
          id: node.getAttribute('id')
        };

Website with summary table column next to the sidebar column: https://s20.postimg.cc/6jjcrnke5/geo1.png

KML files XML view: https://s20.postimg.cc/4eyzqkqh9/geo2.png


Solution

  • Create the below functions:

    function showSummary(pm, doc) {
        summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
        document.getElementById("summary").innerHTML = summaryHtml;
    }
    
    function clickPoly(poly, polynum, doc) {
        google.maps.event.addListener(poly, "click", function() {
            showSummary(polynum, doc);
        });
    }
    

    In the function useTheData(doc) add clickPoly(placemark.polygon, i, j); under the line highlightPoly(placemark.polygon, i, j); and add clickPoly(placemark.polyline, i, j); under the line highlightPoly(placemark.polyline, i, j);.

    Lastly add showSummary(pm, doc); to the first line in the function kmlPlClick(pm, doc).