0

I have deployed a ERDDAP server on a AWS machine, which has multiple datasets, each of which contains multiple NetCDF files. I'm trying to develop a JavaScript interface, using Leaflet, so that I can plot the data on the .nc files in a map. However, I'm not being able to do it.

Do you have any idea of how I can do so?

I have a selector in HTML to select a parameter and date, and the following JavaScript code. However, when I acces the web app, the map is not being shown properly, and no data is plotted.

The map is cutted and no data is shown

    // Inicializar el mapa
          var map = L.map('map', {
          center: [-5, 35],
          zoom: 4
        });

    // Agregar capa base
    var layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    });

    map.addLayer(layer);

    // Obtain data
    function obtenerDatos(parametro, ano, mes) {
      // URL
      var url = `https://http://13.53.65.240:8080/erddap/files/${parametro}gridtemp/${parametro}_${ano}${mes}.nc`;

      // GET request
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.onload = function() {
        // Decodificar la respuesta
        var response = JSON.parse(xhr.responseText);

        // Return data
        return response;
      };
      xhr.send();
    }

    // Parameter selector
    var selectorParametros = document.getElementById('parameter');

        // Listener for Parameter selector
    selectorParametros.addEventListener('change', function() {
      var parametro = selectorParametros.value;
      var data = data.value;

      var datos = obtenerDatos(parametro, data.split('-')[0], data.split('-')[2]);

      actualizarCapa(datos);
    });
    
    
    // Date selector
    var selectorData = document.getElementById('data');
    
    // Listener for date selector
    selectorData.addEventListener('change', function() {
      var parametro = parametro.value;
      var data = selectorData.value;

      var datos = obtenerDatos(parametro, data.split('-')[0], data.split('-')[2]);

      actualizarCapa(datos);
    });

    // Update layer
    function actualizarCapa(datos) {
      // Create data layer
      var gridLayer = L.gridLayer(datos, {
        columns: ['latitude', 'longitude', 'CO_column_data_density'],
        style: function(feature) {
          return {
            color: feature.properties.CO_column_data_density
          };
        }
      });

      // Add layer to map
      map.addLayer(gridLayer);
    }
8
  • 1
    Welcome to GIS SE. What did you try? Share the code snippet. Why can't you plot the data? Do you face any error?
    – Padmanabha
    Jan 26 at 2:35
  • I @Padmanabha , I've edited the original post :) Jan 26 at 11:17
  • Is OSM tile layer displayed correctly if you omit grid layer?
    – TomazicM
    Jan 26 at 12:58
  • No, even if I comment the line map.addLayer(gridLayer); , it isn't displayed correctly Jan 26 at 13:12
  • I managed to display the map correctly, I was missing the CSS from leaflet. However, no data is being shown on the map. How can you add data directly from a gridded nc file? Jan 26 at 15:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.