# Use of leaflet-gl-vector-layer from browser

**URL:** https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547
**Category:** AVL
**Created:** [August 10, 2022, 2:49pm UTC](https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547 "2022-08-10T14:49:32Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![jvgent](https://forum.atmospherictoolbox.org/letter_avatar_proxy/v4/letter/j/8e7dd6/32.png) [@jvgent](https://forum.atmospherictoolbox.org/u/jvgent)
#### Post date: [August 10, 2022, 2:49pm UTC](https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547/1 "2022-08-10T14:49:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sander.niemeijer](https://forum.atmospherictoolbox.org/user_avatar/forum.atmospherictoolbox.org/sander.niemeijer/32/5_2.png) [@sander.niemeijer](https://forum.atmospherictoolbox.org/u/sander.niemeijer)
#### Post date: [August 11, 2022, 7:24am UTC](https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547/2 "2022-08-11T07:24:48Z")

</div>

Since the leaflet-gl-vector-layer software is one of the components of the [atmosphere virtual lab](https://forum.atmospherictoolbox.org/t/introducing-atmosphere-virtual-lab-and-lps2022-demo), this question is definitely not out of scope for this forum.

The [leaflet-gl-vector-layer](https://github.com/stcorp/leaflet-gl-vector-layer) is actually a pure javascript leaflet plugin. It runs in the browser (not on the server). You can [npm install](https://www.npmjs.com/package/@stcorp/leaflet-gl-vector-layer) 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](https://github.com/stcorp/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](https://github.com/stcorp/jsdap), or [a javascript hdf5 reader](https://github.com/usnistgov/jsfive) if your data is local).

---

<div class="post-metadata">

### Author: ![jvgent](https://forum.atmospherictoolbox.org/letter_avatar_proxy/v4/letter/j/8e7dd6/32.png) [@jvgent](https://forum.atmospherictoolbox.org/u/jvgent)
#### Post date: [August 11, 2022, 5:02pm UTC](https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547/3 "2022-08-11T17:02:30Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mkaipiainen](https://forum.atmospherictoolbox.org/user_avatar/forum.atmospherictoolbox.org/mkaipiainen/32/242_2.png) [@mkaipiainen](https://forum.atmospherictoolbox.org/u/mkaipiainen)
#### Post date: [August 12, 2022, 9:43am UTC](https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547/4 "2022-08-12T09:43:34Z")

</div>

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:

```auto
  <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:

```auto
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);

```

---

<div class="post-metadata">

### Author: ![jvgent](https://forum.atmospherictoolbox.org/letter_avatar_proxy/v4/letter/j/8e7dd6/32.png) [@jvgent](https://forum.atmospherictoolbox.org/u/jvgent)
#### Post date: [August 12, 2022, 12:44pm UTC](https://forum.atmospherictoolbox.org/t/use-of-leaflet-gl-vector-layer-from-browser/547/5 "2022-08-12T12:44:50Z")

</div>

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.