Skip to main content
SimilarExport ZIP
100%

geojson.io | powered by Mapbox

✓ Published0🌍 Public
AAaronBhasker
Last edited Mar 14, 2023
Created on Mar 14, 2023
Forked from HTML Starter

This interactive web application enables users to create, view, and share spatial data as GeoJSON. The interface combines a Mapbox GL-powered map with a text editor, allowing real-time synchronization between geographic features and their JSON representation. The code uses Mapbox GL JS for map rendering and tile loading, along with React for building the UI components. The application supports drawing, editing, and parsing GeoJSON geometry, with changes reflected instantly across both the map and the editor panel.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson
72% match
Loading thumbnail…

geo_1

A world map displays country boundaries and graticules, rendered with a natural Earth projection from d3-geo. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to draw landmasses, interior boundaries, and the globe’s sphere, with data sourced from the World Atlas TopoJSON. React manages the component state, loading the topology via d3.json and converting it with topojson’s feature and mesh functions. Polished styling includes teal landmasses, light gray graticules, and a subtle sphere background.

NNikithakatta30
71% match
Loading thumbnail…

React world map

This example presents an interactive world map built with React and rendered as SVG. The map displays landmasses in dark green, with country borders and graticule lines overlaid. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the `topojson` library’s `feature` and `mesh` functions process the source data from the world-atlas TopoJSON file. The React component structure separates data loading, map assembly, and SVG rendering.

SSuperShreejit
70% match
Loading thumbnail…

geo_1

This visualization displays a world map with clearly defined country boundaries, using a natural Earth projection to present the full globe with graticules. The map is rendered as SVG through React, with d3.geoNaturalEarth1 and d3.geoPath handling the projection and path generation. Country borders are drawn from the World Atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract land polygons and interior boundaries. The teal landmasses against a light sphere background create a polished, minimal aesthetic.

HHuldahMerlinKolli
69% match
Loading thumbnail…

Final 2

This example presents an interactive world map built with React and D3, using the geoNaturalEarth1 projection and geoPath to render country boundaries from TopoJSON data loaded from the visionscarto-world-atlas. The map displays graticule lines and outlines, with countries colored according to a custom legend that maps percentage ranges to shades of red from the schemeReds palette. The visualization includes hover effects that change country fill colors, and a color legend component created with D3 selections to explain the color scale.

QQingyang Wang Profolio
69% match
Loading thumbnail…

World Map

This map uses D3.js geo utilities (geoEqualEarth, geoPath, geoGraticule) within a React component to render country borders from the World Atlas TopoJSON. The SVG view shows landmasses in cyan, ocean in gray, and a graticule for reference. The code projects sphere geometry, graticules, and TopoJSON features, with interiors drawn as stroked paths, creating a polished geographic visualization.

KKahlaoui-Ismail
69% match
Loading thumbnail…

Document

This example presents a polished world map that displays country boundaries and graticules using geographic data from World Atlas TopoJSON. The visualization renders a full sphere with landmasses filled in teal and graticules drawn in a contrasting gray tone. The code uses d3.geoPath to convert TopoJSON features into SVG paths, while React manages the component structure and rendering. The map is constructed with a fixed 960×500 viewport and includes a loading state while fetching the geographic dataset.

Ssumeyragorgec
69% match
Loading thumbnail…

MapVizTest

This map visualization displays global country boundaries and interior borders using a natural Earth projection. The SVG renderer draws geographic features with d3.geoPath and geoNaturalEarth1, while d3-geoGraticule overlays latitude and longitude lines. Users can click individual country paths to trigger a selection state, with hover effects highlighting borders in green. Map data comes from the world-atlas TopoJSON dataset, parsed via topojson.feature and topojson.mesh. The React interface manages state through hooks, enabling interactive exploration of the world map.

SSsbThatsMe
69% match