<iframe style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes" >
    
    <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">  
  
      <Document> 
  
        <Style id= "shops" >
       
            <BalloonStyle>
              <text> 
                <![CDATA[
                
                  
                  Stats of __geolink__<br/>
                  $[part1/displayName]: $[part1]%<br/>
                  $[part2/displayName]: $[part2]% 
                ]]>
              </text>
            </BalloonStyle>
           
            <IconStyle>
                
              <scale>
               1.5
              </scale>
        
              <hotSpot  x="0.5"  y="0.5" xunits="fraction" yunits="fraction"   />
           
              <Icon>
              
                <href>http://maps.google.com/mapfiles/kml/pal4/icon47.png</href>
                
              </Icon>
       
       
            
              <richDecos>
              
                <label>
                  
                  <scale>
                    3
                  </scale>
                  
                  <color>
                    black
                  </color>
                   
                  <content>
                    $[name]
                  </content>
                 
                  <anchor>
                  
                    <hotSpot x="0"  y="-21" xunits="$[posxunit]" yunits="insetPixels"/>
                    
                  </anchor>
                  
                </label>  
               
              <raw>
              
                <content>
                
                 <![CDATA[
                 
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100" height="100">
                      <title id="title">Histogramme $[name]</title>
                      <g>
                        <rect opacity="0.7" fill="white" width="100" height="100"></rect>
                      </g>
                      <g>
                        <rect fill="pink" width="$[part1]" height="50"></rect>
                      </g>
                      <g>
                        <rect fill="green" width="$[part2]" height="50" y="50"></rect>
                      </g>
                    </svg>
                 
                  ]]>
                  
                </content>
                
                <anchor>
                
                  <hotSpot x="0"  y="-35" xunits="fraction" yunits="pixels"/>
                  
                </anchor>
                
              </raw>
              
            </richDecos>
             
          </IconStyle>

        </Style>
         
          
        <Folder>
        
          <open> 1 </open>
        
          <name> Shops with histograms  </name>
          
          <Placemark>
          
            <name> Shop #1  </name>
            
            <styleUrl>  #shops </styleUrl>
            
            <Point>
            
              <coordinates>
              
                2.3065,48.87049
                
              </coordinates>
              
            </Point>
             
            <ExtendedData> 
            
              
              <Data name="part1">
              
                <displayName>
                
                  <![CDATA[
                    <span style="color:pink;" ><b> Part 1 </b></span>
                  ]]>
                  
                </displayName>
                  
                <value> 20 </value>
                
              </Data>
              
              <Data name="part2">
              
                <displayName>
                
                  <![CDATA[
                    <span style="color:green;" ><b> Part 2 </b></span>
                  ]]>
                  
                </displayName>
                  
                <value> 80 </value>
                
              </Data>
              
              <Data name="posxunit">
              
                <value> <![CDATA[ insetPixels  ]]></value>
                
              </Data>
               
            </ExtendedData>   
         
         </Placemark>
        
        
      
        <Placemark>
        
          <name> Shop #2  </name>
          
          <styleUrl>  #shops </styleUrl>
          
          <Snippet> __geolink__ is the second shop indeed!  </Snippet>
           
          <Point>
          
            <coordinates>
            
              2.30778,48.8701
              
            </coordinates>
            
          </Point>
           
          <ExtendedData> 
          
            
            <Data name="part1">
            
              <displayName>
              
                <![CDATA[
                  <span style="color:pink;" ><b> Part 1 </b></span>
                ]]>
                
              </displayName>
                
              <value> 50 </value>
              
            </Data>
            
            <Data name="part2">
            
              <displayName>
              
                <![CDATA[
                  <span style="color:green;" ><b> Part 2 </b></span>
                ]]>
                
              </displayName>
                
              <value> 50 </value>
              
            </Data>
            
            <Data name="posxunit">
            
              <value> <![CDATA[ fraction  ]]></value>
              
            </Data>
            
          </ExtendedData>   
         
         </Placemark>

        </Folder>
 
  
      
        <Placemark>
               
          <name>
          
            My polygon
          
          </name>
          
          <description>
          
            $[Snippet]
            
          </description>
          
          <Snippet>
          
            <![CDATA[
            
              __geolink__: polygon with a radial-type color gradient background.<br/><br/>
          
              More: <a target ="_blank" href="https://developer.mozilla.org/fr/docs/Web/SVG/Element/radialGradient" >https://developer.mozilla.org/fr/docs/Web/SVG/Element/radialGradient</a>
          
            ]]>
            
          </Snippet>
          
          <Polygon>
          
            <outerBoundaryIs>
            
              <LinearRing>
              
                <coordinates>
                  2.30968,48.87125 2.31446,48.87367 2.31858,48.87105 2.3167,48.8688
                </coordinates>
                
              </LinearRing>
              
            </outerBoundaryIs>
            
          </Polygon>
          
          
          
          <Style>
          
            <PolyStyle>
            
              <outline> 0 </outline>
               
              <richDecos>
                 
                <inner>
                  
                  <patternTags>
                  
                    <append>
                    
                      <![CDATA[ 
                      
                        <defs>
                          
                          <radialGradient id="RadialGradient1">
                            <stop offset="0%" stop-color="red"/>
                            <stop offset="100%" stop-color="blue"/>
                          </radialGradient>
                          
                          <radialGradient id="notused" cx="0.25" cy="0.25" r="0.25">
                            <stop offset="0%" stop-color="yellow"/>
                            <stop offset="100%" stop-color="blue"/>
                          </radialGradient>
                                
                        </defs>
                                                  
                        <pattern patternUnits="userSpaceOnUse" width="50" height="50" patternTransform="rotate(0)">
                          
                          <rect x="0" y="0" rx="15" ry="15" width="50" height="50" fill="url(#RadialGradient1)"/>
                            
                        </pattern>
                        
                      ]]>
                      
                    </append>
                    
                  </patternTags>
                
                  <colorize>
                
                    <color>
                  
                      blue
                    
                    </color>
                    
                  </colorize>
                  
                </inner>
              
              </richDecos>   
              
            </PolyStyle>
          
          </Style>
          
        </Placemark>
        
      </Document>

    </kml>
  
  </iframe>