Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vector display/animations not showing #58

Closed
saltynexus opened this issue Aug 31, 2020 · 5 comments
Closed

Vector display/animations not showing #58

saltynexus opened this issue Aug 31, 2020 · 5 comments

Comments

@saltynexus
Copy link

saltynexus commented Aug 31, 2020 •
edited

I'm having some trouble getting the demo to display properly. Below is the HTML file I'm using, which is copied from demo.html (only exception being I pointed to my javascript file).

HTML file:

<!-- https://github.com/danwild/leaflet-velocity -->

<!doctype html>
<html>
<head>
	<title>LeafletVelocity Demo</title>
	<meta charset="utf-8">
</head>
<body>

<div id="map"></div>

<!--vendor-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.1.0/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.1.0/dist/leaflet.js"></script>

<!--leaflet-velocity-->
<link rel="stylesheet" href="../dist/leaflet-velocity.css" />
<script src="../dist/leaflet-velocity.js"></script>

<!--demo-->
<link rel="stylesheet" href="demo.css" />
<script type="text/javascript" src="../../../js/write_coords.js"></script>

</body>
</html>

Below is the javascript code I wrote to display the map and velocity. It is more or less copied from following Leaflet tutorials and the demo.js script. One thing that is different is that instead of loading an external file, I just "beautified" the source file and pasted into javascript. I'm brand new to javascript, so this could very well be where I'm making a mistakes.

JS file:

// Earth
var earth = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    id: 'MapID',
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS,' +
                 'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});


// Collect base maps
var base_maps = {
    "Earth": earth
};

// Initialize the map
var map = L.map('map', {
    center: [-7.5, 156],
    zoom: 4,
    layers: [earth]
});

// Add control
var layer_control = L.control.layers(base_maps).addTo(map);


// Data
var data = [{
    header: {
        parameterUnit: "m.s-1",
        parameterNumber: 2,
        dx: 1.0,
        dy: 1.0,
        parameterNumberName: "Eastward current",
        la1: -7.5,
        la2: -28.5,
        parameterCategory: 2,
        lo2: 156,
        nx: 14,
        ny: 22,
        refTime: "2017-02-01 23:00:00",
        lo1: 143
    },
    data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.33000001311302185, 0.25, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.12999999523162842, -0.0, 0.6499999761581421, 0.44999998807907104, 0.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.03999999910593033, -0.1899999976158142, 0.4300000071525574, 0.23999999463558197, 0.44999998807907104, 0.23000000417232513, 0.4399999976158142, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1599999964237213, 0.0, -0.019999999552965164, -0.05000000074505806, 0.23000000417232513, 0.3700000047683716, 0.550000011920929, 0.2800000011920929, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.11999999731779099, -0.33000001311302185, 0.05999999865889549, 0.12999999523162842, 0.3199999928474426, 0.28999999165534973, 0.2800000011920929, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.20999999344348907, -0.30000001192092896, -0.8199999928474426, -0.27000001072883606, -0.019999999552965164, 0.23000000417232513, 0.20000000298023224, 0.10000000149011612, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.12999999523162842, -0.1899999976158142, -0.18000000715255737, -0.44999998807907104, 0.11999999731779099, -0.05000000074505806, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.20999999344348907, -0.1899999976158142, -0.27000001072883606, -0.6499999761581421, -0.3199999928474426, -0.3199999928474426, -0.07000000029802322, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.23999999463558197, -0.14000000059604645, -0.15000000596046448, -0.09000000357627869, -0.3799999952316284, -0.33000001311302185, -0.17000000178813934, -0.28999999165534973, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.03999999910593033, -0.17000000178813934, 0.07000000029802322, -0.27000001072883606, -0.10999999940395355, -0.1899999976158142, -0.019999999552965164, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.14000000059604645, -0.05999999865889549, -0.05000000074505806, -0.36000001430511475, -0.3700000047683716, -0.20000000298023224, -0.20999999344348907, -0.09000000357627869, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05000000074505806, -0.019999999552965164, 0.1599999964237213, 0.3100000023841858, -0.18000000715255737, -0.1599999964237213, -0.25999999046325684, -0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05999999865889549, -0.27000001072883606, -0.27000001072883606, 0.4099999964237213, 0.23999999463558197, -0.09000000357627869, 0.009999999776482582, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.20999999344348907, -0.3499999940395355, -0.23999999463558197, 0.009999999776482582, -0.14000000059604645, -0.18000000715255737, -0.1599999964237213, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.25, -0.23000000417232513, 0.17000000178813934, -0.17000000178813934, 0.09000000357627869, 0.1599999964237213, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.05000000074505806, -0.1899999976158142, 0.10999999940395355, -0.03999999910593033, -0.10999999940395355, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.009999999776482582, -0.009999999776482582, -0.23999999463558197, -0.33000001311302185, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.25999999046325684, -0.03999999910593033, 0.11999999731779099, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.11999999731779099, -0.17000000178813934, 0.25999999046325684, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.05000000074505806, -0.6100000143051147, -0.2199999988079071, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.5600000023841858, 0.3100000023841858, 0.36000001430511475]
}, {
    header: {
        parameterUnit: "m.s-1",
        parameterNumber: 3,
        dx: 1.0,
        dy: 1.0,
        parameterNumberName: "Northward current",
        la1: -7.5,
        la2: -28.5,
        parameterCategory: 2,
        lo2: 156,
        nx: 14,
        ny: 22,
        refTime: "2017-02-01 23:00:00",
        lo1: 143
    },
    data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1899999976158142, 0.28999999165534973, 0.019999999552965164, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.2800000011920929, 0.20999999344348907, 0.44999998807907104, 0.11999999731779099, -0.3100000023841858, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.18000000715255737, 0.36000001430511475, 0.20000000298023224, -0.20000000298023224, -0.25, -0.3100000023841858, 0.10000000149011612, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.15000000596046448, 0.38999998569488525, 0.14000000059604645, -0.1599999964237213, -0.28999999165534973, -0.1599999964237213, -0.1599999964237213, 0.10999999940395355, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.75, 0.23000000417232513, -0.07000000029802322, -0.3400000035762787, -0.18000000715255737, -0.3799999952316284, -0.3700000047683716, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.17000000178813934, 0.3400000035762787, -0.009999999776482582, -0.029999999329447746, -0.25999999046325684, -0.07000000029802322, -0.25999999046325684, -0.33000001311302185, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05999999865889549, 0.03999999910593033, 0.05000000074505806, -0.1599999964237213, -0.0, 0.009999999776482582, -0.2199999988079071, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05000000074505806, -0.2199999988079071, -0.05999999865889549, -0.3799999952316284, -0.20000000298023224, -0.07000000029802322, 0.2199999988079071, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.019999999552965164, 0.2199999988079071, 0.05000000074505806, -0.10999999940395355, -0.25, -0.12999999523162842, 0.11999999731779099, 0.07000000029802322, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.07000000029802322, -0.05999999865889549, -0.1899999976158142, -0.41999998688697815, -0.10000000149011612, -0.12999999523162842, 0.009999999776482582, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.10000000149011612, -0.12999999523162842, 0.019999999552965164, -0.28999999165534973, -0.12999999523162842, 0.20000000298023224, 0.07999999821186066, -0.4399999976158142, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.11999999731779099, -0.7599999904632568, -0.49000000953674316, -0.550000011920929, -0.10000000149011612, 0.09000000357627869, 0.07000000029802322, -0.23999999463558197, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.47999998927116394, -0.5299999713897705, -0.550000011920929, -0.47999998927116394, -0.05000000074505806, 0.03999999910593033, -0.3700000047683716, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.5400000214576721, -0.019999999552965164, -0.3199999928474426, -0.18000000715255737, -0.09000000357627869, -0.1599999964237213, -0.3499999940395355, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.029999999329447746, 0.029999999329447746, -0.15000000596046448, -0.23000000417232513, -0.019999999552965164, -0.3799999952316284, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1599999964237213, -0.18000000715255737, -0.05999999865889549, 0.5199999809265137, -0.07000000029802322, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.3100000023841858, -0.4699999988079071, 0.2800000011920929, -0.41999998688697815, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.5799999833106995, 0.019999999552965164, -0.4000000059604645, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.47999998927116394, -0.019999999552965164, -0.09000000357627869, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.7699999809265137, -0.019999999552965164, -0.05999999865889549, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.1699999570846558, 0.33000001311302185, -0.05000000074505806]
}]

// Overlay
var velocityLayer = L.velocityLayer({
    displayValues: true,
    displayOptions: {
        velocityType: 'GBR Wind',
        displayPosition: 'bottomleft',
        displayEmptyString: 'No wind data'
    },
    data: data,
    maxVelocity: 10
});

// Add
console.log(velocityLayer)
layer_control.addOverlay(velocityLayer,"GB Reef");

One thing I noticed is that when I drag my mouse over the data area, it does in fact display something relating to the data in the lower left part of the window. This makes me believe it's getting some data...however there is no velocity vector display. I'm not sure what I'm doing wrong. I download the files from here and only made the modifications above. Everything else is more or less the same.
@brentfraser
Copy link
Contributor

Use your browser's Developer Tools to debug your JavaScript.

@saltynexus
Copy link
Author

I don't get any errors in my console. Should I be debugging leaflet-velocity.js? If so, do you know where in the code I should be looking?

@saltynexus
Copy link
Author

OK...I was staring at the screen dumbfounded and sure enough, there was a twinkle in my eye. The code above apparently works, but the scale is sooooo small I totally missed it. Since this data is copied from the demo, I'm not sure where the scaling issue arises. It certainly doesn't look as good as the demo. Any insights?

@saltynexus
Copy link
Author

My bad...I copied the "water" data as opposed to the "wind" data. Everything is working and appears to match the demo. That being said, is there a way to scale the vectors in leaflet-velocity?

I would consider this closed, but thought someone might help to answer my question.

@danwild
Copy link
Contributor

danwild commented Aug 31, 2020

Hi @saltynexus, the issue tracker is really just for reporting problems with the leaflet-velocity plugin itself, and not suitable for help requests. For questions/discussions of that nature you'd be much better off over at stack overflow.

All the best,
Dan

@danwild danwild closed this as completed Aug 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@brentfraser @danwild @saltynexus