Saucony Jazz OG '81

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

<iframe  style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes"
  
  data-owlappscss= '{
    
    "link":
      " 
        https://fonts.googleapis.com/css?family=Train+One,
      "
    ,
    
    "internal":
      "
        .myrail1 {
          font-family: Train One ;
          color: red;  /* use the html color property */
          opacity:1;
          font-weight:bold;
          font-size:20px;
        }
        
        .myrail2 {
       
          color: red;  /* use the html color property */
          opacity:1;
          font-weight:bold;
          font-size:20px;
        }
          
      "
    }'
  
>


  <kml xmlns="http://www.opengis.net/kml/2.2">
    
    <Document>
       
      <Style id="tartan" >
        
        <LineStyle>
          
          <width>
            0 <!-- hide the kml standard default line style (white line) -->
          </width>
      
        </LineStyle>
         
        <PolyStyle>
        
          <richDecos>
          
            <inner>
            
              <patternTags>
              
                <append>
                  
                  <![CDATA[
                    <pattern patternUnits="userSpaceOnUse" width="22.5" height="22.5" patternTransform="rotate(90)">
                      <line x1="0" y="0" x2="0" y2="22.5" stroke-opacity="0.5" stroke="red" stroke-width="25" />
                    </pattern> 
                  ]]> 
                
                </append>
                
              </patternTags>
              
              <patternTags>
                <!-- second pattern -->
                <append>
                  
                  <![CDATA[
                    <pattern patternUnits="userSpaceOnUse" width="22.5" height="22.5" patternTransform="rotate(0)">
                      <line x1="0" y="0" x2="0" y2="22.5" stroke-opacity="0.8" stroke="blue" stroke-width="10" />
                    </pattern> 
                  ]]> 
                
                </append>
                
              </patternTags>
              
              <colorize>
              
                <color>
                
                  green
                
                </color>
                
              </colorize>
                
            </inner>
             
          </richDecos>
             
        </PolyStyle>
       
      </Style>
      
      <open>
        1
      </open>
      
      <Placemark>
        
        <styleUrl> #tartan </styleUrl>
        
        <Snippet>
          __geolink__ 
        </Snippet>
        
        <name> Scottish tartan </name>
        
        <Polygon>
        
          <outerBoundaryIs>
          
            <LinearRing>
            
              <coordinates>
              
                -3.297121411504197,55.98046609745844,0 -3.325466462666183,55.93382940365689,0 -3.282463315783097,55.90672892783305,0 -3.257535266566994,55.89549801526427,0 -3.207026096513417,55.89270937580468,0 -3.140078501657801,55.89166983008795,0 -3.13971064738336,55.89166966698424,0 -3.11172441277956,55.90774542107539,0 -3.11061958228313,55.90815723560712,0 -3.094341410176635,55.94444871282857,0 -3.121942744620552,55.9626839420971,0 -3.154205075387361,55.9804985100328,0 -3.181881629602868,55.99177918605851,0 -3.297121411504197,55.98046609745844,0
                
              </coordinates>
              
            </LinearRing>
            
          </outerBoundaryIs>
          
        </Polygon>
        
      </Placemark>
      
      <Placemark>
      
        <Style>
        
          <LineStyle>
          
            <color> FFb11eff </color>
            
            <width> 5 </width>
            
          </LineStyle>
          
          <PolyStyle>
          
            <color> FFb11eff </color>
            
          </PolyStyle>
          
          <LabelStyle>
          
            <scale> 2 </scale>
            
            <minZoom> 4 </minZoom>
              
            <maxZoom> 16 </maxZoom>
              
          </LabelStyle>
          
        </Style>
        
        <name>
        
          <![CDATA[
            
            The Pentagon
            
          ]]>
        
        </name>
        
        <description>
        
          <![CDATA[
          
            __geolink__: <a target="_blank" href="http://www.owlapps.net/owlapps_apps/article?id=20740978&lang=en" > wiki article here </a> 
          
          ]]>
          
        </description>
        
        <Snippet> Holed polygon </Snippet>
        
        <Polygon>
        
          <outerBoundaryIs>
          
            <LinearRing>
            
              <coordinates>
              
                -77.05788457660967,38.87253259892824,100 
                -77.05465973756702,38.87291016281703,100 
                -77.05315536854791,38.87053267794386,100 
                -77.05552622493516,38.868757801256,100 
                -77.05844056290393,38.86996206506943,100 
                -77.05788457660967,38.87253259892824,100
                
              </coordinates>
              
            </LinearRing>
            
          </outerBoundaryIs>
          
          <innerBoundaryIs>
          
            <LinearRing>
            
              <coordinates>
              
                -77.05668055019126,38.87154239798456,100 
                -77.05542625960818,38.87167890344077,100 
                -77.05485125901024,38.87076535397792,100 
                -77.05577677433152,38.87008686581446,100 
                -77.05691162017543,38.87054446963351,100 
                -77.05668055019126,38.87154239798456,100
                
              </coordinates>
              
            </LinearRing>
            
          </innerBoundaryIs>
         
        </Polygon>
    
      </Placemark>
      
      <Folder>
      
        <name>
          2 Railway styles
        </name>
        
        <open>
          1
        </open>
        
        <Placemark>
          
          <name>
            Fictional railway 1
          </name>
          
          <Snippet>
          
            <![CDATA[
              The beautiful <strong><a target="_blank" href="https://fonts.google.com/specimen/Train+One" >Train One</a></strong> Google Font! 
              <br/>
             
              Using the uppercase "H" letter in order to represent a railway!
            ]]>
            
          </Snippet>
          
          <LineString>
          
            <coordinates> -3.443172254880054,55.91941048474265,0 -3.77604088322737,55.79333547572146,0 -3.956220271387697,55.59916799266864,0  </coordinates>
          
          </LineString>
          
          <description>
          
            <![CDATA[
          
              __geolink__: railway style 1
            
            ]]>
          
          </description>
          
          <Style>
          
            <LineStyle>
            
            <width>
            
              0 <!-- hide the kml standard default line style (white line) -->
              
            </width>
                
              <richDecos>
               
                <raw>
                
                  <className>
                    myrail1 
                  </className>
                  
                  <content>
                    H
                  </content>
                  
                  <repeat>
                    16px
                  </repeat>
                  
                  <rotate>
                    1
                  </rotate>
                  
                </raw>
              
              </richDecos>
            
            </LineStyle>
            
          </Style>
        
        </Placemark>
        
        <Placemark>
          
          <name>
            Fictional railway 2
          </name>
          <Snippet>
          
            <![CDATA[
              Second way!
            ]]>
            
          </Snippet>
          
          <LineString>
          
            <coordinates>
              -3.203417775978882,55.85944425890822,0 -2.885780724115452,55.7629006592746,0 -2.520521981403813,55.65019968627099,0 -2.219402929148285,55.64049033708184,0
            </coordinates>
          
          </LineString>
          
          <description>
          
            <![CDATA[
              __geolink__: railway style 2
            ]]>
            
          </description>
 	        
          <Style>
          
            <LineStyle>
            
              <width>
                0 
              </width>
              
            
              <richDecos>
                
                <raw>
                
                  <minZoom> 10 </minZoom>
                  
                  <className>
                    myrail2 
                  </className>
                 
                  <content>
                    ▭  <!-- rectangle shape -->
                  </content>
                  
                  <repeat>
                    10px
                  </repeat>
                  
                  <rotate>
                    1
                  </rotate>
                  
                </raw>
              
              
                <line>
                
                  <color>
                    black
                  </color>
                  
                  <strokeWidth>
                    20
                  </strokeWidth>
                  
                  <lineCap>
                    butt
                  </lineCap>
                  
                  <lineJoin>
                    arcs
                  </lineJoin>
                
                </line>
                 
                <line>
                
                  <color>
                    white
                  </color>
                  
                  <strokeWidth>
                    25
                  </strokeWidth>
                  
                  <lineCap>
                    butt
                  </lineCap>
                  
                  <lineJoin>
                    arcs
                  </lineJoin>
                
                </line>
                
              </richDecos>
            
            </LineStyle>
            
          </Style>
        
        </Placemark>
        
      </Folder>
      
    </Document>
    
  </kml>
    
</iframe>


Video demo: