Cette carte interactive a été générée grâce à l'app embedMap : https://www.owlapps.net/modules/owlapps_apps/embedmap
<script src = "https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js" language="javascript" defer></script> <div name="Dotted and dashed lines" data-owlappsmaplyrgroup = "yes"> <iframe name= "Different ways" style = "border:none;width:100%;height:100%;min-height:400px;" data-owlappscss= '{ "internal": " .setoffset { stroke-dashoffset: 0px ; } .dotted { stroke-dasharray :1, 80 !important; stroke: green !important; stroke-linecap:round !important; stroke-linejoin:round !important; stroke-width:30px; } " }' data-owlappsmap = "yes" > <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <Snippet> <![CDATA[ See: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank" >https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray</a> ]]> </Snippet> <Style id="dashed" > <LineStyle> <width> 0 <!-- set the default appearence to 0 (zero) in order to hide it --> </width> <richDecos> <line> <color> black </color> <strokeWidth> 15 </strokeWidth> <dashArray> 50, 20 </dashArray> </line> </richDecos> </LineStyle> </Style> <Placemark> <name> Circle and rectangle</name> <Style> <LineStyle> <richDecos> <raw> <content> <![CDATA[ <div style="margin-top:0px;" > <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="100"> <circle cx="25" cy="30" r="20" fill="blue" /> <rect width="25" height="20" x="12.5" y="70" fill="salmon" /> </svg> </div> ]]> </content> <repeat> 100px </repeat> <anchor> <hotSpot x="0.5" xunits="fraction" y="-0.05" yunits="fraction"/> </anchor> <rotate> true </rotate> </raw> </richDecos> </LineStyle> </Style> <LineString> <coordinates> 2.0480218,48.8460185,0 2.1419206,48.8263582,0 1.986052,48.8122297,0 1.9633927,48.7974188,0 </coordinates> </LineString> </Placemark> <Folder> <name> Dotted </name> <open> 1 </open> <Placemark> <name> Dot on dot </name> <LineString> <coordinates> 16.891479,36.465472 20.610352,36.49639 </coordinates> </LineString> <Style> <LineStyle> <width> 0 </width> <!-- set the default appearence to 0 (zero) in order to hide it --> <richDecos> <line> <strokeWidth> 20 </strokeWidth> <color> #FFFF00 <!-- yellow color --> </color> <dashArray> 1, 50 </dashArray> <lineCap> round </lineCap> <lineJoin> arcs </lineJoin> </line> <line> <strokeWidth> 40 </strokeWidth> <color> red </color> <dashArray> 1, 50 </dashArray> <lineCap> round </lineCap> <lineJoin> arcs </lineJoin> </line> </richDecos> </LineStyle> </Style> </Placemark> <Placemark> <name> Dots from Css </name> <Style> <LineStyle> <width> 0 </width> <!-- set the default appearence to 0 (zero) in order to hide it --> <richDecos> <line> <className> dotted </className> </line> </richDecos> </LineStyle> </Style> <LineString> <coordinates> 16.864014,35.875698 20.615845,35.875698 </coordinates> </LineString> </Placemark> <Placemark> <name> Long dots and doted-dashed </name> <Style> <LineStyle> <width> 0 </width> <!-- set the default appearence to 0 (zero) in order to hide it --> <richDecos> <raw> <content> <![CDATA[ <span style="font-size:4em;"> i </span> ]]> </content> <anchor> 40, 30 </anchor> <repeat> 40px </repeat> <rotate> true </rotate> </raw> <line> <strokeWidth> 20 </strokeWidth> <className> setoffset </className> <color> #FFFF00 <!-- yellow color --> </color> <dashArray> 30, 35 </dashArray> <lineCap> round </lineCap> <lineJoin> arcs </lineJoin> </line> </richDecos> </LineStyle> </Style> <LineString> <coordinates> 16.408081,36.985003 19.857788,36.809285 </coordinates> </LineString> </Placemark> </Folder> <Folder> <name> Dashed </name> <open> 1 <!-- true --> </open> <Placemark> <styleUrl> #dashed </styleUrl> <name> Dashed line </name> <LineString> <coordinates> 16.809082,35.46067 21.654053,35.469618 </coordinates> </LineString> </Placemark> <Placemark> <styleUrl> #dashed </styleUrl> <Style> <LineStyle> <richDecos> <line> <color> brown </color> <dashArray> 0 0 </dashArray> </line> <label> <scale> 2 </scale> <content> $[name] </content> </label> <label> <color> magenta </color> <scale> 1.5 </scale> <anchor> 0, 30 </anchor> <content> but with a label </content> </label> </richDecos> </LineStyle> </Style> <name> Not dashed line </name> <LineString> <coordinates> 16.2323,37.4138 18.314209,37.548933 20.143433,37.182202 </coordinates> </LineString> </Placemark> </Folder> </Document> </kml> </iframe> </div>