Galería ejemplos API-CNIG

          
          
          <!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">

    <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>


      <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: 4,
                  center: [-467062.8225, 4683459.6216],
              });

          // Configuración de las capas
          const geodesia = new M.layer.WFS({
              url: 'https://www.ign.es/wfs/redes-geodesicas?',
              legend: 'Red Geodésica Nacional por Técnicas Espaciales (REGENTE)',
              name: 'RED_REGENTE',
              geometry: 'POINT'
            });
              
          // Configuracion de estilos
          var listEstilosCapas = { };
          function rndInt0_255() { return (Math.floor(Math.random() * 255) + 1).toString(); };
          function rndInt0_10() { return ((Math.floor(Math.random() * 10) + 1)) };
          let estilo = new M.style.Point({
            radius: function(feature,map) {
                      return rndInt0_10();
            }, 
            fill: {  
                color: 
                // Si se utiliza función, ésta se lanza en cada evento que se hace en mapa
                function(feature,map) {
                        return  'rgba('+rndInt0_255()+','+rndInt0_255()+','+rndInt0_255()+',0.8)';
                },
                opacity: 0.8
            },
            stroke: {
                // Si no se utiliza función, el estilo se queda estático en su creación
                color: 'rgba('+rndInt0_255()+','+rndInt0_255()+','+rndInt0_255()+',0.8)',
                width: 4
            }
          });
            
          // Asignamos el estilo a la capa
          geodesia.setStyle(estilo, true);
          setInterval(function () {geodesia.setStyle(estilo, true); }, 500);
          

          // Se añade la capa al mapa
          mapjs.addLayers(geodesia);
       
      </script>
  </body>
</html>
  
          

        