JSFiddle - React, Tailwind, and code Playground

by gol ngaz²

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lab 6</title>

        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>

        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>

        <!-- Load animation tweening library requirement for CanvasFlowMapLayer -->
        <script src="https://unpkg.com/@tweenjs/[email protected]/dist/tween.umd.js"></script>

        <!-- then load CanvasFlowMapLayer -->
        <script>
        (function(factory, window) {
    // module loaders support for LeafletJS plugins, see:
    // https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md#module-loaders

    // AMD module that relies on "leaflet"
    if (typeof define === 'function' && define.amd) {
        define(['leaflet'], factory);

        // Common JS module that relies on "leaflet"
    } else if (typeof exports === 'object') {
        module.exports = factory(require('leaflet'));
    }

    // attach plugin to the global leaflet "L" variable
    if (typeof window !== 'undefined' && window.L) {
        window.L.CanvasFlowmapLayer = factory(L);

        window.L.canvasFlowmapLayer = function(originAndDestinationGeoJsonPoints, opts) {
            return new window.L.CanvasFlowmapLayer(originAndDestinationGeoJsonPoints, opts);
        };
    }
}(function(L) {
    // layer source code
    var canvasRenderer = L.canvas();

    var CanvasFlowmapLayer = L.GeoJSON.extend({
        options: {
            // this is only a default option example,
            // developers will most likely need to provide this
            // options object with values unique to their data
            originAndDestinationFieldIds: {
               ...