I'm trying to load lot's of marker on a leaflet map
With this method :
L.marker([item.latitude, item.longitude]).addTo(this.map);
I loop for at least 100 markers and the map become really laggy after that.
Is there a way to optimize a map on which I want to display lot's of markers ?
I've used ngx-leaflet-markercluster with ngx-leaflet successfully to display 4000 markers. The plug-in uses a combination of cluster markers and regular markers that dynamically appear at certain zoom levels.
The plugin also spiderfy markers that have the same coordinates.
It works well with Angular 8.
ngx-leaflet-markercluster uses leaflet.markercluster and looks like this:
Clustering the markers is the best way to handle performance issues, in my opinion. Since that's no solution in your case, you can improve the performance by putting all the markers in one layer first and adding that single layer to your map, instead of adding all markers to the map individually.
You can compare the performance here:
Example adding grouped to map: http://jsfiddle.net/HarolddP/g12vj3mt/2/
Example adding individually to map: http://jsfiddle.net/HarolddP/euz7f6o2/
Suggested improvement:
var map = L.map('map').setView([51.5, -0.09], 3);
var markers = [];
for (var i=0; i<500; i++){
lat = ..; lng = ..;
marker = new L.marker([lat, lng]);
markers.push(marker);
}
markerGroup = L.layerGroup(markers);
markerGroup.addTo(map);
Another suggested solution is to add only the markers to the map that are in the boundary of your view.
As you can imagine, the performance also depends on what kind of markers you are using. Are they big in size? As you can see in the examples, the 500 standard leaflet markers are still performing quite well (at my machine).
Related
I have created clusters using the following method:
marker_clusters = new MarkerClusterer(map, my_markers_arr, mcOptions);
and on request I would like to uncluster them. my_markers_arr contains all the markers objects created right before clustering them. So, how can I actually reverse this, or is it even possible?
I have also tried by giving a gridSize 0 but clusters still form.
I'm using google maps api 3 along with agm (angular google maps) to place a lot of custom markers on the map. Some of these markers are low priority so i've implemented clustering (using markerClusterer) on those markers to help with performance.
However the higher priority markers need to always be above the clusters, currently clusters appear to be on their own layer and that layer is always above the markers layer.
Is there a way to force clusters and markers to be on the same layer, so I can implement a zIndex? Or at the very least, force the makers layer to be above the clusters layer.
Or alternatively, could we detect if clusters are over markers, and shift the cluster so that it's out of the way.
After working on it for ages, I found the only way to do this is to create a pane so that the getPanes method is available, from there you move the markerLayer (where the markers live) to the overlayMouseTarget, here is a semi working example:
First, set the zIndex of the marker, or markers
marker.setZIndex(9999);
marker.setMap(this.map);
I use a pretty lengthy method of checking json info in order to change the zIndex number, so for this example i'll just say all markers need to be above the cluster, then in any markers that I plan to put into the cluster, I set that marker to 10 and push to an array, then set that array to the markercluster. Now onto the layering:
const overlay = function() {};
overlay.prototype = new google.maps.OverlayView();
overlay.prototype.onAdd = function() {
const panes = this.getPanes();
for(let i = 0; i < panes.markerLayer.childNodes.length; i++) {
panes.overlayMouseTarget.appendChild(panes.markerLayer.childNodes[i]);
}
console.log(panes.overlayMouseTarget);
};
const x = new overlay();
x.setMap(this.map);
With this, this pushes all the markers and cluster into the same dom element, so the zIndex is respected.
I have different sites drawn on google map(basically polygon/circle). A site can be anywhere in the world on google map. I have center lat and long of sites(polygon/circle) in an array and I want to set the zoom level of the map so that all the sites can be seen in one view.
For e.g. if there is only one site to display in map, zoom level should be more.
Please help me in this. I am looking for javascript code.
try this hint
var latlngBounds = new google.maps.LatLngBounds();
array of latlng object;
for(i=0;i<array.length;i++){
latlngBounds.extend(array[i]);
}
map.fitBounds(latlngBounds);
I am using google map(clustering version) from the following link:
google map clusterer
everything is good and for example when I have 1000 location it clusters them but when I have 200 location and density is not high it does not clusters. I want to clusters even those that are not dense what should I do? is there anyway that I can change level of sensitivity of this google map to distance and zoom to be able to cluster even markers in a less dense area?
As you figured out which parameters to use with the above comments, here is how to pass these params to your marker cluster constructor:
var mcOptions = {
gridSize: 50,
minimumClusterSize: 10
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
Where map is your map object and markers is your markers array. The numbers used are only for example. You have to play with these to get the desired results. Hope this helps.
Swift
cluster size change worked for me this way in the latest version and its super easy
// Set up the cluster manager with the supplied icon generator and
// renderer.
let iconGenerator = GMUDefaultClusterIconGenerator()
let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
let renderer = GMUDefaultClusterRenderer(mapView: mapView,
clusterIconGenerator: iconGenerator)
renderer.delegate = self
renderer.minimumClusterSize = 5 // Here is the setting
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm,
renderer: renderer)
clusterManager.setDelegate(self, mapDelegate: self)
I currently have a implementation where some markers coming from JSON list is shown, on a particular area, Now I want to filter these marker depending upon some criteria, I have done the filtering part, and got the filtered list. Now to render this markers on the map again, The current implementation loads the js with a key again, also creates the GMap2 object and draws the list of marker on the newly created map, which is really annoying. I want map to be there and only markers to be added and removed from the map.
Any help is appreciated
You can use addOverlay and removeOverlay to add/remove markers from an already displayed map. See the examples here: http://code.google.com/apis/maps/documentation/overlays.html#Markers
var latlng = new GLatLng(lat, lng);
map.addOverlay(new GMarker(latlng));
You can make drawMap() and drawMarkers() as two separate functions. And after map has been created redefine drawMap to empty function like this:
drawMap = function(){}; After that only drawMarkers() will be executed.
Hope this is what you need. If not, provide some code.