EDK with deck.gl

deck.gl is built for the result sizes EDK returns: search results become ScatterplotLayers, routes become PathLayers, and compute drives layer scales.

Documentation navigation

How EDK fits

EDK search returns GeoJSON features that convert to deck.gl position arrays with one map. deck.gl handles hundreds of thousands of points, so you can raise limit and let the GPU do the rendering.

Setup

terminal

npm install deck.gl @edk/sdk

deck.ts

import { Deck } from "@deck.gl/core";

const deck = new Deck({
  initialViewState: { longitude: -73.99, latitude: 40.74, zoom: 12 },
  controller: true,
});

Search

search.ts

import { ScatterplotLayer } from "@deck.gl/layers";

const e2 = new EDK();
const places = await e2.search({
  feature: "restaurant",
  area: "Manhattan",
  mode: "auto",
  limit: 10000,
});

const points = places.features.map((f) => f.geometry.coordinates);

deck.setProps({
  layers: [
    new ScatterplotLayer({
      id: "restaurants",
      data: points,
      getPosition: (d) => d,
      getRadius: 60,
      radiusUnits: "meters",
      getFillColor: [226, 176, 122],
      pickable: true,
    }),
  ],
});

Routing

routing.ts

import { PathLayer } from "@deck.gl/layers";

const route = await e2.route.route({
  locations: [
    { lat: 40.74, lon: -73.99 },
    { lat: 40.71, lon: -74.01 },
  ],
  mode: "walking",
});

const path = route.geometry.coordinates;

deck.setProps({
  layers: [
    new PathLayer({
      id: "route",
      data: [path],
      getPath: (d) => d,
      getWidth: 4,
      getColor: [226, 176, 122],
    }),
  ],
});

Compute

compute.ts

const density = await e2.compute.feature("restaurant")
  .region("Manhattan")
  .near("park", 500)
  .density();

// Scale marker size from the computed density
deck.setProps({
  layers: [
    new ScatterplotLayer({
      id: "restaurants",
      data: points,
      getPosition: (d) => d,
      getRadius: 30 + density * 2,
      radiusUnits: "meters",
      getFillColor: [226, 176, 122],
    }),
    new TextLayer({
      id: "density-label",
      data: [{ position: [-73.99, 40.74], text: `${density.toFixed(1)} /km² near parks` }],
      getPosition: (d) => d.position,
      getText: (d) => d.text,
      getSize: 16,
    }),
  ],
});

Notes

Import TextLayer from @deck.gl/layers. Use mode: "auto" so repeat queries hit the local cache, and prefer deck.setProps over re-creating the Deck instance on each query.

All documentation