FR
All apps

§ App / Data Explorer

Build a GeoJSON explorer with React and unmap

How the unmap Data Explorer is put together: open a GeoJSON file in the browser, validate it, filter and colour it by an attribute, read it as a table and export what you keep.

Launch appSource

Data Explorer opens a GeoJSON file in your browser and puts it on a live unmap basemap. See its points, lines and polygons, search and filter its attributes, colour it by one, read it as a table, inspect what is under a click, and export the features you kept. It runs at apps.unmap.dev/data-explorer, and its source is a standalone Next.js project you can clone and run with your own key.

Your file stays in your browser: it is read on the page and sent nowhere, and the basemap is the only thing that comes from unmap. The app opens on a real sample, the City of Calgary's 313 community districts, used under the Open Government Licence – City of Calgary, so there is something to look at before you choose a file.

What it does

  • Open a file: with the button, or by dropping it anywhere on the page. GeoJSON up to 25 MB: a FeatureCollection, a Feature or a bare geometry.
  • Validation with reasons: a file that is not JSON, is TopoJSON, names another coordinate system, has projected coordinates or a broken shape is refused with what is wrong and how to fix it, in English or French. Features with no geometry are left out and counted.
  • Any of the fourteen basemaps: Muted by default, made for data on top, in light or dark with the page.
  • Search: every attribute value, with accents and case ignored.
  • Colour by an attribute: a text attribute with up to 12 values, each in its own colour, or a number in five quantile classes. Features with no value are grey.
  • Filter by value: the legend has a checkbox for each value of the coloured attribute, and the table, the count and the export follow the map.
  • A table and a click inspector: one row per feature, which frames it on the map; a click on the map lists everything under it with its attributes, and the table follows.
  • Export: the features that pass the filters, as plain RFC 7946 GeoJSON with their attributes.

Built from the registry, unmodified

The map, the data layer, the legend and the click inspector are registry items copied in unmodified. Installing the same pieces into your project is one command:

npx @unmap/cli add map geojson-layer layer-legend feature-inspector map-controls

Reading and checking the file, search, filters and colour schemes are plain TypeScript with no React in them (lib/geojson.ts and lib/attributes.ts), unit-tested and easy to lift into your own app.

What it does not do

  • Upload. A public demo never sends a visitor's file anywhere with a shared key. unmap's hosted overlays take files up to 5 MB on your own key; that belongs in an authenticated app of your own.
  • Reproject. GeoJSON is longitude and latitude on WGS 84. A file in another system is refused with the reason; reproject it first, for example with ogr2ogr -t_srs EPSG:4326.
  • Other formats. Shapefile, KML, GeoPackage and CSV are not read.
  • Spatial queries or editing. It filters on attributes and draws what it is given.

Run it yourself

You need Git, Node.js 24, pnpm and a browser key from the dashboard that allows http://localhost:3207.

git clone --depth 1 https://github.com/unmap-dev/data-explorer.git
cd data-explorer
pnpm install --frozen-lockfile
cp .env.example .env.local

Set NEXT_PUBLIC_UNMAP_KEY in .env.local to your key, run pnpm dev, and open localhost:3207. The sample ships in data/calgary-communities.geojson, and pnpm fetch-sample refreshes it from Open Calgary. The Maps API reference covers the basemaps.