first pass splitting js into commonjs modules

resources/js/maps/route_map.js

@@ -0,0 +1,123 @@
+const _ = require('lodash');
+const leaflet = require('leaflet');
+
+import draw_base_map from './base_map';
+import {ACTUAL_ROUTE_COLOR, PLAN_ROUTE_COLOR} from './config';
+
+/**
+ * Show some popup text when a feature is clicked on
+ * @param feature
+ * @param layer
+ */
+export const onFeaturePointClick = (feature, layer) => {
+    let popup_html = "";
+    if (feature.properties && feature.properties.popup) {
+        popup_html += feature.properties.popup;
+    }
+
+    layer.bindPopup(popup_html);
+};
+
+/**
+ * Show each point as a marker
+ * @param feature
+ * @param latlng
+ * @returns {*}
+ */
+export const pointToLayer = (feature, latlng) => {
+    return leaflet.circleMarker(latlng, {
+        radius: 12,
+        fillColor: "#ff7800",
+        color: "#000",
+        weight: 1,
+        opacity: 1,
+        fillOpacity: 0.8
+    });
+};
+
+/**
+ *
+ * @param opts
+ * @private
+ */
+export default (opts) => {
+
+    opts = _.defaults(opts, {
+        route_points: null,
+        planned_route_line: null,
+        actual_route_points: null,
+        actual_route_line: null,
+        render_elem: 'map',
+    });
+
+    console.log(opts);
+
+    let map = draw_base_map(opts);
+
+    let geodesicLayer = leaflet.geodesic([], {
+        weight: 7,
+        opacity: 0.9,
+        color: PLAN_ROUTE_COLOR,
+        steps: 50,
+        wrap: false,
+    }).addTo(map);
+
+    geodesicLayer.geoJson(opts.planned_route_line);
+
+    try {
+        map.fitBounds(geodesicLayer.getBounds());
+    } catch (e) {
+        console.log(e);
+    }
+
+    // Draw the route points after
+    if (opts.route_points !== null) {
+        let route_points = leaflet.geoJSON(opts.route_points, {
+            onEachFeature: onFeaturePointClick,
+            pointToLayer: pointToLayer,
+            style: {
+                "color": PLAN_ROUTE_COLOR,
+                "weight": 5,
+                "opacity": 0.65,
+            },
+        });
+
+        route_points.addTo(map);
+    }
+
+    /**
+     * draw the actual route
+     */
+
+    if (opts.actual_route_line !== null && opts.actual_route_line.features.length > 0) {
+        let geodesicLayer = leaflet.geodesic([], {
+            weight: 7,
+            opacity: 0.9,
+            color: ACTUAL_ROUTE_COLOR,
+            steps: 50,
+            wrap: false,
+        }).addTo(map);
+
+        geodesicLayer.geoJson(opts.actual_route_line);
+
+        try {
+            map.fitBounds(geodesicLayer.getBounds());
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    if (opts.actual_route_points !== null && opts.actual_route_points.features.length > 0) {
+        let route_points = leaflet.geoJSON(opts.actual_route_points, {
+            onEachFeature: onFeaturePointClick,
+            pointToLayer: pointToLayer,
+            style: {
+                "color": ACTUAL_ROUTE_COLOR,
+                "weight": 5,
+                "opacity": 0.65,
+            },
+        });
+
+        route_points.addTo(map);
+    }
+};