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>
  <iframe data-owlappslayers = '[
    { 
      "type":"wms",
      "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
      "name":"<strong>Invisible</strong> layer",
      "legend":"https://www.owlapps.net/test_legend_svg.php?text1=Hi%20guys!&text2=Salut%20les%20Hulottes!",
      "attribution": "OSM",
      "opacity": 0,
      "checked": "yes"
    }

  ]'   style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes" >

  <?xml version="1.0" encoding="UTF-8"?>
    <kml xmlns="http://www.opengis.net/kml/2.2">
    </kml>
  </iframe>  
  

  <?php
    header("Content-type: image/svg+xml; charset=UTF-8"); /* very important: SVG is a XML language*/
    
    header("Expires: Tue, 03 Jul 2001 06:00:00 GMT");
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    header("Connection: close");
    

    /* very important */
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

    echo '<?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="550" height="700"  overflow="auto" >
      <style>
        .small {
          font: italic 13px sans-serif;
        }
        .heavy {
          font: bold 30px sans-serif;
          fill: red;
        }

        /* Note that the color of the text is set with the    *
         * fill property, the color property is for HTML only */
        .Rrrrr {
          font: italic 40px serif;
          fill: red;
        }
      </style>
   
      <text x="0" y="35" class="heavy">' .  $_GET["text1"] . '</text>
       
      <text x="0" y="55" class="small">' .  $_GET["text2"] . '</text>
      
      <text x="0" y="95" class="small">
        
        This PHP file produces a .SVG file as a map legend instead of
        
      </text>
      
      <text x="0" y="115" class="small">
        .JPG/PNG/BMP/GIF/etc image format.
      </text>
      
      
      
      <text x="0" y="135" class="small">
        The layer of this current map legend is a OpenStreetMap WMS and
      </text>
      <text x="0" y="155" class="small">
        its opacity key is set to 0 (zero) so it's invisible!
      </text>
      
      <text x="0" y="175" class="small">
        See the <tspan font-weight="bold" >data-owlappslayers</tspan> property of your iframe!
      </text>
      <text x="0" y="205" class="small">
        Soon (no date determined at the time of writing this message) we will use an 
      </text>
      <text x="0" y="225" class="small">
         invisible layer in order to add click sensitivity and query functions of
      </text>
      <text x="0" y="245" class="small">
        the GetFeatureInfo protocol.
      </text>
      
      <text x="0" y="305" class="small">
        Simple random SVG tags:
      </text>
       

      <g id="columnGroup"    transform=" translate(0, 325)" >
        <rect x="65" y="10" width="75" height="110" fill="gainsboro"/>
        <rect x="265" y="10" width="75" height="110" fill="gainsboro"/>

        <text x="30" y="30" font-size="18px" font-weight="bold" fill="crimson">
           <tspan x="30" dy="1.5em">Q1</tspan>
           <tspan x="30" dy="1em">Q2</tspan>
           <tspan x="30" dy="1em">Q3</tspan>
           <tspan x="30" dy="1em">Q4</tspan>
        </text>

        <text x="100" y="30" font-size="18px" text-anchor="middle">
           <tspan x="100" font-weight="bold" fill="crimson">Sales</tspan>
           <tspan x="100" dy="1.5em">$ 223</tspan>
           <tspan x="100" dy="1em">$ 183</tspan>
           <tspan x="100" dy="1em">$ 277</tspan>
           <tspan x="100" dy="1em">$ 402</tspan>
        </text>

        <text x="200" y="30" font-size="18px" text-anchor="middle">
           <tspan x="200" font-weight="bold" fill="crimson">Expenses</tspan>
           <tspan x="200" dy="1.5em">$ 195</tspan>
           <tspan x="200" dy="1em">$ 70</tspan>
           <tspan x="200" dy="1em">$ 88</tspan>
           <tspan x="200" dy="1em">$ 133</tspan>
        </text>

        <text x="300" y="30" font-size="18px" text-anchor="middle">
           <tspan x="300" font-weight="bold" fill="crimson">Net</tspan>
           <tspan x="300" dy="1.5em">$ 28</tspan>
           <tspan x="300" dy="1em">$ 113</tspan>
           <tspan x="300" dy="1em">$ 189</tspan>
           <tspan x="300" dy="1em">$ 269</tspan>
        </text>
      </g>
   
      <text x="0" y="500" font-size="10px">
        <tspan x="0">There are no "table"-type elements in SVG, but you can</tspan>
        <tspan x="0" dy="1em">achieve a similar visual and interactive effect using the</tspan>
        <tspan x="0" dy="1em">"text" and "tspan" elements.</tspan>
        <tspan x="0" dy="1.5em">On the left are 2 such tabular representations, the top</tspan>
        <tspan x="0" dy="1em">one with columnar layout (that is, the user can select all</tspan>
        <tspan x="0" dy="1em">the text in a column), and the bottom table with row-</tspan>
        <tspan x="0" dy="1em">based layout.</tspan>
        <tspan x="0" dy="1.5em">An obvious disadvantage to this approach is that you</tspan>
        <tspan x="0" dy="1em">cannot create a table with both vertical and horizontal</tspan>
        <tspan x="0" dy="1em">selectivity.</tspan>
        <tspan x="0" dy="1.5em">A less obvious flaw is that creating a tabular appearance</tspan>
        <tspan x="0" dy="1em">does not confer the semantic qualities of a real table,</tspan>
        <tspan x="0" dy="1em">which is disadvantageous to accessibility and is not</tspan>
        <tspan x="0" dy="1em">conducive to rich interactivity and navigation.</tspan>
      </text>
      
    </svg>
    ';
    
  ?>