<!DOCTYPE html>
<html style="height:100%;margin:0;padding:0;">
<head>
  <title>Tests WMTS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./leaflet/leaflet.css" />
  <!-- <script src="./leaflet/Proj4Leaflet-1.0.1/lib/leaflet/leaflet.js"></script>
  <script src="./leaflet/Proj4Leaflet-1.0.1/lib/proj4.js"></script>
  <script src="./leaflet/Proj4Leaflet-1.0.1/src/proj4leaflet.js"></script> -->
   <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
   <script src="./leaflet/leaflet-hash.js"></script>
   <!-- <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> -->
  <style type="text/css">
  .leaflet-tile-container { pointer-events: auto; }
  </style>
</head>
  <body style="height:100%;margin:0;padding:0;">
    <div id="map" style="height:100%"></div>
    <script>
    var map = L.map('map').setView([49.72, 5.57], 16);

    var basemaps = {
        cyclosm: L.tileLayer('https://{s}.tiles.champs-libres.be/cyclosm/{z}/{x}/{y}.png', {
            subdomains: "abc",
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 20
        }),

        ORTHO: L.tileLayer.wms('https://geoservices.wallonie.be/arcgis/services/IMAGERIE/ORTHO_2019/MapServer/WMSServer?', {
            attribution: '&copy; SPW',
            layers: '0',
            format: 'image/png',
            transparent: true,
        }),

        PDS: L.tileLayer.wms('https://geoservices.wallonie.be/arcgis/services/AMENAGEMENT_TERRITOIRE/PDS/MapServer/WMSServer?', {
            attribution: '&copy; SPW',
            layers: '2',
            format: 'image/png',
            transparent: true,
            minZoom: 12
        }),

        ALEA: L.tileLayer.wms('https://geoservices.wallonie.be/arcgis/services/EAU/ALEA_INOND/MapServer/WMSServer?', {
            attribution: '&copy; SPW',
            layers: ['1', '2'],
            format: 'image/png',
            transparent: true,
        }),

        ANC_FORET: L.tileLayer.wms('https://geoservices.wallonie.be/arcgis/services/FORET/FORETANC/MapServer/WMSServer?', {
            attribution: '&copy; SPW',
            layers: '1',
            format: 'image/png',
            transparent: true,
            minZoom: 13
        }),

        COUV_FORET_ANC: L.tileLayer.wms('https://geoservices.wallonie.be/arcgis/services/FORET/FORETANC/MapServer/WMSServer?', {
            attribution: '&copy; SPW',
            layers: '0',
            format: 'image/png',
            transparent: true,
            minZoom: 13
        }),

        SOLS: L.tileLayer.wms('https://geoservices.wallonie.be/arcgis/services/SOL_SOUS_SOL/CNSW/MapServer/WMSServer?', {
            attribution: '&copy; SPW',
            layers: '1',
            format: 'image/png',
            transparent: true,
            minZoom: 8
        }),



        //https://wxs.ign.fr/{apiKey}/geoportail/wmts?&REQUEST=GetTile&SERVICE=WMTS
        //&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg
        //&LAYER={layerName}&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",


        WMTS: L.tileLayer(
            'https://geoservices.wallonie.be/arcgis/rest/services/IMAGERIE/ORTHO_LAST/MapServer/WTMS/tile/1.0.0/?' +
            "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
            "&STYLE=default" +
            "&TILEMATRIXSET=default028mm" +
            "&FORMAT=image/jpeg"+
            "&LAYER=IMAGERIE_ORTHO_LAST"+
            "&TILEMATRIX={z}" +
            "&TILEROW={y}" +
            "&TILECOL={x}",
            {
            attribution: '&copy; SPW',
            transparent: true,
            tileSize : 512
        })
        // WMTS: L.tileLayer(
        //     'http://geoservices.wallonie.be/arcgis/rest/services/IMAGERIE/ORTHO_2019/MapServer/tile/{z}/{x}/{y}', {
        //     attribution: '&copy; SPW',
        //     transparent: true,
        //     tileSize : 512
        // })
    }


    map.setView([50.5, 5.57], 10);

    L.control.layers(basemaps).addTo(map);

    var hash = L.hash(map);

    </script>
  </body>
</html>