Map View: A 3D Map Beside Your Data Grid

One call, a live map

Import the map view module and hand createMapView a grid and where each row's place comes from: a latitude and longitude pair, a geometry column, or a path of coordinates. The map fills a container of your own, or sits beside the grid, in a tab, or in a pop-out window. Rows draw as markers or extruded columns, polygons as extruded areas, and routes as lines, coloured by a category or a numeric ramp.

import { createMapView } from '@toclocoinc/lattice-grid/modules/mapview';

const map = createMapView(grid, {
  container: '#map',
  geometry: { lat: 'lat', lng: 'lng' },     // or { geojson: 'shape' }, or { path: 'route' }
  layer: 'column',                          // markers, extruded columns, polygons or routes
  elevation: 'premisesPassed',              // a numeric column sets each column's height
  color: { field: 'status', map: { live: '#1b7f3b', planned: '#a96a0b' } },
  buildings: true,                          // OpenStreetMap 3D buildings in the basemap
});

map.on('feature:click', ({ row }) => console.log(row));  // a click also selects and scrolls the grid to the row

The grid's own filter, search and selection

Filtering, searching or grouping the grid redraws the map on the next frame, so a build schedule narrowed to one region shows only that region on the map. Selecting rows in the grid flies the map to them and highlights them; clicking a feature on the map selects its row and scrolls the grid to it. A hover tooltip shows the grid's own formatted cell text, not a second copy of the data.

Routes with an animated flow

A path geometry draws as a route, and an optional animated flow travels along it, useful for traffic, circuits or a delivery network in motion. The flow pauses while the tab is hidden and stays still for a reader who prefers reduced motion.

createMapView(grid, {
  geometry: { path: 'route' },
  layer: 'path',
  flow: { speed: 0.4, trail: 0.25 },   // an animated trail travels each route
  width: 'volume',                     // a numeric column widens busier routes
});

For a telecoms team, the build schedule, premises list or fault log already open in a grid becomes a 3D map of the network with no extra integration. The geospatial guide covers the geometry column type and the built-in maps this module sits beside.