GeoJSON Viewer — View, Click, and Style Your GeoJSON Data

What Is GeoJSON, and Why Use a Viewer

GeoJSON is a simple, open text format for storing map shapes: points, lines and polygons, each with a set of properties attached. It is the format behind most modern web maps, GitHub's built-in map preview, and countless GIS and developer tools. But a raw GeoJSON file is just text — hundreds or thousands of coordinate numbers in a row. This viewer turns that text into a real map you can see, click, and understand, without opening a code editor or a full desktop GIS program.

How This Tool Reads Your Data

As soon as you load a file, drop it, or paste text, the tool reads the GeoJSON structure, places every feature on the map, and fits the view to show all of it at once. Nothing is uploaded anywhere — the reading, drawing, and styling all happen inside your own browser tab.

What Counts as Valid GeoJSON

The tool accepts a FeatureCollection, a single Feature, or a bare Geometry (Point, LineString, Polygon, and their Multi- versions, plus GeometryCollection). If the text is not valid JSON, or is valid JSON that is not GeoJSON, you get a clear message explaining which of those two problems it is, instead of a blank map.

Why Coordinates Must Be in WGS84

The GeoJSON standard requires coordinates in WGS84 longitude/latitude — the same system used by GPS and every normal web map. Some export tools save GeoJSON in a different, "projected" coordinate system by mistake, with numbers in the hundreds of thousands instead of normal longitude/latitude values. If this tool spots coordinates far outside the normal range, it warns you right away, so a blank or oddly placed map does not leave you guessing.

Three Ways to Load Your Data

Get your GeoJSON onto the map with whichever method is fastest for you:

• Upload or drag and drop: Click "Upload" and choose a .geojson or .json file, or drag the file straight onto the map from your file browser.
• Paste raw GeoJSON text: Click "Paste GeoJSON", then paste text copied from an API response, a code editor, or a tool like geojson.io, and click "Load". No file needed at all.

No data ready yet? Click "Sample Data" to load a small demo set with a park polygon, a delivery route line, and two point locations, so you can try clicking, coloring, and exporting right away.

See Feature Information by Clicking

Click any point, line, or polygon on the map and a popup opens showing every property attached to that feature — names, categories, numbers, dates, anything stored in the data. The clicked feature is also highlighted with a bright outline so you always know exactly which shape the popup belongs to, even in a busy, overlapping dataset.

Changing the Color and Style of Your Data

Three controls in the sidebar let you restyle the whole dataset instantly, without touching the underlying file:

• Color: pick any color from the swatches or the color picker. It applies to lines, polygon fills and outlines, and point markers straight away.
• Line Thickness: make outlines and lines thinner or thicker, from a hairline to a bold, poster-ready stroke.
• Fill Opacity: control how solid or see-through polygon fills are, from a light wash to a fully solid color.

Every change applies live to the data already on the map, so you can try several looks in seconds before deciding on one.

Exporting Your Styled GeoJSON

Click "Download Styled GeoJSON" to save your data with the current color, line thickness and fill opacity written into each feature using the simplestyle-spec property names (stroke, fill, stroke-width, fill-opacity, marker-color). Tools that understand simplestyle, including GitHub's map preview and geojson.io, will pick up your styling automatically — the color choices you made here travel with the file.

Step by Step

1

Step 1

Open the tool

The map opens on a world view with no data yet. The toolbar at the top has Upload, Paste GeoJSON, Sample Data and a basemap switch. The sidebar holds the data info, style controls, and export button.

2

Step 2

Load your GeoJSON

Upload a file, drag and drop it onto the map, paste raw GeoJSON text, or click "Sample Data" to try the tool right away.

3

Step 3

Watch the map zoom to fit

As soon as your data loads, the map automatically zooms and pans to show every feature at once.

4

Step 4

Click a feature

Click any point, line or polygon to open a popup with all of its properties. The clicked shape gets a bright highlight outline so it's easy to spot.

5

Step 5

Check the Data Info panel

The sidebar shows the feature count, the geometry types found (Point, Line, Polygon, or a mix), and the attribute field names in your data.

6

Step 6

Change the color

Pick a swatch or use the color picker to recolor every feature on the map at once.

7

Step 7

Adjust thickness and fill

Use the Line Thickness and Fill Opacity sliders to fine-tune how bold or subtle the styling looks.

8

Step 8

Zoom to features anytime

Click "Zoom to Features" in the sidebar to snap the view back to your data, wherever you've panned to.

9

Step 9

Download your styled file

Click "Download Styled GeoJSON" to save a copy of your data with your color and style choices written into it.

Real-World Use Cases

A GeoJSON viewer is one of the most reached-for tools in any map-related workflow. Here is where it earns its place:

Common Questions

More Tools You Might Like

Map tiles © OpenStreetMap contributors and CARTO, Esri (satellite). Map rendering by Leaflet. All file reading and rendering is local — no data is uploaded to any server.