Raw code that builds a mapbox.js layer utilizing heatmap.js

heatmap.coffee

# some raw code that builds a mapbox.js layer utilizing heatmap.js

class D3Layer
    constructor: (@map, points) ->
        @enabled = true
        @svg = d3.select(@map.parent)
                .append('svg')
                .attr('class', 'd3layer')
        @heat = d3.select(@map.parent)
                .append('div')
                .attr('class', 'd3layer heatmap')
        @points = points or []
        @zoom = @map.zoom()
        @parent = @svg.node()
        @heatmap = h337.create({
            radius: 10,
            opacity: 50,
            element: @heat.node() })
        @map.addCallback('zoomed', (map, offset) =>
            @zoom += offset

    named: (name) ->
        if name
            @name = name
            return @name
        else
            return @name

    data: (points) ->
        @points = points
        @draw()

    project: (location) ->
        point = @map.locationPoint({ lat: location[1], lon: location[0] })
        return [point.x, point.y]

    draw: () ->
        if not @enabled
            return
        mapsize = {
            width: $(@parent).width(),
            height: $(@parent).height(),
        }
        extents = @map.getExtent()
        visible = @points.filter((p) ->
            x = extents.west <= p.get('coords').lng <= extents.east
            y = extents.south <= p.get('coords').lat <= extents.north
            return x && y
        )

        drawn = _.map(visible, (d) =>
            coords = d.get('coords')
            return {
                geometry: {
                    coordinates: [coords.lng, coords.lat]
                },
                properties: {
                    radius: 1000 / clustr.resolutions[@zoom],
                    id: d.id,
                }
            }
        )

        if visible.length < MAP_MARKER_MAX
            if @heatmap.get('visible')
                @heatmap.toggleDisplay()

            markers = @svg.selectAll('circle').data(drawn, (d) -> return d.properties.id)

            markers
                .attr('r', (d) -> return d.properties.radius)

            markers.enter().append("circle")
                .attr('r', zeroish)
                .attr('opacity', zeroish)
                .attr('fill', '#F16635')
                .transition().duration(450)
                .attr('r', (d) -> return d.properties.radius)
                .attr('opacity', 0.3)

            markers
                .attr('transform', (d) =>
                    return 'translate(' +
                        @project(d.geometry.coordinates) + ')' )

            markers.exit()
                .transition().duration(450)
                .attr('r', zeroish)
                .attr('opacity', zeroish)
                .remove()
        else
            @svg.selectAll('circle').remove()
            @heatmap.store.setDataSet({
                max: 1,
                data: _.map(visible, (d) ->
                    coords = d.get('coords')
                    point = @map.locationPoint({lon: coords.lng, lat: coords.lat})
                    return {x: point.x, y: point.y}
                    )
                })
            if not @heatmap.get('visible')
                @heatmap.toggleDisplay()

    enable: (enabled) ->
        enabled = true if enabled == undefined
        @enabled = enabled;
        @parent.style.display = if @enabled then '' else 'none';
        return @

    disable: () ->
        @enable(false)