Voilà le code HTML d'intégration correspondant à la carte interactive ci-dessus !
caller.html (contains the "caller.kml")
<script onerror = "window.location.href='http://www.owlapps.net/modules/owlapps_apps/embedmap'" src = 'https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js' language="javascript" defer></script>
<iframe name="Combining &lt;Style> and &lt;StyleMap> tags" style = "border:none;width:100%;min-height:550px;height:100%;" data-owlappsmap = "yes" >
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Snippet>
<![CDATA[
<div style="padding:5px;background-color:SandyBrown;width:99%;overflow:auto;min-width:250px;height:100%;" > Style and StyleMap tags that are local and from external KML files </div>
]]>
</Snippet>
<StyleMap id= "c_stl1" >
<Pair>
<key>
normal
</key>
<styleUrl>
https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/intermed.kml#i_stl1
</styleUrl>
</Pair>
</StyleMap>
<StyleMap id= "c_stl2" >
<Pair>
<key>
normal
</key>
<styleUrl>
#c_stl3
</styleUrl>
</Pair>
</StyleMap>
<StyleMap id= "c_stl3" >
<Pair>
<key>
normal
</key>
<styleUrl>
https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/intermed2.kml#i2_stl2
</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>
My polygon
</name>
<styleUrl>
#c_stl1
</styleUrl>
<Style>
<LineStyle>
<richDecos>
<line>
<color>
blue
</color>
</line>
</richDecos>
</LineStyle>
</Style>
<description><![CDATA[ ]]> </description>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-4.11091350546312,48.0169631752424,0 -4.111968311330662,48.016795512751,0 -4.112996287467845,48.01619875066696,0 -4.116335978996061,48.01511916621342,0 -4.117159235675508,48.01467071929815,0 -4.119193533073303,48.01319306336958,0 -4.12043173605444,48.01259246629866,0 -4.122260362220679,48.01126397190885,0 -4.123072641956552,48.01067382881821,0 -4.123865921469071,48.00979882508071,0 -4.124465310277188,48.00921407507309,0 -4.126087904227759,48.00803525945474,0 -4.127516295993536,48.00714668961566,0 -4.128133689232359,48.00684729815487,0 -4.13001411102086,48.00637606311322,0 -4.131923178138149,48.00633157933893,0 -4.132983782815333,48.00630685339955,0 -4.134883077000878,48.00612008919195,0 -4.137408656503161,48.0057762396606,0 -4.137822914906741,48.00562413402791,0 -4.139711746731609,48.0052951711824,0 -4.141973814208281,48.00424572586044,0 -4.142175707135008,48.00409868304075,0 -4.142771138045336,48.00351558746947,0 -4.144597144993872,48.00233505008751,0 -4.145786416942792,48.00117012535902,0 -4.146551359132084,48.00001585956961,0 -4.146541058878893,47.99987411111024,0 -4.147124737568923,47.99915063782761,0 -4.147000958581813,47.99745122814895,0 -4.14693912816083,47.99660213599185,0 -4.145789080853105,47.99535408548447,0 -4.14444892348012,47.99439447445729,0 -4.143794395425354,47.99412677417521,0 -4.142898265334432,47.99344035275509,0 -4.141801305061184,47.99290033077803,0 -4.140714746019643,47.9925016146712,0 -4.139367461411556,47.99140251809484,0 -4.137790236181256,47.99002715261097,0 -4.137730967697575,47.98918168834292,0 -4.135522705950444,47.98782289826093,0 -4.134630209408543,47.98713896097919,0 -4.133517560924616,47.98631957809636,0 -4.133297037293929,47.98618387367914,0 -4.132386232835266,47.98521944424321,0 -4.131475984356604,47.98425554680449,0 -4.131255687961758,47.98412000295551,0 -4.130566290746673,47.98329217911074,0 -4.130317503480795,47.98273558783124,0 -4.129839201492089,47.98190349388467,0 -4.129179082833224,47.98149744262432,0 -4.128481348996407,47.98053067005844,0 -4.128041557515404,47.98026017011177,0 -4.126750762944904,47.9798692535771,0 -4.125450994151839,47.97933832667849,0 -4.124133168916632,47.97852749456192,0 -4.12304471328064,47.97799205658596,0 -4.121335017319286,47.97761142971894,0 -4.119424602487776,47.9773756866529,0 -4.117925981520804,47.9769902577855,0 -4.112828440066098,47.97626849156111,0 -4.111155966217864,47.97644739337907,0 -4.108423984012862,47.9765108225475,0 -4.107793534049927,47.97652544938485,0 -4.101901114830781,47.97652193607539,0 -4.10000990637783,47.97656568002537,0 -4.097698452819913,47.9766190961982,0 -4.094966760001116,47.9766821555932,0 -4.092655346463615,47.97673545537504,0 -4.091184453666413,47.9767693457091,0 -4.090133819203704,47.97679353989498,0 -4.088873062594622,47.97682255837609,0 -4.084880682175273,47.97691434600598,0 -4.084460432765211,47.97692399865086,0 -4.081938940679274,47.97698187768319,0 -4.080678196685531,47.97701079353615,0 -4.077953888994394,47.97721324902134,0 -4.076490201810357,47.97738679920079,0 -4.075439493144865,47.97741084197721,0 -4.07357669564735,47.97801370567986,0 -4.072750158201075,47.97831279410843,0 -4.070886431726795,47.97891588931984,0 -4.069856173488344,47.97935991689025,0 -4.069042871726127,47.97993930900576,0 -4.068229294227617,47.98051887697402,0 -4.067001559241791,47.98124838034127,0 -4.066608144866923,47.98181875441266,0 -4.06499929450365,47.98340018932724,0 -4.063789988197008,47.98455204314936,0 -4.063810153187015,47.98497338646465,0 -4.063034616321698,47.98639776918457,0 -4.062653277530893,47.98725101828065,0 -4.062495891884927,47.98838131968017,0 -4.062140821827721,47.98979880298756,0 -4.06216080487355,47.99022138761691,0 -4.0622207826434,47.99148974674067,0 -4.062227449471579,47.9916307311573,0 -4.062320840990608,47.99360569513198,0 -4.062387613013618,47.99501773218989,0 -4.062434385121405,47.996006828029,0 -4.062461123791063,47.99657227404235,0 -4.062487871010402,47.99713790077841,0 -4.063373742952685,47.99796743154912,0 -4.064266831755487,47.99893892181217,0 -4.065372010493932,47.99990612971941,0 -4.06625251431035,48.00059525121427,0 -4.067605089946433,48.00226762210852,0 -4.068493663278627,48.00309957645453,0 -4.069396684780102,48.00421590711464,0 -4.069848427003721,48.00477433911369,0 -4.070978460211049,48.00617120039665,0 -4.071692453467287,48.00772114325332,0 -4.071961436589573,48.00885496280603,0 -4.072025515558524,48.01013683861926,0 -4.072054010858064,48.01070686149702,0 -4.072132422986684,48.01227537825635,0 -4.072153820864104,48.01270339853664,0 -4.072225186786456,48.01413088872723,0 -4.072289468253635,48.01541662340195,0 -4.072325201510298,48.01613132685525,0 -4.072814938196883,48.01740881528026,0 -4.073085098125031,48.01854892710314,0 -4.07420679154332,48.01967033455465,0 -4.07467601199807,48.02052037977872,0 -4.076004585790741,48.02149477716376,0 -4.076907925731072,48.02247946477113,0 -4.078039728893722,48.02374701263575,0 -4.080260903870868,48.02542225847858,0 -4.082453950625883,48.02652370936347,0 -4.083345375776498,48.02722346552142,0 -4.084221803936194,48.02763563521474,0 -4.085517498579981,48.02789416448463,0 -4.085952037933012,48.02802833447369,0 -4.087445796914909,48.02799408378667,0 -4.091302916424007,48.02819387477478,0 -4.093018314912752,48.02829864913893,0 -4.09472571637001,48.02825942053187,0 -4.096646551158846,48.02821526539833,0 -4.097927115085824,48.02818581508215,0 -4.099207684583246,48.02815635392542,0 -4.10111167841936,48.02782420256364,0 -4.102375172486172,48.02750682650968,0 -4.104048084667905,48.02689186804173,0 -4.104884326610307,48.02658445534587,0 -4.105899191657977,48.02569692569206,0 -4.107322602735603,48.02451257865333,0 -4.108318761007873,48.0233388304644,0 -4.108496927506337,48.0227596194681,0 -4.108879345345663,48.02203218576031,0 -4.109244062475231,48.02101821041189,0 -4.109617344092796,48.02014814374662,0 -4.109795124564251,48.01956997547335,0 -4.110797818505487,48.01854265090325,0 -4.110992982658016,48.01825134418336,0 -4.111595998088026,48.01766395161372,0 -4.11091350546312,48.0169631752424,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
<ExtendedData>
<Data name="width">
<displayName>
<![CDATA[
<span style="color:red;" ><b> Width </b></span>
]]>
</displayName>
<value>
15
</value>
</Data>
</ExtendedData>
</Placemark>
<Placemark>
<name><![CDATA[ Polygon, line and point ]]></name>
<styleUrl> #c_stl2 </styleUrl>
<Style>
<IconStyle>
<richDecos>
<!--
Remove or disable this richDecos tag and the label color of these points
will be black because of the Style in the final.kml#f_stl2 StyleMap.
-->
<label>
<content>
<![CDATA[$[name] overridden!]]>
</content>
<anchor> 0,20 </anchor>
<scale>2</scale>
<color> red </color>
</label>
</richDecos>
</IconStyle>
</Style>
<description> __geolink__ </description>
<MultiGeometry>
<Point>
<coordinates>
5.075614142544174,47.25905536672283,0
</coordinates>
</Point>
<Point>
<coordinates>
5.07575,47.25908
</coordinates>
</Point>
<LineString>
<coordinates>
5.075572800690813,47.25913630158269,0 5.075689639317787,47.2589606812192,0
</coordinates>
</LineString>
<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>
</MultiGeometry>
</Placemark>
</Document>
</kml>
</iframe>
intermed.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<StyleMap id= "i_stl1" >
<Pair>
<key>
normal
</key>
<styleUrl>
#i_stl3
</styleUrl>
<Style id= "i_stl2">
<LineStyle>
<color>
FFFFFFFF <!-- white color -->
</color>
</LineStyle>
</Style>
</Pair>
</StyleMap>
<StyleMap id= "i_stl3" >
<Pair>
<key>
normal
</key>
<styleUrl>
https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/final.kml#f_stl1
</styleUrl>
<Style>
<LineStyle>
<width>
<!--
the $[width] substitute card gets the value of the Data (name = "width")
of the ExtendedData from the Placemark named "My polygon" in caller.html
-->
$[width]
</width>
</LineStyle>
</Style>
</Pair>
</StyleMap>
</Document>
</kml>
intermed2.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<StyleMap id= "i2_stl2" >
<Pair>
<key>
normal
</key>
<styleUrl>
https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/final.kml#f_stl2
</styleUrl>
</Pair>
</StyleMap>
<StyleMap id= "i2_stl3" >
<Pair>
<key>
normal
</key>
<styleUrl>
#i2_stl1
</styleUrl>
</Pair>
</StyleMap>
<Style id= "i2_stl1">
<PolyStyle>
<outline> 0 </outline>
<richDecos>
<inner>
<patternTags>
<append>
<![CDATA[
<pattern patternUnits="userSpaceOnUse" width="22.5" height="22.5" patternTransform="rotate(45)">
<line x1="0" y="0" x2="0" y2="22.5" stroke-opacity="1" stroke="green" stroke-width="25" />
</pattern>
]]>
</append>
</patternTags>
<colorize>
<color> white </color>
</colorize>
</inner>
</richDecos>
</PolyStyle>
</Style>
</Document>
</kml>
final.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id= "f_stl1">
<PolyStyle>
<color>
FF0000FF
</color>
<richDecos>
<outer>
<label>
<content>
$[name]
</content>
<color>
black
</color>
</label>
</outer>
</richDecos>
</PolyStyle>
</Style>
<StyleMap id= "f_stl2" >
<Pair>
<key>
normal
</key>
<styleUrl>
https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/intermed2.kml#i2_stl3
</styleUrl>
<Style>
<IconStyle>
<richDecos>
<label>
<content>
$[name]
</content>
<anchor>
0,10
</anchor>
<scale>
2
</scale>
<color>
black
</color>
</label>
</richDecos>
</IconStyle>
<LineStyle>
<richDecos>
<line>
<color> black </color>
<dashArray> 3, 8 </dashArray>
</line>
</richDecos>
</LineStyle>
</Style>
</Pair>
</StyleMap>
</Document>
</kml>
Video demo:
VIDEO