3
votes

Any idea how I can achieve this kind of affect with Mapbox?

http://www.juwai.com/USproperty/v-1

I need to display 1.4 million points on a US map. Clustering is a good option for us and I tried with Mapbox' cluster example at https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/ but the browser loads very slowly when its more than 200,000 lat/lng pairs being passed in.

1

1 Answers

5
votes

Obviously, you can't really display "1.4 million points." It would be very burdensome for the computer, and quite impossible for the user.

Looking at this display, I'm guessing that they probably grouped the properties (in their SQL database ...) into "communities," established a (lat,lng) for each "community," and defined (also in their SQL database) a circular-marker at that point. They undoubtedly also pre-calculated the number of properties that are counted under that marker.

The next thing that they would have done is to establish a hierarchy among those circular markers. At lower (farther-away) zoom levels, some markers will no longer appear, and they will display different (larger ...) counts, which are probably simply "bubbled up" from (now, no longer displayed ...) markers "just beneath" them.

In other words: each Leaflet zoom-level has its own distinct set of markers, all of which have been calculated in-advance by the host. As the [Leaflet ...] map zooms in or out, the marker-layer's contents would be replaced with a new set of markers appropriate to that zoom level.

Calculating all of this data, and storing it in appropriate SQL database structure, would be the work of a modest script or stored-procedure that would be run periodically on the host.

At the highest (closest ...) levels of magnification, the client probably asks the host to provide a list of individual properties that fall within the (lat,lng) bounds that are actually visible on the user's display ... plus some margin. If the user scrolls the map to someplace else, then (after a short pause to be sure that the map's no longer moving ...) the host would be asked to send another set of property-points.

But a key point is that "the total number of points that [Leaflet] is being asked to display is never "unmanageable." It's the set of circles that can actually be seen, plus some margin, each circle representing up to a thousand properties. When the display finally gets down to "individual properties," the only ones that are in the point-list are those that are "nearby, plus some margin."