Cette carte interactive a été générée grâce à l'app embedMap : https://www.owlapps.net/modules/owlapps_apps/embedmap





Voilà le code HTML d'intégration correspondant à la carte interactive ci-dessus !

<script src = 'https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js' language="javascript" defer></script>
  
  <div data-owlappsmaplyrgroup = "yes" style="display:block;margin-left: auto;margin-right: auto;text-align:center;"> 
     
    <iframe name="Using the &amp;lt;inner> tag of &amp;lt;PolyStyle>&amp;lt;richDecos>"  style = "border:1px solid lightgrey;height:60vh;width:60vw;min-height:250px;min-width:350px;" data-owlappsmap = "yes" >
    
      <?xml version="1.0" encoding="UTF-8"?>
      
      <kml xmlns="http://www.opengis.net/kml/2.2">
        
        <Document>
        
          <name>  Customizing polygon-type geometries  </name>
          
          <Snippet>
           
            <![CDATA[ Testing the &lt;patternTags> tag child of &lt;inner> tag ]]>
            
          </Snippet>
           
          <Placemark>
           
            <Snippet> <![CDATA[ Displaying label in polygon rather than above! ]]> </Snippet>
          
            <name> Hello! </name>
            
            <Style>
             
              <PolyStyle>
              
                <fill> false </fill>  <!--  remove the background of this polygon -->
                
                <outline> false </outline> <!--  remove the border of this polygon  -->
                
               <richDecos>
               
                <inner>
                  
                  <patternTags>
                  
                    <append>
                    
                      <![CDATA[
                        <pattern patternUnits="userSpaceOnUse" width="140" height="60" patternTransform="rotate(33)"> 
                          <text font-size="2em"  x="0" y="20"  >    $[name]   ;-)    </text>
                        </pattern> 
                      ]]>
                      
                    </append>

                  </patternTags>
                  
                  <colorize>
                    <!--  add a background-color for this polygon -->
                    <color>
                    
                      red
                      
                    </color>
                    
                    <opacity>
                    
                      0.7
                      
                    </opacity>
                    
                  </colorize>
                   
                </inner>
               
              </richDecos>
               
            </PolyStyle>
            
          </Style>
            
          <description> The polygon called __geolink__ has its name repeated in its background </description>
            
          <Polygon>
             
              <outerBoundaryIs>
                <LinearRing>
                  <coordinates>
                    5.075540874379179,47.25902566581779,0 5.075739785686084,47.25899496298661,0 5.075757936424637,47.25908035000109,0 5.075577503345499,47.25911881544968,0 5.075540874379179,47.25902566581779,0
                  </coordinates>
                </LinearRing>
              </outerBoundaryIs>
              
          </Polygon>
             
        </Placemark>
        
      </Document>
        
    </kml>  
      
  </iframe>
  
</div>
 


Video demo: