Tuesday, June 28, 2016

Interactive KML Placemarks using HTML/JavaScript

Be The First To Comment
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>  

Thursday, August 20, 2015

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

Be The First To Comment
 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(' / ');   
 }  

Wednesday, August 13, 2014

Jquery Multiple Range Slider With Floating Points

Be The First To Comment
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.





Thursday, July 19, 2012

Interactive Obesity and Rural Health Map

Be The First To Comment
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




 

© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me