My colleague stopped by this morning and asked me to see if there is any way to implement combo box / drop-down list in KML file for dynamically selecting the Placemarks' information. Few hour of googling come up with a quick and dirty KML (adding custom data) using HTML/JavaScript in <ExtendedData> tag with combo box selection and pasted it here for our future reference. It may helps others as well. If there are any alternatives feel free to chime in.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="MyBalloonStyle">
<BalloonStyle>
<text> <![CDATA[
<b>Example extended data template</b>
<div style="width:350px;" id="tree"></div>
<table id="table" border="1" >
<tr><td>Company Name</td></tr>
<tr><td><i>$[Company_Name]</i></td></tr>
<tr><td>
<select id = "treeListSelection" onchange = 'treeListChanged(value)'>
<option>--Select--</option>
<option value="tree 1">'Tree 1'</option>
<option value="tree 2">'Tree 2'</option>
</select>
</td></tr>
</table>
<script type="text/javascript">
function treeListChanged(value){
document.getElementById('tree').innerHTML = value ;
}
</script>
]]></text>
<bgColor>ffffffbb</bgColor>
</BalloonStyle>
<IconStyle> <color>ffffffff</color> <scale>1</scale>
<Icon><href>http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<scale>0</scale>
</LabelStyle>
</Style>
<Folder> <name>Using drop-down/combobox in KML</name>
<Placemark>
<name>Comp 1</name>
<styleUrl>#MyBalloonStyle</styleUrl>
<ExtendedData>
<Data name="Company_Name"><value>Company 1</value></Data>
</ExtendedData>
<Point>
<coordinates>-122.034924,37.331586,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Comp 2</name>
<styleUrl>#MyBalloonStyle</styleUrl>
<ExtendedData>
<Data name="Company_Name"><value>Company 2</value></Data>
</ExtendedData>
<Point>
<coordinates>-122.084676,37.421742,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>

0 comments :
Post a Comment