Locations close together now appear as one dot, expand on tap
This commit is contained in:
parent
42d237e63d
commit
fb3ea58863
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
75
platforms/android/assets/www/css/MarkerCluster.css
Normal file
75
platforms/android/assets/www/css/MarkerCluster.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
2380
platforms/android/assets/www/js/leaflet.markercluster.js
Normal file
2380
platforms/android/assets/www/js/leaflet.markercluster.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -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);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -58,7 +58,7 @@ setInterval(function () {
|
||||
}, 10 * 1000);
|
||||
setInterval(function () {
|
||||
getChat();
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
// Send chat messages
|
||||
$("#chatsendform").submit(function (event) {
|
||||
message = $('#chatbox-input').val();
|
||||
|
||||
52
www/css/MarkerCluster.css
Normal file
52
www/css/MarkerCluster.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
2380
www/js/leaflet.markercluster.js
Normal file
2380
www/js/leaflet.markercluster.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -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);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user