This is a library to facilitate communication between mapboxgl
maps, crossfilter
filters, and dc.js
charts. This library draws heavily on the designs of the DC.Leaflet.js plugin. However, without the conception of an overlay layer, much of the code was changed to support the mapbox message passing interface. It is not finished, but works moderately well for simple tasks.
There is a live demo here
Most of the options are currently set in the map options, though some are set via the chained methods common in d3. Only a single chart is currently supported -- a map with a circles
overlay. The map extends the dc base chart mixin and the mapbox base map class. The map supports filtering by map bounds and live updating from filters applied on other dc charts on the page.
You must have a mapboxToken
to use the mapbox API, you can get one here. The parent
is the container into which you want to put the new chart.
Constructor: dc_mapbox.pointSymbolMap(parent, mapboxToken, options, chartGroup)
Options:
center:
Center of the map at session start (defaultnew mapboxgl.LngLat(0, 0)
)zoom
: Zoom level of map at session start (default4
)pointType
: Type of symbol to display. Currently onlycircle
is supported. (defaultcircle
)pointColor
: Color of the symbol (defaultred
)pointRadius
: Radius of the symbol (default4
)brushOn
: Does the map fire filter events as it is browsed? (defaulttrue
)style
: Vector tileset for the map (default'mapbox://styles/mapbox/streets-v9'
)renderPopup
: Should a popup appear on click? (defaulttrue
)
Methods:
.dimension(crossfilterDimension)
: set the crossfilter dimension for the chart. Currently must return amapboxgl.LngLat
object (REQUIRED).dimension(crossfilterGroup)
: set the crossfilter grouping for the chart. (REQUIRED).brushOn(boolean)
: Get or set thebrushOn
property.
Example
var mapOptions = {
style: 'mapbox://styles/sfarley2/ciz0ar5g7000q2spdnhi4m3m5', //set to tileset of choice
pointColor: 'red', //modify circle narker properties
pointRadius: 3,
pointType: "circle",
//set initial zoom
center: new mapboxgl.LngLat(-74.0059, 40.7127),
zoom: 9,
}
var myToken = "my/mapbox/token/"
facts = crossfilter(data)
//4. Geo lat/lng dimension
geoDimension = facts.dimension(function(d){
return new mapboxgl.LngLat(d.Longitude, d.Latitude)}
);
geoGroup = geoDimension.group().reduceCount();
//make a new map and add the points
var mapChart = dc_mapbox.pointSymbolMap("#map", myToken, mapOptions)
.dimension(geoDimension)
.group(geoGroup)
An annotated source for the library can be found here and an commented example can be found in the examples folder of this repository, with html and javascript.
- Mapbox data styling functions