Ejemplo MVT

        
        
        

<!DOCTYPE html>         
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="cnig" content="yes">
    <title>visualizador base</title>
    <!-- Estilo de la API -->
    <link type="text/css" rel="stylesheet" href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css">
    <!-- Estilos de los plugins añadidos -->
    
    <link href="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.css" rel="stylesheet" />
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
  </head>

  <body>
      <!-- Contenedor principal del mapa -->
      <div id="mapjs" class="m-container"></div>
      <!-- Ficheros javascript de la API -->
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/vendor/browser-polyfill.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>
      <!-- Ficheros  javascript de los plugins añadidos-->
      
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.js"></script>

      <script type="text/javascript">
        // Configuración del mapa
        const mapjs = M.map({
          container: 'mapjs', //id del contenedor del mapa
          controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers'],
          zoom: 5,
          maxZoom: 20,
          minZoom: 2,
          center: [-467062.8225, 4683459.6216],
        });
        // Configuración de las capas

        const LaRiojaMVT = new M.layer.MVT({
          url: 'https://vts.larioja.org/rioja/{z}/{x}/{y}.pbf',
          legend: 'MVT La Rioja',
          name: 'La Rioja',
          visibility: true,
        });
        mapjs.addLayers(LaRiojaMVT);

        let estilo_gr = new M.style.Line({
          fill: {
            color: 'white',
            width: 1
          },
          stroke: {
            color: 'red',
            width: 2,
          },
        });

        let estilo_pr = new M.style.Line({
          fill: {
            color: 'white',
            width: 1
          },
          stroke: {
            color: 'blue',
            width: 2,
          },
        });

        let estilo_sl = new M.style.Line({
          fill: {
            color: 'white',
            width: 1
          },
          stroke: {
            color: 'orange',
            width: 2,
          },
        });

        const capaMVT_sendero_gr = new M.layer.MVT({
          url: "https://vt-fedme.idee.es/vt.senderogr/{z}/{x}/{y}.pbf",
          name: 'sendero_gr',
          visibility: true,
          extract: true,
        });
        const capaMVT_sendero_pr = new M.layer.MVT({
          url: "https://vt-fedme.idee.es/vt.senderopr/{z}/{x}/{y}.pbf",
          name: 'sendero_pr',
          visibility: true,
          extract: true,
        });
        const capaMVT_sendero_sl = new M.layer.MVT({
          url: "https://vt-fedme.idee.es/vt.senderosl/{z}/{x}/{y}.pbf",
          name: 'sendero_sl',
          visibility: true,
          extract: true,
        });

        capaMVT_sendero_gr.setStyle(estilo_gr);
        capaMVT_sendero_pr.setStyle(estilo_pr);
        capaMVT_sendero_sl.setStyle(estilo_sl);
		    mapjs.addLayers([capaMVT_sendero_gr,capaMVT_sendero_pr,capaMVT_sendero_sl]);

        // Configuración de los plugins
        const mp8 = new M.plugin.TOC({
          collapsed: true,
          collapsible: true,
        });
        mapjs.addPlugin(mp8);

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


        

      