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.
Related
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).
In Bing Maps v7 I was able to add pushpins to an entityCollection and then loop through that collection later in the code to set options or whatever. Now, I am having trouble getting pins from the v8 layers.
Here is what I used to do in v7 after I had already added the pin to the entityCollection:
for (var i = 0; i < entityCollection.getLength() ; i++) {
var pin = entityCollection.get(i);
pin.setOptions({ visible: true });
}
I have changed the object entityCollection to a layer for v8 and I am also looping through the layer while i < entityCollection.data.length
Now, in Bing Maps v8, I'm having trouble getting the pin object from the layer that I have already added it to. The code above throws an error on the setOptions line and I have also tried getting the pin with:
entityCollection.data[i]
instead of
entityCollection.get(i)
But that doesn't work either. I'm afraid my question is too generic, because I can't find anything that actually answers my question. I have a work around, but that causes failures later when I want to hide all the pins with certain attributes. Thanks in advance!
Bing Maps v8 has done away with the entityCollection - though they say it's still sort of supported, you obviously don't want to be using deprecated things any more.
Anywhere you have an entityCollection, replace it with a Layer (Microsoft.Maps.Layer). Layers expose the getPrimitives() method which will provide you with an array of the contents.
var map = new Microsoft.Maps.Map(..., ...);
var layer = new Microsoft.Maps.Layer();
// Add layer data...
layer.add(new Microsoft.Maps.Pushpin(...));
// Add layer to map
map.layers.insert(layer);
// Then you can iterate
var layerItems = layer.getPrimitives();
var len = layerItems.length;
for(var i = 0; i < len; i++){
var pin = layerItems[i];
// Do something with your pin
pin.setOptions({visible: false});
}
Note that if you're doing mass updates to the entire contents of the layer, such as showing or hiding every pin in the layer, you can do that directly on the layer. This will save you (the browser) a chunk of work setting each pin individually.
layer.setVisible(true);
Yes, in V8 layers have a getPrimitives function which returns an array containing all the shapes. You can then loop through these shapes like you would any other array.
so, i'm working on a project that uses maps a lot, and a job was passed to me,
I have to make all this google maps Markers.
And put NUMBERS MANUALLY:
I asked if its possible to put the numbers by code, they say that is not, this need to be done this way.
So, i need to know, there is a way of changing this numbers by javascript or css or anything that could automatize this process.
It is indeed very possible - simply use the label attribute :
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.43, 10.3),
map: map,
label: '6' //<-- 6 will be the text inside the marker
});
demo with different numbers -> http://jsfiddle.net/ec2cr0jw/
But you can only add labels with one character, so your range of numbers is limited to 0..9. If you want more complex text or longer numbers in the markers, you can create the markers yourself from scratch, like in the answer to this question -> How to add values in google map v3
i need some help with google map api v3 markers.
I got an array which contains coordinates i retrieve from a file. I am trying to traverse the array, and plot them using the markers.
Traversing the array to retrieve the coordinates is not a problem, however, when i start using the coordinates to plot on google map. i realise that i am getting (NaN, NaN) as the coordinates.. Because of this, i am not able to do the plotting.. any idea why isit? Thanksss
my codes so far:
var temp = new google.maps.LatLng(myObject[o]);
retrieverouteMarker(temp);
The constructor for LatLng takes two arguments (the latitude and longitude of the point), so this line is clearly wrong:
var temp = new google.maps.LatLng(myObject[o]);
Of course, since we have to idea what myObject is, or what the function retrieverouteMarker does, there isn't much more we can do to help.
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.