.remove function for vectorField doesn't stop d3.timer #41

karunakar2 · 2019-08-19T11:03:26Z

After adding a layer built on vector of two asc files based u,v fields, attempt is made to remove the layer from the map, but the d3.timer for animation remain looping over, complaining that latlon point refers to null.
L.CanvasLayer.VectorFieldAnim.js:122 Uncaught TypeError: Cannot read property 'latLngToContainerPoint' of null
at i._drawParticle (L.CanvasLayer.VectorFieldAnim.js:122)
at L.CanvasLayer.VectorFieldAnim.js:109
at Array.forEach ()
at n (L.CanvasLayer.VectorFieldAnim.js:108)
at L.CanvasLayer.VectorFieldAnim.js:52
at Mn (d3.v4.min.js:2)
at Tn (d3.v4.min.js:2)

Any pointers here?

thank you.

karunakar2 · 2019-08-22T23:05:33Z

setting maxAge in options to 0, beforehand would alleviate the problem. But a better solution is required.

rmarzocchi84 · 2020-11-04T08:22:37Z

I have the same problem. I try to use a slider https://github.com/Eclipse1979/leaflet-slider, I remove correctly the layer but I have problem with vf and I generate the same error

The webpage is http://demo.gter.it/grib_viewer/

The code is the following:

<!DOCTYPE html>
<html>

<head>
    <title>VectorFieldAnim</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- jquery -->
    <!--script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script-->
    
    <!-- CDN -->
    <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
    <link rel="stylesheet" href="examples.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
    <!-- Plugin -->
    <link rel="stylesheet" href="./leaflet-slider/dist/leaflet-slider.css"/>
</head>

<body>
    <h1 class="title mapTitle">Demo risqueau</h1>
    <div id="map"></div>

    <!-- CDN -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/[email protected]/dist/leaflet.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

    <!-- Plugin -->

    <script src="./Leaflet.CanvasLayer.Field/dist/leaflet.canvaslayer.field.js"></script>
    <script src="./leaflet-slider/dist/leaflet-slider.js"></script>



    <script>
        let map = L.map('map');
        var check=0;
        var layer;
        //var vf;
        /* Basemap */
        let url = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png';
        L.tileLayer(url, {
            attribution: 'OSM & Carto',
            subdomains: 'abcd',
            maxZoom: 19
        }).addTo(map);
    

        slider = L.control.slider(function(value) {
            console.log(value);

            d3.text('./data/WRF_NEP_2020110300_'+value+'_ws_u.asc', function (u) {
                d3.text('./data/WRF_NEP_2020110300_'+value+'_ws_v.asc', function (v) {
                    if (value>1 || check>0){

                        layer.remove();
                    }
                    let vf = L.VectorField.fromASCIIGrids(u, v);
                    layer = L.canvasLayer.vectorFieldAnim(vf).addTo(map);
                    map.fitBounds(layer.getBounds());
                    check=1;
                    layer.on('click', function (e) {
                        if (e.value !== null) {
                            let vector = e.value;
                            let v = vector.magnitude().toFixed(2);
                            let d = vector.directionTo().toFixed(0);
                            let html = (`<span class="popupText">${v} m/s to ${d}&deg</span>`);
                            let popup = L.popup()
                                .setLatLng(e.latlng)
                                .setContent(html)
                                .openOn(map);
                        }
                    }); // {onClick: callback} inside 'options' is also supported when using layer contructor
                });
            });

        }, {
        max: 2,
        min:1,
        value: 1,
        step:1,
        size: '250px',
        orientation:'horizontal',
        collapsed: false,
        position: 'bottomleft',
        id: 'slider'
    }).addTo(map);
    </script>
</body>

</html>

@karunakar2 where I can add the option maxAge?

rmarzocchi84 · 2020-11-05T17:43:11Z

If useful for other users I have solved removing map.fitBounds(layer.getBounds());

and adding let map = L.map('map').setView([lat, lon], zoom_level);

I will add my code as soon as possible on a github repository. I will use your plugin for a webgis of a european research INTERREG project! In our repository I will add a python script to convert grib2 file in a lot of ascii file with u and v. I hope it can be useful

Congratulations for your work @Pedrazl it is really nice!

Pedrazl · 2020-11-06T13:22:06Z

Thanks @rmarzocchi84 but the "father" of the plugin is @VictorVelarde. I'm just trying to keep it alive, and maybe in the future to extend it furthermore.
Anyway, thanks for the contribution, I'll try to have a look to this bug as soon as possible.

Pedrazl added the bug label Aug 27, 2019

This was referenced Nov 4, 2020

TypeError upon removing VectorField layer from map using layer control #27

Open

New player controler #60

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.remove function for vectorField doesn't stop d3.timer #41

.remove function for vectorField doesn't stop d3.timer #41

karunakar2 commented Aug 19, 2019 •

edited

Loading

karunakar2 commented Aug 22, 2019

rmarzocchi84 commented Nov 4, 2020

rmarzocchi84 commented Nov 5, 2020 •

edited

Loading

Pedrazl commented Nov 6, 2020

.remove function for vectorField doesn't stop d3.timer #41

.remove function for vectorField doesn't stop d3.timer #41

Comments

karunakar2 commented Aug 19, 2019 • edited Loading

karunakar2 commented Aug 22, 2019

rmarzocchi84 commented Nov 4, 2020

rmarzocchi84 commented Nov 5, 2020 • edited Loading

Pedrazl commented Nov 6, 2020

karunakar2 commented Aug 19, 2019 •

edited

Loading

rmarzocchi84 commented Nov 5, 2020 •

edited

Loading