We Keep Coding

Leaflet + prunecluster: get the list of the clusters that are shown in the map

I'm working on a leaflet map where many markers are shown with prunecluster, and I need to get the list of clusters that are currently shown in the map.
I have initialized the clusters with
var pruneCluster = new PruneClusterForLeaflet(150, 70);
The only array of the cluster I'm seeing in the developers tools and in the code is pruneCluster.Cluster._clusters. Actually it is a mostly exact representation of the clusters shown in the map, but, sometimes, the length of that array is different from the number of clusters that are shown in the map. I.e., that array doesn't represent the situation I have in the map.
What array should I use?

That pruneCluster.Cluster._clusters contains all the clusters it calculated, but since you can pan and zoom the map, the visible clusters can be a subset of it.
You can iterate over the clusters and test if they are visible. Like this:
// Get the bounds of the map visible in the browser
// 'map' is your Leaflet map
var boundsOfView = map.getBounds();
// Iterate all prune clusters
var allClusters = pruneCluster.Cluster._clusters;
var clustersInView = [], clusterBounds;
for (var i = 0; i < allClusters.length; i += 1) {
clusterBounds = allClusters[i].bounds;
// Is this cluster visible? (within the visible bounds?)
if (boundsOfView.intersects([[clusterBounds.minLat, clusterBounds.minLng], [clusterBounds.maxLat, clusterBounds.maxLng]])) {
// Yes, visible, so store it
clustersInView.push(allClusters[i]);
}
}
// Now you have all your visible clusters in 'clustersInView'
It is using these Leaflet methods:
getBounds() to get the bounds of the visible part of the map
intersects() to test if the boundaries of a cluster intersect the bounds of the map, i.e. visible or not
And of PruneCluster:
bounds (line 83 in the source code), which contains the min/max coordinates of a cluster
Hope it helps!

Google Maps JS API, Hide Map Marker Where 'place_id' Equals

I have a Google Map object available on my window object like so:
var map = window.site.map.el;
That Map also also has a bunch of markers placed on it, I'd like to hide a Marker on that Map where the marker's place_id property is equal to "123" for example.
However I don't see a function I can call on the Map class that will return me an array of all markers placed on the map that I can then loop through and hide depending on the marker's place_id.

Google maps does not provide a way to get all Markers, you need to do it yourself
while adding marker to the map keep it in array
var myMarkers = [];
....
for(...) {
var marker = new google.maps.Marker({...});
myMarkers.push(marker);
}
Than you can hide any marker, just by setting map to null
myMarker[i].setMap(null);
Or bring it back
myMarker[i].setMap(map);

Add clients current locatio to Google map but only if it is within the bounds of marker array

We have built a database driven map application as an asp.net module within a CMS. We have multiple categories of maps (Schools, car parks , local attractions, recyling sites etc etc) each with their own custom markers.
We center and locate the map using map.fitbounds(latLngBound) according to the array of categories selected.
All works great but is it possible to add a users current location to the map but only if it is within a specific boundry i,e a city centre or the map.fitbounds(latLngBound)

The LatLngBounds class has a contains method that allows you to check if a LatLng is within the given bounds.
https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLngBounds
Where userLocationLatLng would be your user location as a LatLng object:
var bounds = new google.maps.LatLngBounds();
if (bounds.contains(userLocationLatLng)) {
// Do something
}

Google Maps Js API only loads first route

I created a prototype for a project I'm working on, in which the user should create various markers in a map, be able to remove them, calculate a route with the markers, and go back to manage the markers.
I used some code found here in geocodezip.com to calculate the route, and wrote some for the markers, etc.
My problem is that once the user calculates the route, no matter how he edits the markers, when clicking the button to calculate the route, the map only returns the route with the markers that were there on the first time he clicked the button. And the strangest thing is that I checked the coordinates that are being passed to the script that generates the route and the function is sending the markers as it should, but no matter the coordinates sent, it only works correctly on the first time.
Js Fiddle: https://jsfiddle.net/1kmg2u65/2/
The code is really really long so it's all in the Fiddle, but this is what it does:
1. User clicks on map, generate marker, marker goes to an array
2. If user deletes marker, it becomes null in array, to maintain the indexes
3. 'Clean' markers array receives all the markers in order, without the items that are null
4. A function is called with all the markers, this function creates the route
5. To manage the markers, a function reload the map just like it was in the start, but render all the markers that already are in the markers array

it works fine if you remove the conditional if (!window.tour) in Tour_startUp function definition.

So here is what I believe is going on.
In the function markMap() you are instantiating new markers that belong to the google map object.
for (var i = 0; i < markerElements.length; i++){ //Loop para gerar os marcadores
if (markerElements[i] != null){
marker = new google.maps.Marker({
position: markerElements[i].position,
map: map,
title: markerElements[i].title
});
}
}
This if fine, but you are not storing that constructed object anywhere. You need to be able to reference that marker to UN-associate it from the map.
At the end of the this for loop you need to add THAT mark to a global array so you can manage it later in the script.
EXAMPLE
// defined at the top of the script
var markerGlobal = [];
for (var i = 0; i < markerElements.length; i++){ //Loop para gerar os marcadores
if (markerElements[i] != null){
marker = new google.maps.Marker({
position: markerElements[i].position,
map: map,
title: markerElements[i].title
});
// push marker onto global array
markerGlobal.push(marker);
}
}
Now we can loop through the array and setMap to null
// un-reference marker from map
markerGlobal[2].setMap(null);
I see you tried to do this with the removeMarker() function, but it doesn't have the handles to the markers already added to the map.
Some Suggestions
If I was you, I would think about refactoring the code to have one multi dimensional object that holds all the markers, their row info, variables etc.
You could take it one step further and create a constructor function that handles the map and its associated markers. It would be most efficient.
Good luck.

jvectormap marker color problems

I'm trying to use jvectormap to create a map of the US with markers. I want these markers to either be red or blue and I would like to specify which color goes to which marker manually (not using any sort of scale or overly complicated data visualization function). Is there a way to do this? The new jvectormap's API is way too abstract for me to easily implement this.
I've tried using the old jvectormap but it appears it is buggy and doesn't show the markers in the correct locations.

Here is an example of two different types of markers based on a third element in the list of markers called type. I essentially created another array called colors used for the values in the data series representation. The loop right before the map is created iterates through the list of markers and pulls out the type and decides what the color value should be based on the type.
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == 'call-center') {
colors[i] = 0;
}
else {
colors[i] = 1;
};
};
Similar setups can be achieved for different types if you add additional if statements.