Reset flows as map control. Fix flow layer in pane

public/centropais/index.html

@@ -76,13 +76,12 @@
                     <div class="loader"></div>
                     <div class="row h-50 border-bottom">
                         <div class="col-6 border-right">
-                            <button type="button" class="btn-sm btn-info" id="resetFlows"><i class="fa fa-refresh"></i> Reset</button>
                             <div id="area-graph">
                                 <table class="table table-dark table-striped" id="tblViajesDesde">
                                     <thead>
                                         <tr>
-                                            <th scope="col">Desde</th>
-                                            <th scope="col">Hacia</th>
+                                            <th scope="col">Origen</th>
+                                            <th scope="col">Destino</th>
                                             <th scope="col">Viajes</th>
                                         </tr>
                                     </thead>

public/js/centropais_basemap.js

@@ -914,7 +914,7 @@ const makeBaseMap = () => {
     createPane("pane_desdePOIC", 414);
     createPane("pane_haciaPOIC", 415);
     createPane("pane_agebs", 421);
-    createPane("pane_flujosDesde", 422);
+    createPane("pane_flujos", 422);
 
     /*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" +
         "<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
@@ -963,9 +963,26 @@ const makeBaseMap = () => {
     layerControl.addOverlay(layer_limiteMunicipal, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c101&format=image/png&STYLE=default\" alt=\"Límite municipal\"/>");
     layerControl.addOverlay(layer_limiteEstatal, "Límite estatal <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c100&format=image/png&STYLE=default\" alt=\"Límite Estatal\"/>");
 
+
+    let resetControl = L.control({
+        position: "topleft"
+    });
+
+    resetControl.onAdd = () => {
+        let div = L.DomUtil.create("div", "leaflet-bar leaflet-control");
+        div.innerHTML = "<button type=\"button\" class=\"btn btn-sm btn-light\" id=\"resetFlows\" title=\"Reiniciar fujos\"><i class=\"fa fa-refresh\"></i></button>";
+        //div.innerHTML = "<a class=\"btn btn-sm btn-light\" href=\"#\" role=\"button\" id=\"resetFlows\" title=\"Reiniciar fujos\" aria-label=\"aaa\"><i class=\"fa fa-refresh\"></i></a>";
+        return div;
+    };
+
+    resetControl.addTo(map);
+
     $.getJSON("data/od.geojson", data => {
         od = data;
     });
+
+    let canvasPointRenderer = L.canvas({ pane: 'pane_flujos' });
+
     $.getJSON("data/viajes_ocupados_desde.geojson", data => {
         flowMapLayer = L.canvasFlowmapLayer(data, {
             // Define origins and destination from json values
@@ -1077,6 +1094,28 @@ const makeBaseMap = () => {
                     }
                 }]
             },
+            // dot styles
+            style: function (geoJsonFeature) {
+                if (geoJsonFeature.properties.isOrigin) {
+                    return {
+                        renderer: canvasPointRenderer,
+                        radius: 5,
+                        weight: 1,
+                        color: 'rgb(195, 255, 62)',
+                        fillColor: 'rgba(195, 255, 62, 0.6)',
+                        fillOpacity: 0.6
+                    };
+                } else {
+                    return {
+                        renderer: canvasPointRenderer,
+                        radius: 2.5,
+                        weight: 0.25,
+                        color: 'rgb(17, 142, 170)',
+                        fillColor: 'rgb(17, 142, 170)',
+                        fillOpacity: 0.7
+                    };
+                }
+            },
             // some custom options
             pathDisplayMode: "all",
             animationStarted: true,
@@ -1085,7 +1124,7 @@ const makeBaseMap = () => {
             animationEasingFamily: "Linear",
             animationEasingType: "None",
             animationDuration: 2000,
-            pane: "pane_flujosDesde" // FIXME: only lines are created in pane, not dots
+            pane: "pane_flujos"
         }).bindTooltip( layer => { // what to display on hover
             let coords = layer.getLatLng();
             let label = od.features.filter( f => f.properties.X == coords.lng && f.properties.Y == coords.lat);
@@ -1093,7 +1132,7 @@ const makeBaseMap = () => {
         });
         flowMapLayer.addTo(map);
         // hack to get origins and destinations in desired map pane
-        $(".leaflet-pane.leaflet-overlay-pane canvas").detach().appendTo($(".leaflet-pane_flujosDesde-pane"));
+        //$(".leaflet-pane.leaflet-overlay-pane canvas").detach().appendTo($(".leaflet-pane_flujos-pane"));
 
         // Define what happens when user clicks dots
         flowMapLayer.on("click", e => {