Add HTML clusters + aggregated properties example #8019
Conversation
docs/pages/example/cluster-html.js
Outdated
| @@ -0,0 +1,10 @@ | |||
| /*--- | |||
| title: Display HTML clusters with custom properties | |||
| description: An advanced example of using Mapbox GL JS clustering with HTML markers and custom property expressions. | |||
There was a problem hiding this comment.
Outlining the general strategy that the example takes would be very useful here to set context for the code.
There was a problem hiding this comment.
Can you elaborate? Even the general strategy would need description that seems too long for the purpose.
There was a problem hiding this comment.
Maybe it can be added in the code section then?
Strategy would Outline that this example is using clustered GeoJSON with filtered layers and continuously updating Markers.
There was a problem hiding this comment.
Right — I've extended the description.
df1c10b to
5d9d17a
Compare
docs/pages/example/cluster-html.js
Outdated
| @@ -0,0 +1,10 @@ | |||
| /*--- | |||
| title: Display HTML clusters with custom properties | |||
| description: An advanced example of using Mapbox GL JS clustering with HTML markers and custom property expressions. To be able to use HTML or SVG for clusters in place of a Mapbox GL layer, we have to manually synchronize the clustered source with a pool of marker objects that we update continuously while the map view changes. | |||
There was a problem hiding this comment.
A few suggestions that (hopefully) simplify the language without making anything untrue:
This advanced example uses Mapbox GL JS clustering with HTML markers and custom property expressions. To use HTML or SVG for clusters in place of a Mapbox GL layer, you have to manually synchronize the clustered source with a pool of marker objects that updates continuously while the map view changes.
There was a problem hiding this comment.
@colleenmcginnis thanks, updated!
* publisher-production: (41 commits) bump publisher after timeout (#8058) cosmetic update to draggable Marker/point examples to prevent coordinates overlapping Mapbox logo (#8057) update mapbox style and tileset version numbers to most recent (#8056) update docs page shell (#8039) mapbox-gl-geocoder@3.1.6 Add create-image script to generate example thumbnails (#8029) Add HTML clusters + aggregated properties example (#8019) add 3D model with three.js example (#7977) update mapbox-gl-geocoder to @3.1.4 in examples (#7978) V0.53.1 (#7961) rename example for accepting coordinates in the geocoder (#7859) [docs] use appropriate-images for examples to increase page speed (#7900) [docs] dr-ui 0.6.0 (#7909) version bump gl-geocoder to v3.1.2 (#7924) Fix docs for Camera methods Docs page shell update 02-14-19 (#7907) fixes regression with css on examples pages (#7891) updates sentry project for docs subdomain (#7890) v0.53.0 (#7884) [docs] update dr-ui 0.5.0 (#7880) ...
* publisher-production: (41 commits) bump publisher after timeout (#8058) cosmetic update to draggable Marker/point examples to prevent coordinates overlapping Mapbox logo (#8057) update mapbox style and tileset version numbers to most recent (#8056) update docs page shell (#8039) mapbox-gl-geocoder@3.1.6 Add create-image script to generate example thumbnails (#8029) Add HTML clusters + aggregated properties example (#8019) add 3D model with three.js example (#7977) update mapbox-gl-geocoder to @3.1.4 in examples (#7978) V0.53.1 (#7961) rename example for accepting coordinates in the geocoder (#7859) [docs] use appropriate-images for examples to increase page speed (#7900) [docs] dr-ui 0.6.0 (#7909) version bump gl-geocoder to v3.1.2 (#7924) Fix docs for Camera methods Docs page shell update 02-14-19 (#7907) fixes regression with css on examples pages (#7891) updates sentry project for docs subdomain (#7890) v0.53.0 (#7884) [docs] update dr-ui 0.5.0 (#7880) ...
Closes #4491. An official example for using custom HTML (or SVG) elements for clusters, along with the new
customPropertiesAPI. It's an advanced example with quite a bit going on, but I think it's still worth adding.Most of the complexity is in the donut chart generation logic, which is not important for the key features covered, but makes for a pretty and useful example.