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 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 style="margin-left:10px;display:block;height:97vh;width:97vw;border:none;background:black;"  name="Customize Bing Maps layers"  data-owlappslayers = '[
     
    {
      "type":"wms",
      "name":"Bing Maps Game Boy style 1",
      "url" : "https://www.owlapps.net/test_gbfilter_bmaps.php?srs=EPSG:4326&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}",
      "key":"AgtoAXIaao9KgMcr-0lbb33ZsUDcJr64qsq4pZSqPOJDGwTstYj2oKOkae0rf9e9",
      "checked": "yes", 
      "attribution" : "Nintendo"
    },
    {
      "type":"wms",
      "name":"Bing Maps Game Boy style 2",
      "url" : "https://www.owlapps.net/test_gbfilter_bmaps.php?srs=EPSG:4326&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}",
      "gbstyle": 2,
      "key":"AgtoAXIaao9KgMcr-0lbb33ZsUDcJr64qsq4pZSqPOJDGwTstYj2oKOkae0rf9e9",
      "attribution" : "Nintendo"
    }
  ]'  


  data-owlappscss= '{
    
    "link":
      "
        https://fonts.googleapis.com/css?family=VT323,
      "
    ,
    
    "internal":
      "
        .pixelate {
          font-family:VT323;
        } 
      "
    }'
   
  style = "border:none;" data-owlappsmap = "yes" >

    <?xml version="1.0" encoding="UTF-8"?>
      
      <kml xmlns="http://www.opengis.net/kml/2.2">
       
      <Document>
      
        <open> 1 </open>
        
        <Snippet>
        
          Please don't use my Bing Maps API key, create and use your own key:
          
          <![CDATA[
            <br/>
            <a title="How to get my own BMaps API Key?" target="_blank" href="https://www.google.com/search?q=create+bing+maps+api+key" > Create a Microsoft Bing Maps API Key</a>
          ]]> 
        
        </Snippet>
         
        <Placemark>
        
          <name>
            
            The Awakening Spot
            
          </name>
          
          <Point>
          
            <coordinates>
            
              55.54694,-21.36889
              
            </coordinates>
            
          </Point>
          
          <description>
          
            <![CDATA[
            
              __geolink__:<br/><br/>
              <iframe id="odysee-iframe" width="100%" height="315" src="https://odysee.com/$/embed/@pewdiepie:7e/The-Legend-of-Zelda---Link's-Awakening---Full-OST-w_-Timestamps:6?r=CVeDJMhSFhsHsUQfKEpY8VrcFVFBpotr" allowfullscreen />
            ]]> 
            
          </description>
          
          <Style>
          
            <IconStyle>
            
              <scale>
              
                1.2 <!--  make the height close to pixpin.png height (60 pixels) in order to show the popup message and not cover the pixpin.gif icon  -->
                
              </scale>
              
              <color>
                
                00000000 <!-- set it invisible -->
                
              </color>
              
              <richDecos>
              
                <img>
                
                  <anchor>
                  
                    <hotSpot x="0.5" xunits="fraction" y="0" yunits="pixels"/>
                  
                  </anchor>
                
                  <url>
                  
                    /modules/owlapps_apps/embedmap/img/pixpin.gif
                    
                  </url>
                  
                  <pixelSize>
                  
                    50px
                    
                  </pixelSize>
                
                </img>
              
                <label>
                
                  <color>
                  
                    #90EE90
                    
                  </color>
                
                  <anchor>
                  
                    <hotSpot x="0.5" xunits="fraction" y="0.7" yunits="fraction"/>
                  
                  </anchor>
                
                  <content>
                  
                    $[name]
                    
                  </content>
                  
                  <scale>
                  
                   2
                  
                  </scale>
                  
                  <className>
                  
                    pixelate
                    
                  </className>
                
                </label>
                 
              </richDecos>
            
            </IconStyle>
          
          </Style>
          
        </Placemark>
        
      </Document>
      
    </kml>
    
  </iframe>  
  


test_gbfilter_bmaps.php:
  <?php
    
    /*
      
      This code is not freely accessible,
      its cost is 14 euro payable via Paypal.
      Contact first: owlappsnet@gmail for further clarification.
 
      
    */
      
  ?>
  
Video demo: