Locations close together now appear as one dot, expand on tap

8 years ago · fb3ea58863
parent 42d237e63d
commit fb3ea58863
16 changed files with 4914 additions and 3 deletions
--- a/platforms/android/.gradle/2.13/taskArtifacts/cache.properties.lock
+++ b/platforms/android/.gradle/2.13/taskArtifacts/cache.properties.lock
--- a/platforms/android/.gradle/2.13/taskArtifacts/fileHashes.bin
+++ b/platforms/android/.gradle/2.13/taskArtifacts/fileHashes.bin
--- a/platforms/android/.gradle/2.13/taskArtifacts/fileSnapshots.bin
+++ b/platforms/android/.gradle/2.13/taskArtifacts/fileSnapshots.bin
--- a/platforms/android/.gradle/2.13/taskArtifacts/taskArtifacts.bin
+++ b/platforms/android/.gradle/2.13/taskArtifacts/taskArtifacts.bin
--- a/platforms/android/.gradle/2.13/tasks/_compileDebugJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
+++ b/platforms/android/.gradle/2.13/tasks/_compileDebugJavaWithJavac/localClassSetAnalysis/localClassSetAnalysis.lock
--- a/platforms/android/.gradle/2.13/tasks/_compileDebugJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.bin
+++ b/platforms/android/.gradle/2.13/tasks/_compileDebugJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.bin
--- a/platforms/android/.gradle/2.13/tasks/_compileDebugJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
+++ b/platforms/android/.gradle/2.13/tasks/_compileDebugJavaWithJavac/localJarClasspathSnapshot/localJarClasspathSnapshot.lock
--- a/platforms/android/assets/www/css/MarkerCluster.css
+++ b/platforms/android/assets/www/css/MarkerCluster.css
@ -0,0 +1,75 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+    /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+    -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+    -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+    -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+    transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}
+
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}
--- a/platforms/android/assets/www/index.html
+++ b/platforms/android/assets/www/index.html
@ -26,6 +26,7 @@
        <link href="css/font-awesome.css" rel="stylesheet">

        <link href="css/L.Control.Locate.css" rel="stylesheet">
+        <link href="css/MarkerCluster.css" rel="stylesheet">

        <!-- jQuery Version 1.11.1 -->
        <script src="js/jquery.js"></script>
@ -46,6 +47,7 @@

        <script src="js/leaflet.js"></script>
        <script src="js/L.Control.Locate.min.js"></script>
+        <script src="js/leaflet.markercluster.js"></script>
    </head>

    <body>
--- a/platforms/android/assets/www/js/leaflet.markercluster.js
+++ b/platforms/android/assets/www/js/leaflet.markercluster.js
--- a/platforms/android/assets/www/js/location.js
+++ b/platforms/android/assets/www/js/location.js
@ -52,7 +52,15 @@ var placeLayer = L.geoJson(
                    fillOpacity: 0.6
                });
            }
-        }).addTo(map);
+        });//.addTo(map);
+        
+var placemarkers = L.markerClusterGroup({
+    spiderfyDistanceMultiplier: 2,
+    showCoverageOnHover: false,
+    zoomToBoundsOnClick: false
+});
+placemarkers.addLayer(placeLayer);
+map.addLayer(placemarkers);

 var lc = L.control.locate({
    position: 'topleft', // set the location of the control
@ -126,10 +134,12 @@ function loadPlaces(lat, long) {
                function (data) {
                    if (data.type === 'FeatureCollection') {
                        placeLayer.clearLayers();
+                        placemarkers.clearLayers();
                        data.features.forEach(function (item) {
                            item.properties.popupContent = "<span class='marker-popup-text' onclick='openPlace(" + item.properties.osm_id + ")'>" + item.properties.name + "</span>";
                            placeLayer.addData(item);
                        });
+                        placemarkers.addLayer(placeLayer);
                    }
                }
        );
--- a/platforms/android/assets/www/js/user.js
+++ b/platforms/android/assets/www/js/user.js
@ -58,7 +58,7 @@ setInterval(function () {
 }, 10 * 1000);
 setInterval(function () {
    getChat();
-}, 2000);
+}, 3000);
 // Send chat messages
 $("#chatsendform").submit(function (event) {
    message = $('#chatbox-input').val();
--- a/www/css/MarkerCluster.css
+++ b/www/css/MarkerCluster.css
@ -0,0 +1,52 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+    /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+    -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+    -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+    -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+    transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}
+
+.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
+    background-color: rgba(181, 226, 140, 0.6);
+}
+.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
+    background-color: rgba(110, 204, 57, 0.6);
+}
+/*
+.marker-cluster-medium {
+    background-color: rgba(241, 211, 87, 0.6);
+}
+.marker-cluster-medium div {
+    background-color: rgba(240, 194, 12, 0.6);
+}
+
+.marker-cluster-large {
+    background-color: rgba(253, 156, 115, 0.6);
+}
+.marker-cluster-large div {
+    background-color: rgba(241, 128, 23, 0.6);
+}*/
+
+.marker-cluster {
+    background-clip: padding-box;
+    border-radius: 20px;
+}
+.marker-cluster div {
+    width: 30px;
+    height: 30px;
+    margin-left: 5px;
+    margin-top: 5px;
+
+    text-align: center;
+    border-radius: 15px;
+}
+.marker-cluster span {
+    line-height: 30px;
+}
--- a/www/index.html
+++ b/www/index.html
@ -26,6 +26,7 @@
        <link href="css/font-awesome.css" rel="stylesheet">

        <link href="css/L.Control.Locate.css" rel="stylesheet">
+        <link href="css/MarkerCluster.css" rel="stylesheet">

        <!-- jQuery Version 1.11.1 -->
        <script src="js/jquery.js"></script>
@ -46,6 +47,7 @@

        <script src="js/leaflet.js"></script>
        <script src="js/L.Control.Locate.min.js"></script>
+        <script src="js/leaflet.markercluster.js"></script>
    </head>

    <body>
--- a/www/js/leaflet.markercluster.js
+++ b/www/js/leaflet.markercluster.js
--- a/www/js/location.js
+++ b/www/js/location.js
@ -52,7 +52,15 @@ var placeLayer = L.geoJson(
                    fillOpacity: 0.6
                });
            }
-        }).addTo(map);
+        });//.addTo(map);
+        
+var placemarkers = L.markerClusterGroup({
+    spiderfyDistanceMultiplier: 2,
+    showCoverageOnHover: false,
+    zoomToBoundsOnClick: false
+});
+placemarkers.addLayer(placeLayer);
+map.addLayer(placemarkers);

 var lc = L.control.locate({
    position: 'topleft', // set the location of the control
@ -126,10 +134,12 @@ function loadPlaces(lat, long) {
                function (data) {
                    if (data.type === 'FeatureCollection') {
                        placeLayer.clearLayers();
+                        placemarkers.clearLayers();
                        data.features.forEach(function (item) {
                            item.properties.popupContent = "<span class='marker-popup-text' onclick='openPlace(" + item.properties.osm_id + ")'>" + item.properties.name + "</span>";
                            placeLayer.addData(item);
                        });
+                        placemarkers.addLayer(placeLayer);
                    }
                }
        );