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="Using local and external &amp;lt;Schema> tag"  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>
          
            <open> 1 </open>
            
            <Schema name="LOCAL_TrailHeadType" id="TrailHeadTypeId">     
              <SimpleField type="string" name="TrailHeadName">       
                <displayName><![CDATA[<b>Trail Head Name</b>]]></displayName>     
              </SimpleField>     
              <SimpleField type="double" name="TrailLength">       
                <displayName><![CDATA[<i>Length in miles</i>]]></displayName>     
              </SimpleField>     
              <SimpleField type="int" name="ElevationGain">       
                <displayName><![CDATA[<i>Change in altitude</i>]]></displayName>     
              </SimpleField>   
            </Schema> 
            
            <name> Displaying the &amp;lt;ExtendedData&amp;gt; data table in popup  </name>
            
            <Snippet>
             
              <![CDATA[
                More: <a target="_blank" href="https://developers.google.com/kml/documentation/extendeddata?hl=en" > https://developers.google.com/kml/documentation/extendeddata?hl=en </a>
              ]]>
              
            </Snippet>
             
            <Placemark>
             
              <Style>
              
                <!-- 
                <BalloonStyle>
                  <text> <![CDATA[__geolink__: <br/> ]]> Data table of $[name] object is not displayed in its popup because of &amp;lt;BalloonStyle&amp;gt; tag! Remove it and data table will appear (remove  &amp;lt;description&amp;gt; tag too). </text>
                </BalloonStyle>
                -->
                
                
                <PolyStyle>
                  <color>
                    FF00000000 <!-- black -->
                  </color>
                </PolyStyle>
              </Style>
              
              <Snippet>
                
                <![CDATA[
                  
                  This Placemark has <strong>&amp;lt;ExtendedData></strong> tag and no <strong>&amp;lt;description></strong> tag and no <strong>&amp;lt;BalloonStyle></strong> tag too. Click on it on the map, its popup appears with a data table.
                  
                ]]>
                
              </Snippet>
            
              <name> My polygon </name>
              
              <Snippet>
                
                <![CDATA[
                  Using variable (substitute card) mechanism: 
                  <br/>
                  $[REMOTE_TrailHeadType/TrailHeadName/displayName]: $[REMOTE_TrailHeadType/TrailHeadName]
                ]]>
                
              </Snippet>
              
              <ExtendedData>
               
                <Data name="holeNumber">
                  <displayName>
                    <![CDATA[
                      <b>This is hole </b>
                    ]]>
                  </displayName>
                  <value>1</value>
                </Data>
                
                <Data name="holePar">
                  <displayName>
                    <![CDATA[
                      <i>The par for this hole is </i>
                    ]]>
                  </displayName>
                  <value>4</value>
                </Data>
                
                <Data name="holeYardage">
                  <displayName>
                    <![CDATA[
                      <b><i>The yardage is </i></b>
                    ]]>
                  </displayName>
                  <value>234</value>
                </Data>
                 
                <SchemaData schemaUrl="#TrailHeadTypeId"> <!-- local Schema  -->
                  <SimpleData name="TrailHeadName">Pi in the sky</SimpleData>         
                  <SimpleData name="TrailLength">3.14159</SimpleData>         
                  <SimpleData name="ElevationGain">10</SimpleData>       
                </SchemaData> 
                 
                <SchemaData schemaUrl="https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/my_remote_schema.kml#TrailHeadTypeId">  <!-- external Schema  -->        
                  <SimpleData name="TrailHeadName">A remote place</SimpleData>         
                  <SimpleData name="TrailLength"> 12,000,000</SimpleData>         
                  <SimpleData name="ElevationGain"> 5555 </SimpleData>       
                </SchemaData>    
                
              </ExtendedData>
             
              <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>
            
            
            <Placemark id="11A1100" >
            
              <name> Club house </name>
            
              <ExtendedData>
            
                <Data name="field1">
                  <value>
                    1
                  </value>
                  
                  <displayName>
                    <![CDATA[
                      $[name]: <strong> My Hole Number [Data] </strong>
                    ]]>
                  </displayName>
                </Data>
                
                <Data name="field2">
                  <value>
                    234 ($[id])
                  </value>
                </Data>
                
                <Data name="field3">
                  <value>
                    YYYY
                  </value>
                </Data>
                
                <Data name="field4">
                  <value>
                    __geolink__   $[field3]
                  </value>
                </Data>
                
              </ExtendedData>
            
              <Point>
            
                <coordinates>
                
                  -111.956,33.5043
                  
                </coordinates>
                
              </Point>
          
            </Placemark>  
 
          </Document>
          
        </kml>  
        
      </iframe>
    
    </div>
 


my_remote_schema.kml:

  <?xml version="1.0" encoding="UTF-8"?>

  <kml xmlns="http://www.opengis.net/kml/2.2">

    <Document>
             
      <Schema name="REMOTE_TrailHeadType" id="TrailHeadTypeId">     
        <SimpleField name="TrailHeadName">       
          <displayName>
            <![CDATA[
              <span style="color:red;">External</span> <b>Trail Head Name</b>
            ]]>
          </displayName>     
        </SimpleField>     
        <SimpleField name="TrailLength">       
          <displayName>
            <![CDATA[
              <span style="color:red;">External</span> <i>Length in miles</i>
            ]]>
          </displayName>     
        </SimpleField>     
        <SimpleField name="ElevationGain">       
          <displayName>
            <![CDATA[
              <span style="color:red;">External</span> <i>Change in altitude</i>
            ]]>
          </displayName>     
        </SimpleField>   
      </Schema>
      
    </Document>
    
  </kml>
 


Video demo: