Interactive KML Placemarks using HTML/JavaScript

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>  

Read More

Capitalize each word after forward slash in Java Script : Code snippet

 function getFormattedText() {  
   var formattedString= capitalizedTextAfterBackslash("Red spruce / balsam fir/tamarack");    
   alert(formattedString);  
 };  
 function capitalizedTextAfterBackslash(str){  
    var temp= str.split("\/");       
    for(var i=0; i<temp.length; i++) {  
     temp[i] = temp[i].trim();  
     temp[i] = temp[i].substr(0,1).toUpperCase() + temp[i].substr(1,temp[i].length-1);  
    }  
    return temp.join(' / ');   
 }  

Read More

Jquery Multiple Range Slider With Floating Points

I was working on a GIS project, which required four range sliders with floating points to set LCLU change threshold. I finally find out a nice jQuery based multiple range slider at http://jsfiddle.net/q5WEe/1/   The compiled fiddle as a web page source is shown in the Part 1.

Then, my goal was to put floating points on the slider bar value display, but the native jQuery slider bar doesn't support the floating point. jQuery always roundup the floating values to the nearest integer. To display the floating point (for example,0.5 break), I multiplied the max  and values with two and divided the display value with two (Part 2) and then I got jQuery slider bar with floating value as below.

Read More

Interactive Obesity and Rural Health Map

An interactive maps shows the influences of landscapes in rural health using ExtJs,GeoExt,Openlayers,Geoserver,PHP,Jquery, JavaScript, and other opensource tools.
Check it out

Read More