Use of leaflet-gl-vector-layer from browser

AVL
1

Dear Forum,
I am interested in using the leaflet-gl-vector-layer tool from S&T for showing S5P L2 pixel data on a Leaflet map. However, I noticed that the software comes in the form of a nodeJS application (if I understand correcly), whereas I would like to plot the vector polygons from a browser client application. Can this be done with the existing leaflet-gl-vector-layer tool?
I understand if this question would be out of the scope of this forum; please let me know.

2

Since the leaflet-gl-vector-layer software is one of the components of the atmosphere virtual lab, this question is definitely not out of scope for this forum.

The leaflet-gl-vector-layer is actually a pure javascript leaflet plugin. It runs in the browser (not on the server). You can npm install it to use it in your own webclient applications.

The main challenge for viewing this data in the browser is actually getting the data available in your browser as well. This requires some interface with a server or your local file system. For the Atmosphere Virtual Lab the data is provided via jupyter kernels and to make this interface efficient (using a compact binary data transfer from server to browser) we developed the ipyleaflet-gl-vector-layer-plugin. So, if you want to use leaflet-gl-vector-layer without the jupyter part, you will have to find your own way of transferring the data in a compact form (for instance using opendap+jsdap, or a javascript hdf5 reader if your data is local).

3

Thanks, but I still don’t manage to get the plugin to work. It must be my lack of experience with node_module type javascript. I usually include Leaflet plugins from my html by specifying it like: <script src="./path/to/plugin"></script>. So I tried to get the basic example mentioned under ‘Usage’ in your link to work by writing the code mentioned there in a test.js file and then including that file in an index.html file like: <script type="module" src="path/to/test.js"><script>.
But this leads to a series of errors in the browser of the type: Loading module from “https://myserver.mydomain/node_modules/@stcorp/leaflet-gl-vector-layer/” was blocked because of a disallowed MIME type (“text/html”). all related to mime-types.

Searching the web, the answers always sugegst that script type modules cannot be used directly in the browser ans must be bundled with tools like browserify and the like. But maybe I am completely on the wrong track here.

As for getting the data into the browser: that should be okay, as I have done this kind of thing before by, e.g. fetching json data through opendap.

4

Hello jvgent,

If you would like to import the plugin directly within your html (without using a bundler), you can do so either via a CDN for example like so:

  <link rel="stylesheet" href="https://unpkg.com/@stcorp/leaflet-gl-vector-layer@0.1.9/dist/index.css">
  <script src="https://unpkg.com/@stcorp/leaflet-gl-vector-layer@0.1.9/dist/index.umd.js"></script>

Or you can manually extract the javascript and css files from the node_modules folder and then import them in your html. The first option is most likely easier for you.

When including the plugin in this way, you should be able to call it like so:

var map = L.map('map', {})
  .setView([0, 0], 0);

var glVectorLayerWrapper = new window.leafletGlVectorLayer.LeafletGlVectorLayerWrapper();
var singleGlVectorLayer = new window.leafletGlVectorLayer.LeafletGlVectorLayer(leafletGlVectorLayerOptions);

glVectorLayerWrapper.addTo(map);
glVectorLayerWrapper.addLayer(singleGlVectorLayer);
5

Thank you for this explanation! Through CDN I got it to work now and it is clearer now how things are organized.
Thanks again, also for this great plugin.