Skip to content
This repository has been archived by the owner on Feb 8, 2024. It is now read-only.

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

Open
karunakar2 opened this issue Aug 19, 2019 · 4 comments
Open

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

karunakar2 opened this issue Aug 19, 2019 · 4 comments
Labels

Comments

@karunakar2
Copy link

karunakar2 commented Aug 19, 2019

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
Copy link
Author

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

@Pedrazl Pedrazl added the bug label Aug 27, 2019
@rmarzocchi84
Copy link

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
Copy link

rmarzocchi84 commented Nov 5, 2020

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
Copy link
Member

Pedrazl commented Nov 6, 2020

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants