<!DOCTYPE html>
<html>
<head>
<title>Lab 6</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#map { min-height: 100%; }
</style>
<!-- Load animation tweening library requirement for CanvasFlowMapLayer -->
<script src="https://unpkg.com/@tweenjs/tween.js@18.6.4/dist/tween.umd.js"></script>
<!-- Load CanvasFlowMapLayer; change the path (relative URL) if necessary -->
<script src="CanvasFlowmapLayer.js"></script>
<script type="text/javascript" src="cook.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {
center: [38.6367781,-95.8374063],
zoom: 4
});
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: 'Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.',
maxZoom: 11,
minZoom: 3
}).addTo(map);
L.canvasFlowmapLayer(data, { //data is the variable name I used for defining the cook.js data
originAndDestinationFieldIds: {
originUniqueIdField: 'GEOID_B', //origin ID, use GEOID_A if you want to reverse the flow
originGeometry: { //origin coordinates
x: 'B_lon',
y: 'B_lat'
},
destinationUniqueIdField: 'GEOID_A', //destination ID
destinationGeometry: { //destination coordinates
x: 'A_lon',
y: 'A_lat'
}
},
// Some options to customize the flow map, check out the link below for more
// https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer#options-and-property-summary
pathDisplayMode: 'all',
animationStarted: true,
animationEasingFamily: 'Cubic', // Compare the options:
// https://jwasilgeo.github.io/Leaflet.Canvas-Flowmap-Layer/docs/comparison/
animationEasingType: 'In',
animationDuration: 2000 // in millisecond, the larger the number the slower
}).addTo(map);
</script>
</body>
</html>