Cluster and spiderify packages near each other

www/assets/js/location.js

@@ -29,7 +29,7 @@ if ("geolocation" in navigator) {
             if (lastGpsUpdateTimestamp < (currentTimestamp - 10)) {
                 updateDistances(position.coords.latitude, position.coords.longitude);
                 if (map != null) {
-                    map.updatePackageLayer(packages);
+                    //map.updatePackageLayer(packages);
                 }
 
                 lastGpsUpdateTimestamp = currentTimestamp;

www/assets/js/map_leaflet.js

@@ -28,7 +28,7 @@ function leafletMap() {
         iconLoading: "far fa-compass fa-spin"
     }).addTo(map);
 
-    map.packagelayer = L.layerGroup();
+    map.packagelayer = L.markerClusterGroup();
 
     map.packagelayer.addTo(map);
 
@@ -64,7 +64,7 @@ function leafletMap() {
                 iconAnchor: [12.5, 12.5]
             });
 
-            L.marker(
+            var marker = L.marker(
                     [
                         package.coords[0],
                         package.coords[1]
@@ -72,10 +72,11 @@ function leafletMap() {
                     {
                         icon: icon
                     })
-                    .on('click', function () {
+                    .on("click", function () {
                         openPackageInfoSheet(package);
-                    })
+                    });
-                    .addTo(map.packagelayer);
+
+            map.packagelayer.addLayer(marker);
         });
     }
 

www/index.html

@@ -5,6 +5,8 @@
 <link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css" />
 <link rel="stylesheet" href="assets/fontawesome/css/all.min.css" />
 <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
+<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.css" />
+<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css" />
 <link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
 <link rel="stylesheet" href="assets/css/backdrop.css" />
 
@@ -23,6 +25,7 @@
 <script src="node_modules/framework7/js/framework7.bundle.min.js"></script>
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <script src="node_modules/leaflet/dist/leaflet.js"></script>
+<script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
 <script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
 
 <script src="assets/js/platform.js"></script>

www/package.json

@@ -8,7 +8,8 @@
     "jquery": "^3.4.1",
     "leaflet": "^1.5.1",
     "leaflet-geometryutil": "^0.9.1",
-    "leaflet.locatecontrol": "^0.67.0"
+    "leaflet.locatecontrol": "^0.67.0",
+    "leaflet.markercluster": "^1.4.1"
   },
   "devDependencies": {}
 }

www/pages/signin.html

@@ -1,66 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<div class="page" data-name="signin">
-
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="title">Sign In</div>
-        </div>
-    </div>
-
-
-    <div class="page-content">
-
-        <div class="block">
-            <div class="row" style="justify-content: center;">
-                <div class="card col-100 tablet-50">
-                    <div class="card-content card-content-padding">
-
-                        <div class="list no-hairlines">
-                            <ul>
-                                <li class="item-content item-input">
-                                    <div class="item-inner">
-                                        <div class="item-title item-floating-label">Username</div>
-                                        <div class="item-input-wrap">
-                                            <input type="text" id="username" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" pattern="[a-z0-9]+" />
-                                            <span class="input-clear-button"></span>
-                                        </div>
-                                    </div>
-                                </li>
-
-                                <li class="item-content item-input">
-                                    <div class="item-inner">
-                                        <div class="item-title item-floating-label">Password</div>
-                                        <div class="item-input-wrap">
-                                            <input type="password" id="password" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
-                                            <span class="input-clear-button"></span>
-                                        </div>
-                                    </div>
-                                </li>
-
-                            </ul>
-                        </div>
-
-                        <br />
-                        <br />
-                        <div class="button button-fill button-raised button-round button-large" onclick="setupAccount()">
-                            Sign In
-                        </div>
-                        <br />
-                        <div class="button button-outline button-raised button-round button-large" onclick="openBrowser(SETTINGS['signup_url'])">
-                            Create Account
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-    </div>
-
-    <script src="js/signin.js"></script>
-
-</div>

www/yarn.lock

@@ -36,6 +36,11 @@ leaflet.locatecontrol@^0.67.0:
   resolved "https://registry.yarnpkg.com/leaflet.locatecontrol/-/leaflet.locatecontrol-0.67.0.tgz#adfeebfd662f61d639a5a5fba362368579f8ac55"
   integrity sha512-3R8jYBwYyXc5Ka7bZvx6naWUvfmJTGJfZ2o/ZWombhCK7NkOxEpwFA3bhW9/BRZ99cLyjeNuLUaLwcPrMKYrjA==
 
+leaflet.markercluster@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5"
+  integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==
+
 leaflet@>=0.7.0, leaflet@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.5.1.tgz#9afb9d963d66c870066b1342e7a06f92840f46bf"