How to use Framer + Mapbox rapidly prototyping map cluster

Map Cluster

When there is huge amount data to be displayed on a map, you can not put them all together. Visually, human eye cannot process so many stimulations at the same time. In addition, brain also cannot abstract those information. The best way is using cluster. The reason of that is progress disclosure. Specifically, as an user, we usually do not need to know every POI’s location. More frequently, knowing aggregated data, such as which area has more POI density, is more important. For example, when you zoom a map of population to global level, you are expecting the total population of countries. On the contrary, when you zoom into US level, you expecting population of states. Therefore, using map cluster is the best solution.

However, in prototype, dynamic map cluster is almost impossible to achieve, especially simulating tons of POI into clusters.

Using Framer + Mapbox can solve the problem.

Step1, add POI data

POIs usually stored as geojson type for frontend engineer(usually in form of geom in database). Generate some sample POI data from DB in the form of geojson and import them into Mapbox dataset, lets call it clients dataset.

1500POI in Mapbox dataset

copy the dataset ID ：

Copy the Dataset ID

Step 2, add the dataset id into Framer

add the dataset id(clientID here, please ignore datasetID in the pic below) as constant in Framer.

Step3, add the dataset to Mapbox map

the original example of Mapbox map cluster:

Create and style clusters | Mapbox

However, you need to convert JavaScript into Coffeescript:

# fetch the feature from the Client dataset
mapboxClient.listFeatures(clientID, {},
(err, clientset) ->
print err if err
)
# add Client dataset to map, you can set the clusterMaxZoom and clusterRadius parameters here. 
map.on("load", () ->
map.addSource("clients",{"type": "geojson", "data": clientset, cluster: true, clusterMaxZoom: 14, clusterRadius: 50})
)）
# according data visualization theory, qualitative data using qualitative visualize parameter, such as radius here; thus adding point count and radius pair(not point count and color pair in the Mapbox example)
layers = [
[150, 40],
[20, 30],
[0, 22]
]
# add three layers to represent different point count, 0-20 points using 22 radius, 20-150 using 30 radius and over 150 using 40 radius
ayers.forEach((layer, i) ->
map.addLayer({
"id": "cluster-" + i,
"type": "circle",
"source": "clients",
"paint": {
"circle-color": '#1BBC9B',
"circle-radius": layer[1]
},
'filter': if (i == 0) then ['>=', 'point_count', layer[0]] else ['all', ['>=', 'point_count', layer[0]], ['<', 'point_count', layers[i-1][0]]]
})
)
# add a count number layer
map.addLayer({
"id": "cluster-count",
"type": "symbol",
"source": "clients",
"layout": {
"text-field": "{point_count}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-size": 18
}
})

The result :