Jour 13 : Interactions

import { Unmap, createMap } from '@unmap/sdk'

const unmap = new Unmap({ key: 'um_pk_live_...' })

// Canada's 50 largest metropolitan areas (2021 Census), as [lng, lat] at each core city.
const cities = await fetch('/cities.json').then((r) => r.json())

// Drive every pair both ways, and count the drives along each stretch of road.
const uses = new Map()
for (const from of cities) {
  for (const to of cities) {
    if (from === to) continue
    const route = await unmap.router.route(from, to, { mode: 'car' })
    const coords = route.geometry.coordinates
    for (let i = 1; i < coords.length; i++) {
      const segment = coords[i - 1] + '>' + coords[i]
      uses.set(segment, (uses.get(segment) ?? 0) + 1)
    }
  }
}

// A stretch counts city pairs in its busier direction. Each carriageway of a divided highway
// then carries every pair once, and so does a two-lane road driven both ways.
const features = []
for (const [segment, n] of uses) {
  const [a, b] = segment.split('>')
  const back = uses.get(b + '>' + a) ?? 0
  if (back > n || (back === n && a > b)) continue // keep one direction of each road
  features.push({
    type: 'Feature',
    properties: { n: Math.max(n, back) },
    geometry: { type: 'LineString', coordinates: [a, b].map((p) => p.split(',').map(Number)) },
  })
}

const map = createMap({ key: 'um_pk_live_...', container: '#map', style: 'muted', mode: 'dark' })
map.on('load', () => {
  const labels = map.getStyle().layers.find((l) => l.type === 'symbol').id
  map.addSource('roads', { type: 'geojson', data: { type: 'FeatureCollection', features } })
  map.addLayer({
    id: 'roads',
    type: 'line',
    source: 'roads',
    paint: {
      // Width and colour by pair count, on a log scale: 1 to 561 of the 1,225 pairs.
      'line-width': ['interpolate', ['linear'], ['ln', ['get', 'n']], 0, 0.35, 6.4, 6],
      'line-color': ['interpolate', ['linear'], ['ln', ['get', 'n']],
        0, '#43263F', 4.1, '#C9307C', 5.5, '#FF3E9A', 6.4, '#FFC9E1'],
    },
  }, labels) // under the place names
})