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: