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 style="display:block;margin-left:auto;margin-right:auto;text-align:center;"> 
     
    <iframe name="Use the &amp;lt;outer&amp;gt; tag of &amp;lt;PolyStyle&amp;gt;&amp;lt;richDecos&amp;gt;"  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">
        
        <Placemark>
           
          <Style>
          
            <BalloonStyle>
            
              <text>
              
                <![CDATA[
                  __geolink__: this polygon is to small to be displayable with a map small <strong>zoom</strong> level
                ]]>
              
              </text>
            
            </BalloonStyle>
           
            <PolyStyle>
            
              <color>
                667280FA <!-- salmon color with an opacity of 40% , see: https://htmlcolorcodes.com/colors/salmon/ -->
              </color>
              
              <richDecos>
              
                <outer>
                
                 <label>
                 
                  <content> $[name] </content>
                  
                  <color> blue </color>
                  
                  <minZoom> 20 </minZoom>
                  
                 </label>
                
                  <img>
                  
                    <url>
                    
                      <![CDATA[
                      
                        http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png
                        
                      ]]>
                      
                    </url>
                    
                    <pixelSize> 64px </pixelSize>
                    
                    <anchor>
                    
                      <hotSpot x="0.3" xunits="fraction" y="0" yunits="pixels"/>
                      <!-- as you see the pointed head of the pin is not in the middle of the width (0.5) of the image but rather around 0.3, so the x value is 0.3 with "fraction" as xunits -->
                    
                    </anchor>
                    
                    <maxZoom> 19 </maxZoom>
                    
                  </img>
                
                </outer>
                
              </richDecos>
              
            </PolyStyle>
            
          </Style>
           
          <name>  My small polygon </name>
          
          <Snippet>
            
            <![CDATA[
              Fictional polygon, <br/>
              no real object/phenomenum
            ]]>
            
          </Snippet>
          
          <description>
            this message will not be rendered in the popup because the BalloonStyle tag has priority over the description tag!
          </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>
        
      </kml>  
      
    </iframe>

  </div>
  


Video demo: