E2 with deck.gl

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

Documentation navigation

Start with E2

SDK guides

CLI guides

MCP guides

Applications

Framework quickstarts

How E2 fits

E2 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 @embed-earth/sdk-test

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 E2();
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 developer interfaces