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

karunakar2 commented 5 years ago

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 commented 5 years ago

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

rmarzocchi84 commented 4 years ago

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/leaflet@1.4.0/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/leaflet@1.4.0/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 commented 4 years ago

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 commented 4 years ago

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.

IHCantabria / Leaflet.CanvasLayer.Field

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