E2 with Leaflet

Leaflet is the fastest way to put E2 results on a map: search returns GeoJSON, routes become polylines, and compute feeds a legend.

Documentation navigation

Start with E2

SDK guides

CLI guides

MCP guides

Applications

Framework quickstarts

How E2 fits

E2 supplies the data; Leaflet draws it. e2.search returns a GeoJSON FeatureCollection that drops straight into L.geoJSON, and routes draw as polylines. Any Leaflet tile layer works, including E2 map tiles.

Setup

terminal

npm install leaflet @embed-earth/sdk-test

map.ts

import L from "leaflet";

const map = L.map("map").setView([40.74, -73.99], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "&copy; OpenStreetMap contributors",
}).addTo(map);

Search

search.ts

import { E2 } from "@embed-earth/sdk-test";

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

L.geoJSON(places, {
  onEachFeature: (feature, layer) =>
    layer.bindPopup(feature.properties?.name ?? "Restaurant"),
}).addTo(map);

map.fitBounds(L.geoJSON(places).getBounds());

Routing

routing.ts

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

const line = route.geometry.coordinates.map(([lng, lat]) => [lat, lng]);
L.polyline(line, { weight: 4, color: "#e2b07a" }).addTo(map);
map.fitBounds(L.latLngBounds(line));

Compute

compute.ts

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

const legend = L.control({ position: "bottomright" });
legend.onAdd = () => {
  const div = L.DomUtil.create("div", "card");
  div.innerHTML = `<strong>${density.toFixed(1)}</strong> restaurants/km&sup2; near parks`;
  return div;
};
legend.addTo(map);

Notes

Call e2.search inside an effect or event handler, not during render. For large result sets, pass limit and use canvas rendering (preferCanvas: true on the map) to keep marker counts high.

All developer interfaces