Marker Dispersion

Uses d3-force to disperse overlapping markers on a mapbox-gl map.

Markers are tethered to their actual location, but have a collision force based on the radius of the icon. An additional force pulls icons towards their previous location (locations are calculated each time you move the map) to avoid markers jumping around excessively as they settle into different local minima on each re-draw.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>
<script src='https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
<style>
html, body {
  padding: 0;
  margin: 0;
}
#map {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
</style>
<div id="map" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var pointLayers = ['poi']
var epsilon = 0.1

mapboxgl.accessToken = 'pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg';

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
}).on('load', onLoad)

function onLoad () {
  var prevOffsets = {}
  var origTextOffsets = pointLayers.reduce(function (acc, layerId) {
    acc[layerId] = map.getLayoutProperty(layerId, 'text-offset')
    return acc
  }, {})

var simulation = d3.forceSimulation()
    .force('anchorX', d3.forceX(function (d) {return d.anchorX}).strength(0.3))
    .force('anchorY', d3.forceY(function (d) {return d.anchorY}).strength(0.3))
    .force('prevPosX', forcePrevX(function (d) {return d.prevX}).strength(0.1))
    .force('prevPosY', forcePrevY(function (d) {return d.prevY}).strength(0.1))
    .force('collide', d3.forceCollide(function (d) {return getRadius(map, d.f)}).strength(1))
    .stop()

map.on('moveend', updateNodes)

updateNodes()

function updateNodes () {
    var anchorLinks = []
    var prevPosLinks = []

var nodes = getFeatures(map, pointLayers).map(function (f, i) {
      var prevOffset = prevOffsets[f.properties.osm_id]
      var point = f.point = map.project(f.geometry.coordinates)
      var node = {
        f: f,
        x: point.x + (prevOffset ? prevOffset[0] : 0),
        y: point.y + (prevOffset ? prevOffset[1] : 0),
        anchorX: point.x,
        anchorY: point.y,
      }
      if (prevOffset) {
        node.prevX = node.x
        node.prevY = node.y
      }
      return node
    })

simulation
      .nodes(nodes)
      .alpha(1)

for (var i = 0; i < 120; i++) simulation.tick()

render()

function render () {
      var offsets = {}
      nodes
        .filter(function (n) {
          return !n.fx
        })
        .sort(function (a, b) {
          return a.f.properties.osm_id - b.f.properties.osm_id
        })
        .forEach(function (node) {
          var feature = node.f
          var layerId = feature.layer.id
          var featureId = feature.properties.osm_id
          var dx = node.x - feature.point.x
          var dy = node.y - feature.point.y
          // console.log(dx, dy)
          if (Math.abs(dx) < epsilon && Math.abs(dy) < epsilon) {
            prevOffsets[featureId] = null
            return
          }

// If the marker is moved, we set up a soft force to prefer keeping
          // it where it was in the previous iteration
          if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
            prevOffsets[featureId] = [dx, dy]
          }

if (!offsets[layerId]) {
            offsets[layerId] = {
              type: 'categorical',
              property: 'osm_id',
              stops: []
            }
          }
          offsets[layerId].stops.push([featureId, [dx, dy]])
        })

pointLayers.forEach(function (layerId) {
        var offset = offsets[layerId]
        if (!offset) {
          map.setLayoutProperty(layerId, 'icon-offset', [0, 0])
          map.setLayoutProperty(layerId, 'text-offset', origTextOffsets[layerId])
          return
        }
        // icon-offset is a strange unit, pixels * icon-size
        map.setLayoutProperty(layerId, 'icon-offset', getIconOffset(map, layerId, offset))
        var textField = map.getLayoutProperty(layerId, 'text-field')
        // Also offset the text label
        if (textField) {
          // Text offset is in em units, not pixels, so we need to convert
          map.setLayoutProperty(layerId, 'text-offset', getTextOffset(map, layerId, offset, origTextOffsets[layerId]))
        }
      })
    }
  }
}

// Return all features in the current map view that need layout
function getFeatures (map, pointLayers) {
  var features = map.queryRenderedFeatures({layers: pointLayers})
  // qRF can return duplicate features if points are near tile boundaries
  return _.uniqWith(features, cmpFeatures)

function cmpFeatures (f1, f2) {
    return f1.properties.osm_id === f2.properties.osm_id
  }
}

// For a given feature, get a radius to be used for collision avoidance
// We use a circle with diameter of the max dimension of the rendered
// icon bounding rectangle as an approximation.
// NB: Square icons will overlap at the corners
function getRadius (map, f) {
  var layer = map.getLayer(f.layer.id)
  var iconName = layer.getLayoutValue('icon-image', {zoom: map.getZoom()}, f.properties)
  iconName = iconName.replace(/{([^{}]+)}/g, function (match, p1) {
    return f.properties[p1]
  })
  var iconPos = map.style.sprite.getSpritePosition(iconName)
  var iconSize = layer.getLayoutValue('icon-size', {zoom: map.getZoom()})
  if (!iconPos || !iconSize) return 0
  var r = Math.max(iconPos.width, iconPos.height) * iconSize / 2 / (iconPos.pixelRatio || 1)
  return r
}

// Convert an offset in pixels to an offset in em units
function getTextOffset (map, layerId, offset, origTextOffset) {
  var size = map.getLayer(layerId).getLayoutValue('text-size', {zoom: map.getZoom()})
  var textOffset = Object.assign({}, offset, {
    stops: offset.stops.map(function (s) {
      return [s[0], [s[1][0] / size + origTextOffset[0], s[1][1] / size + origTextOffset[1]]]
    })
  })
  return textOffset
}

// Convert an offset in pixels to an offset in em units
function getIconOffset (map, layerId, offset) {
  var size = map.getLayer(layerId).getLayoutValue('icon-size', {zoom: map.getZoom()})
  var iconOffset = Object.assign({}, offset, {
    stops: offset.stops.map(function (s) {
      return [s[0], [s[1][0] / size, s[1][1] / size]]
    })
  })
  return iconOffset
}

function forcePrevX (x) {
  var force = d3.forceX(x)
  var initializeOrig = force.initialize
  force.initialize = function (_) {
    var withPrevX = _.filter(function (d) { return ('prevX' in d) })
    initializeOrig(withPrevX)
  }
  return force
}

function forcePrevY (y) {
  var force = d3.forceY(y)
  var initializeOrig = force.initialize
  force.initialize = function (_) {
    var withPrevY = _.filter(function (d) { return ('prevY' in d) })
    initializeOrig(withPrevY)
  }
  return force
}

</script>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js

https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js

https://d3js.org/d3.v4.min.js