Develop Reference

Add Leaflet Search through a Feature Group

Similar to Search for markers in a markercluster group Leaflet-MarkerCluster
But i am using a Control group ontop of Marker Cluster so they will be displayed upon a radio button click.
var map = L.map("map"),
parentGroup = L.markerClusterGroup(options), // Could be any other Layer Group type.
// arrayOfMarkers refers to layers to be added under the parent group as sub group feature
mySubGroup = L.featureGroup.subGroup(parentGroup, arrayOfMarkers);
parentGroup.addTo( map );
mySubGroup.addTo( map );
I am attempting to implement Leaflet Search - but as per the documentation says it requires a group layer of markers as the second parameter for it work. Trouble is using L.featureGroup.subGroup requires an array of markers.
Attempted to iterate through mySubGroup at run time to get the layers of markers using Leaflet eachLayer but this will duplicate the amount of markers i have on the map for the search to work.
var markersLayer = new L.LayerGroup().addTo( this.map );
forEach( mySubGroup, layers => {
layers.eachLayer( function (layer ) {
console.log ( layer );
markersLayer.addLayer( layer );
})
});
map.addControl( new L.Control.Search({layer: markersLayer}) );

Solved this issue - though it's quite inefficient. If you can find a more elegant solution to avoid duplication then feel free to contribute it as an answer!
var title = layer.options.title;
// iterate through the cluster points
forEach( mySubGroup, layers => {
layers.eachLayer(function (layer) {
var title = layer.options.title; // match the search title to marker title
marker = new L.Circle(new L.LatLng(layer.getLatLng().lat,layer.getLatLng().lng),
{radius: 0, title: title, fill: 'red', fillOpacity: 0, opacity: 0 }); // Create an invisible L circle marker for each cluseter marker
markersLayer.addLayer(marker);
})
});
You then add the markersLayer to the Leaflet Search

Mapbox marker clustering with JSON not GeoJSON

I am trying to use marker clustering because I have over 2000 markers being mapped currently, but I am not sure how to implement it with the way that I am loading the markers. Do I have to use a GeoJSON in order to use marker clustering? I would prefer to not use GeoJSON if possible, I am using a JSON file at the moment and looping through the data stored on Firebase. I would like to use the supercluster library if possible (https://github.com/mapbox/supercluster) but I am not sure what to load into index.load(points). Is clustering possible the way I have my code at the moment?
var markers = [];
allMarkers();
function allMarkers() {
for (var i = 0; i < data.length; i++) {
var marker = document.createElement("div");
marker.className = "marker";
marker.style.backgroundImage = "url(./icons/all.png)";
marker.style.backgroundSize = "100%";
marker.style.backgroundRepeat = "no-repeat";
marker.style.width = "25px";
marker.style.height = "25px";
marker.style.filter = "drop-shadow(0px 5px 6px #000000)";
new mapboxgl.Marker(marker)
.setLngLat([data[i].Long, data[i].Lat])
.setPopup(
new mapboxgl.Popup()
.setHTML(
""
).on("close", function() {
}).on("open", function() {
zoom = map.getZoom();
if (zoom < 17) {
map.flyTo({
center: [this._lngLat.lng, this._lngLat.lat],
zoom: 17
});
} else {
map.flyTo({
center: [this._lngLat.lng, this._lngLat.lat]
});
}
}).setMaxWidth("400px")
)
.addTo(map);
markers.push(marker);
}
}

The easiest way to do clustering in Mapbox-GL-JS is using a GeoJSON source with cluster: true as in this example. It doesn't matter that your data is being sent to the browser as some other format, you can convert it into GeoJSON easily and then add it.
Currently you are representing your points using Markers, rather than a layer within the map such as circle or symbol. That would be more complex to combine with clustering, as you would need to create and destroy markers on demand, as the user zooms in and out. It will be much simpler to manage with a map layer, although it will limit your ability to style the marker symbols.

Optimization for map data

I have large amount of markers I want to display based on user viewpoint. I am looking for most efficient way I can quickly update my map when user changes a viewpoint. In other words display only these markers which falls into bounds (lg, ln).
Currently my solution is following:
On page load pull all data about all places from server and store it in array.
Update map
Every time user drags map remove old markers and place new which falls into bound
Current solutions works but slow and inefficient, to complexity to refresh a map O(N*M) where N old markers which needs to be removed and M new markers which needs to be placed on the map.
I wonder if someone has idea how to make it as faster than this?
How about detecting only the markers which needs to be updated (removed/added)?
I am generally looking for any optimization suggestions - that might be algorithmic improvement, technology or architectural (processing on backend?).
Current code:
var places = function(){} // Some function that pulls a lot of places on page load
function updatePlaces(places){
google.maps.Map.prototype.clearMarkers();
if(places != null){
for(var i = 0; i < places.length; i++){
var lat = places[i].lat;
var lng = places[i].lng;
var position = new google.maps.LatLng(lat, lng);
if(map.getBounds().contains(position) && placedMarkers < markerLimitNumber) {
var marker = new MarkerWithLabel({
position: position,
draggable: false,
raiseOnDrag: true,
map: map,
labelContent: '',
labelAnchor: new google.maps.Point(-10, 15),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.0},
icon: 'images/markers/grey_circle_small.png'
});
marker.addListener('click', function(){});
markers.push(marker);
placedMarkers = placedMarkers + 1;
}
}
}
}
google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i < markers.length; i++){
markers[i].setMap(null);
}
markers = new Array();
placedMarkers = 0;
};

You could try using Google Map Marker Clusterer. It hides the markers at low zoom levels and displays them at higher zoom levels and allows addition of a large number of markers.

Here is a good article on this
https://www.mapbox.com/blog/supercluster/?utm_source=newsletter_april&utm_medium=email&utm_content=supercluster&utm_campaign=newsletter_april
Please take a look

Google Maps - get values from location array based on the map's current viewpoint

Edit:
Question = "is there a way to loop through the array and check if each location (long/lat) falls within the current viewport directly" (failing that get all markers within the viewport)
Background:
I have an array of locations (lat, long, id).
I want to:
On a Google Map, use the location array to display markers.
The user can scroll/zoom the map.
Have a button underneath the map, so when the user has decided on an area, he can click the button, and the code will return the ids (from the location array) that are contained within the viewport / map bounds.
There is a .contains for Google, so I guess you could potentially use that with something like
map.getBounds().contains and somehow reference each marker.getPosition()
but I wonder if there's a way to loop through the array and check if each location (long/lat) falls within the current viewport directly

You mean something like this (not tested), map is the google.maps.Map object and needs to be in scope. markersArray is the array of markers.
for (var i=0; i< markersArray.length; i++) {
if (map.getBounds().contains(markersArray[i].getPosition())) {
// the marker is in view
} else {
// the marker is not in view
}
}

http://jsfiddle.net/UA2g2/1/
Thanks geocodezip, you gave me the idea on how to solve it via looping through the array. I don't know if this is the most efficient way, but I put together some code that seems to do what I want - if you check the jsfiddle above and view console you can see that it logs when and which points are in the viewport.
$(document).ready(function(){
var myOptions = {
center: new google.maps.LatLng(51, -2),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var storeArray = new Array(["51.38254", "-2.362804", "ID1"], ["51.235249", "-2.297804","ID2"], ["51.086126", "-2.910767","ID3"]);
google.maps.event.addListener(map, 'idle', function() {
for (i = 0; i < storeArray.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(storeArray[i][0], storeArray[i][1]),
map: map
});
}
for (var i=0; i<storeArray.length; i++) {
if (map.getBounds().contains(new google.maps.LatLng(storeArray[i][0], storeArray[i][1]))) {
console.log("marker: " + storeArray[i][2]);
}
}
});
});

check if map markers are within selected bounds

I have a map with various markers and i need to be able to draw a rectangle on the map and select the markers which are within the rectangle bounds.
So far i have found some great info here: How to get markers inside an area selected by mouse drag?
I have implemented the keymapzoom plugin ok. like so
$('#dispatcher').gmap3({action:'get'}).enableKeyDragZoom({
boxStyle: {
border: "dashed black",
//backgroundColor: "red",
opacity: 0.5
},
paneStyle: {
backgroundColor: "gray",
opacity: 0.2
}
});
var dz = $('#dispatcher').gmap3({action:'get'}).getDragZoomObject();
google.maps.event.addListener(dz, 'dragend', function (bnds) {
alert(bnds);
});
This gives me the following
((lat,long),(lat,long)) format from the alert(bnds);
I need to know how i can now check if any markers are within this?
I already have an object that is storing the markers for another reason. like:
markers[name] = {};
markers[name].lat = lati;
markers[name].lng = longi;
which might be useful?
I don't understand how to use the GLatLngBounds and containsLatLng(latlng:GLatLng) as suggested.

Your question is tagged with the v3 version of the Maps API, so I'll assume you are using that version (which you should as v2 is deprecated). Note that some classes and methods are named different than in your question.
Bounds are represented with the LatLngBounds class. You can perform the contains method on an instance of that class to determine if a point lies within those bounds.
If you have an object with all your markers, you can loop through them and check each marker, for example:
var bounds = new google.maps.LatLngBounds(sw, ne);
for (var a in markers) {
if (bounds.contains(new google.maps.LatLng(markers[a].lat, markers[a].lng)) {
// marker is within bounds
}
}
On a side note, I would store the LatLng object in the markers object when creating them. That way you don't have to create them wherever you need.

Box/Rectangle Draw Selection in Google Maps
This was my solution..
google.maps.event.addListener(dz, 'dragend', function(e) { //important listener
for(var i = 0; i < markers.length; i++){ // looping through my Markers Collection
if(e.contains(markers[i].position))
console.log("Marker"+ i +" - matched");
}
});