Preparing JSON data for creating a wind map with Leaflet

I am currently working on converting netCDF data to JSON in order to use it with leaflet-velocity. This tool follows the same format as the output of grib2json used by cambecc in earth. An example of sample JSON data can be found at wind-global.json.

By using netCDF4, I have successfully extracted latitude/longitude wind data arrays from my netCDF file.

I am curious about how the "data" part of the JSON file (as shown in the example below) is structured. It appears to be a lengthy array of values (e.g. for 'eastward wind' in the sample), but I am unsure of how these values are mapped to latitude/longitude coordinates later on.

Does the JSON header contain information that guides Leaflet on structuring the output, or does another function in leaflet-velocity.js handle this task?

I came across a related post on Stack Overflow which provided some clues, but I have been struggling for quite some time now to adapt it to my own netCDF file. The link to the question is here.

[
{
    "header": {
    "parameterUnit": "m.s-1",
    "parameterNumber": 2,
    "dx": 1.0,
    "dy": 1.0,
    "parameterNumberName": "eastward_wind",
    "la1": -7.5,
    "la2": -28.5,
    "parameterCategory": 2,
    "lo2": 156.0,
    "nx": 14,
    "ny": 22,
    "refTime": "2017-02-01 23:00:00",
    "lo1": 143.0
  },
    "data":[
        -2.12,
        -2.27,
        -2.41,
        ...
    ]
}
]
javascriptjsonleafletdata-conversionnetcdf

Answer №1

Here is a potential solution that may be helpful: NCO-JSON generates a unique JSON format compared to grib2json. It can handle all netCDF files seamlessly and includes array dimensional boundaries by default. This tool might simplify the process for your specific needs...

zender@aerosol:~$ ncks -C -v three_dmn_rec_var --jsn ~/nco/data/in.nc
{
  "dimensions": {
    "lat": 2,
    "lon": 4,
    "time": 10
  },
  "variables": {
    "three_dmn_rec_var": {
      "shape": ["time", "lat", "lon"],
      "type": "float",
      "attributes": {
        "long_name": "three dimensional record variable",
        "units": "watt meter-2",
        "_FillValue": -99.0
      },
      "data": [[[1.0, 2.0, 3.0, 4.0], [5.0, 6.0, 7.0, 8.0]], [[9.0, 10.0, 11.0, 12.0], [13.0, 14.0, 15.0, 16.0]], [[17.0, 18.0, 19.0, 20.0], [21.0, 22.0, 23.0, 24.0]], [[25.0, 26.0, 27.0, 28.0], [29.0, 30.0, 31.0, 32.0]], [[33.0, 34.0, 35.0, 36.0], [37.0, 38.0, 39.0, 40.0]], [[41.0, 42.0, 43.0, 44.0], [45.0, 46.0, 47.0, 48.0]], [[49.0, 50.0, 51.0, 52.0], [53.0, 54.0, 55.0, 56.0]], [[57.0, 58.0, 59.0, 60.0], [61.0, 62.0, 63.0, 64.0]], [[65.0, 66.0, 67.0, 68.0], [69.0, 70.0, 71.0, 72.0]], [[73.0, 74.0, 75.0, 76.0], [77.0, 78.0, 79.0, 80.0]]]
    }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for effectively utilizing MeteorPad: (Note: ensure to use at home instead of at work due to potential firewall or proxy issues)

UPDATE: It's possible that the issue is related to a firewall or proxy. MeteorPad doesn't work at my workplace, but it works fine at home. I've been attempting to use MeteorPad () but I'm encountering some difficulties. The bottom are ...

javascriptmeteor

Looking for a way to prevent anonymous functions in jQuery using Greasemonkey?

Is there a way to prevent the execution of this particular jquery function? I've tried various scripts and even wrote my own, but nothing seems to work. $(document).ready(function () { $(window).on('beforeunload', function() { re ...

javascriptjquerygreasemonkey

What is the best way to send a JavaScript array to a Perl script using AJAX?

Is it possible to convert a JavaScript array passed via AJAX into a Perl array? Accessing in Perl: @searchType = $cgi->param('searchType'); print @searchType[0]; Result: employee,admin,users,accounts It appears that the first value in the ...

javascriptajaxarraysperl

Exploring ways to create simulated content overflow using react-testing-library

I have integrated material-table with material ui to develop a spreadsheet application. One of the features I have added is setting a maximum width of 50px for cells. If the content in a cell exceeds this width, it will display an ellipsis at the end of ...

javascriptreactjsjestjsmaterial-uireact-testing-library

Comparison between bo-html and bo-text

As I was going through the documentation for the bindonce directive, a question popped into my head regarding the distinction between bo-html and bo-text. bo-html: This evaluates "markup" and displays it as HTML within the element. bo-text: ...

javascriptangularjsangular-directivebindonce

Showing AngularJS information on Views

After successfully implementing static HTML with views, as shown in this example: https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/ I am now facing a challenge with integrating the angular-ui accordion within ng-view. You can view the accordion I am attemptin ...

javascriptangularjsng-viewangularjs-ng-includeng-app

Building a family tree with JavaScript's Document Object Model

My goal is to use jQuery to construct the following DOM setup: <li> <label> user <input type=radio> </label> </li> Below is the jQuery code I am trying to use. $('<input>') .attr({type:'radio&ap ...

javascriptjquerydom

The final condition of the ternary operator fails to render if the specified condition is satisfied

Having trouble identifying the issue with this ternary statement. The last element (blurredscreen) is not appearing when authStatus !== "authenticated". return ( <> <div key={"key-" + id}> {isO ...

javascriptreactjs

Display various v-dialog boxes with distinct contents in a vue.js environment

Hello there! I am currently working on customizing a Vue.js template and I have encountered an issue with displaying dynamic v-dialogs using a looping statement. Currently, the dialog shows all at once instead of individually. Here is the structure of my ...

javascriptvue.jsvuejs2vuetify.js

Group an object by its name using Java Script/Vue.Js

I am looking to group objects by partial name and assign them to variables data = { SCHOOL-ADMISSION_YEAR: "2021" SCHOOL-SCHOOL_NAME: "ABC SCHOOL" SCHOOL-SCHOOL_LOCATION: "NEWYORK" ENROLLMENT-ADMISSION_YEAR: " ...

javascriptvue.js

Exploring JSON Data with Mustache Templates

Dealing with a significantly large JSON object that I can't control, I'm struggling to output a list of records (related to people in this case) using Mustache.js. Despite simplifying the complex object into a more manageable one with just the ne ...

javascriptjqueryjsonmustachezepto

React - How to properly pass a reference to a React portal

I have a Card component that needs to trigger a Modal component. Additionally, there is a versatile Overlay component used to display content above the application. Displayed here is the App component: class App extends Component { /* Some Code */ ...

javascriptreactjsreduxportal-system

LESS — transforming data URIs with a painting mixin

Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...

javascriptnode.jscsslessdata-uri

Issue with updating bound property correctly when dynamically generating components using v-for in Vue.js

Encountered a challenge with vue.js and seeking guidance on the best approach to address it. Here's a concise summary of the issue: Situation Data is fetched from a rest API, handled by a class called DataLoader using javascript prototype syntax. Th ...

javascriptasynchronousvue.jsvuejs2vue-component

What is the best way to clear the content of a contenteditable element in React?

I have a scenario where I am rendering an array of items, each with a contenteditable field. MainComponent.js import { useState } from "react"; import Item from "./Item"; import "./styles.css"; export default function MainC ...

javascripthtmlreactjs

Guide on utilizing JavaScript to modify the attribute of a chosen web element with Selenium WebDriver in Java

I am seeking a way to utilize Javascript in order to set attributes for the selected element on a webpage. After some research, I have discovered two methods for achieving this with Javascript: Method 1 WebDriver driver; // Assigned elsewhere Jav ...

javajavascriptseleniumselenium-webdriver

Styling text using CSS depending on the displayed text

Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...

javascripthtmlcss

Function wrapper intended for axios

How can I create a wrapper function for axios? I am looking to create a function that can return axios, allowing for easy substitution with another fetch API in the future. This is what I have attempted so far: import axios from 'axios' expor ...

javascriptreactjsaxios

Converting a Dictionary to JSON for Multipart/Form-Data in Swift

I am currently working on a Swift app that sends requests to servers containing both normal values and images. To achieve this, I am using a multipart/form-data request. The challenge I am facing is how to insert the JSON converted versions of arrays and d ...

jsonswiftmultipartform-data

Unable to assign value to a public variable in Angular

I am facing an issue where I am trying to retrieve a value from the localStorage and assign it to a variable. However, when I try to use that variable in functions, it is coming up as undefined. code export class DashboardService { public token: any; ...

javascriptangularionic-framework