search

onaci / leaflet-velocity

Visualise velocity data on a leaflet layer
https://onaci.github.io/leaflet-velocity/
Other
596 stars 213 forks source link

Vector display/animations not showing #58

Closed saltynexus closed 4 years ago

saltynexus commented 4 years ago

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

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

saltynexus commented 4 years ago

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

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

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

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