Cette carte interactive a été générée grâce à l'app embedMap : https://www.owlapps.net/modules/owlapps_apps/embedmap






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

  
<script src = 'https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js' language="javascript" defer></script>
 
<div style="display:block;margin-left:auto;margin-right:auto;text-align:center;"> 

  <iframe  style = "border:1px solid lightgrey;height:60vh;width:60vw;min-height:250px;min-width:350px;" data-owlappsmap = "yes" 

  data-owlappslayers = '[
    { 
       
      "type":"wms",
      "checked":"yes",
      "attribution" : ", Carte © IGN-F/Geoportail",
      "name":"PLAN IGN V2",
      "legend": "https://data.geopf.fr/annexes/ressources/legendes/LEGEND.jpg",
      "url": "https://data.geopf.fr/wmts?VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
      "format": "image/png",
      "service": "WMTS",
      "request": "GetTile",
      "style": "normal"
    }
  ]'

  >

    <?xml version="1.0" encoding="UTF-8"?>

    <kml xmlns="http://www.opengis.net/kml/2.2">

      <Folder>
      
      
        <Snippet>
          <![CDATA[
            WMS config of the Géoplateforme PLAN IGN V2 layer (GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2) written from :
            <br/>
            <a target="_blank"  href="https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities" >https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities</a>
            
            <br/><br/>
            Config:<br/>
            <pre>
    { 

    "type":"wms",
    "checked":"yes",
    "attribution" : ", Carte © IGN-F/Géoplateforme",
    "name":"PLAN IGN V2",
    "legend": "https://data.geopf.fr/annexes/ressources/legendes/LEGEND.jpg",
    <span style="color:red;" >"url": "https://data.geopf.fr/wmts?VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
    "format": "image/png",
    "service": "WMTS",
    "request": "GetTile",
    "style": "normal"</span>
    }
            </pre>  
           
          ]]>
        </Snippet>
        
        <open> true </open>
        
        <Placemark>
        
          <name>  Lyon </name>
           
          <Snippet>
          
            <![CDATA[
              Article on <a href="https://www.owlapps.net/owlapps_apps/articles_around?lat=45.7578&lon=4.8322&lang=en" target="_blank" >Lyon</a>  
            ]]>
            
          </Snippet>

          <Point>
            <coordinates>4.8322,45.7578</coordinates>
          </Point>
          
        </Placemark>
        
      </Folder>
      
    </kml>  

  </iframe>

</div> 
  


Video demo: