[Test] Base 5.1.0 int

by Francisco

HTML

<link rel="stylesheet" href="http://publicacion.i-administracion.junta-andalucia.es/mapea/assets/css/mapea-5.1.0.ol.min.css">
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/mapea-5.1.0.ol.min.js"></script>
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/configuration-5.1.0.js"></script>
<link rel="stylesheet" href="http://publicacion.i-administracion.junta-andalucia.es/mapea/plugins/printer/printer-2.0.0.min.css">
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/plugins/printer/printer-2.0.0.ol.min.js"></script>
<!--<button id="osmButton" onclick="verOSM()">
OSM
</button>-->
<button id="sateliteButton1" onclick="verCapa('worldImagery')">
ESRI World Imagery
</button>
<button id="sateliteButton2" onclick="verCapa('worldStreetMap')">
ESRI World Street Map
</button>
<button id="worldPhisycalMapButton" onclick="verCapa('worldPhysicalMap')">
ESRI World Physical Map
</button>
<button id="sateliteButton4" onclick="verCapa('worldTopoMap')">
ESRI World Topo Map
</button>
<br>
<button id="sateliteButton3" onclick="verCapa('ignRaster')">
IGN Raster
</button>
<button id="ignPnoaButton" onclick="verCapa('IGNPnoa')">
IGN PNOA
</button>
<button id="ignBaseGrisButton" onclick="verCapa('IGNBaseGris')">
IGN Base Gris
</button>
<button id="ignBaseSinFondoButton" onclick="verCapa('IGNBaseTodoSinFondo')">
IGN Base Sin Fondo
</button>
<button id="ignBaseTodoButton" onclick="verCapa('IGNBaseTodo')">
IGN Base Todo
</button>

<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

//let capasBase = [];

let capas = new Map();

var worldImagery = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS?",
    name: "World_Imagery",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Imagery",
    transparent: false
  });
capas.set('worldImagery',worldImagery);

var worldStreetMap = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/WMTS?",
    name: "World_Street_Map",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Street_Map",
    transparent: false
  });
capas.set('worldStreetMap',worldStreetMap);

var worldPhysicalMap = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer/WMTS?",
    name: "World_Physical_Map",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Physical_Map",
    transparent: false
  });
capas.set('worldPhysicalMap',worldPhysicalMap);
  
var worldTopoMap = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS?",
    name: "World_Topo_Map",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Topo_Map",
    transparent: false
  });
capas.set('worldTopoMap',worldTopoMap);

var ignRaster = new M.layer.WMTS({
    url: "http://www.ign.es/wmts/mapa-raster?",
    name: "MTN",
    matrixSet: "GoogleMapsCompatible",
    legend: "IGN Raster",
    transparent: false
  });
capas.set('ignRaster',ignRaster);

 var IGNPnoa = new M.layer.WMTS({
    url: "http://www.ign.es/wmts/pnoa-ma?",
    name: "OI.OrthoimageCoverage",
    matrixSet: "GoogleMapsCompatible",
    legend: "PNOA",
    transparent: false
  });
capas.set('IGNPnoa',IGNPnoa);

  var IGNBaseGris = new M.layer.WMTS({
      url: "http://www.ign.es/wmts/ign-base?",
      name: "IGNBase-gris",
      matrixSet: "GoogleMapsCompatible",
      legend: "IGNBase-gris",
    transparent: false
    }
 ...