🗺️

GeoJSON Editor

Create, edit, and visualize GeoJSON data with an interactive map. Draw points, lines, and polygons, edit coordinates, and export your geographic data.

Loading map...
Features: 0

What is GeoJSON?

GeoJSON is a format for encoding geographic data structures using JSON. It supports Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection types. GeoJSON is widely used in web mapping applications, GIS software, and geographic data APIs. It provides a simple, human-readable format for representing geographic features with their properties and coordinates.

Features

🗺️

Interactive Map

Visualize and interact with geographic data on an interactive map powered by Leaflet. Pan, zoom, and explore your GeoJSON features.
✏️

Draw Features

Draw points, lines, and polygons directly on the map. Support for Point, LineString, Polygon, and their Multi variants.
🔧

Edit Features

Edit existing features by dragging vertices, modifying coordinates, and updating properties. Delete unwanted features with one click.
📝

JSON Editor & Real-time Sync

Edit GeoJSON code directly with syntax highlighting. Changes in the map, JSON editor, or table view sync automatically across all views for seamless editing.
🎯

Application Scenarios

🌍

GIS Applications

Create and edit geographic data for GIS applications, mapping services, and spatial analysis tools.
🗺️

Web Mapping

Generate GeoJSON data for web mapping libraries like Leaflet, Mapbox, and Google Maps API.
📍

Location Services

Define service areas, delivery zones, and geographic boundaries for location-based services.
📊

Data Visualization

Create geographic datasets for data visualization, choropleth maps, and interactive dashboards.

📋Usage Guide

1️⃣
Draw Features
Click the draw buttons (Point, Line, Polygon) and click on the map to create features.
2️⃣
Edit Features
Click 'Edit Mode' and drag vertices to modify feature shapes. Click 'Delete Mode' to remove features.
3️⃣
Edit JSON
Switch to JSON Editor tab to edit GeoJSON code directly. Changes sync automatically with the map.
4️⃣
Export Data
Click 'Save As' to download your GeoJSON file, or 'Copy GeoJSON' to copy to clipboard.

📚Technical Introduction

🔬GeoJSON Format Specification

GeoJSON is based on JSON and follows RFC 7946 specification. It uses WGS84 coordinate reference system (CRS:84). Coordinates are stored as [longitude, latitude] arrays. The format supports FeatureCollection (array of features), Feature (geometry + properties), and Geometry objects. Each geometry has a 'type' field (Point, LineString, Polygon, etc.) and a 'coordinates' field containing coordinate arrays.

⚙️Leaflet Integration

The editor uses Leaflet.js, an open-source JavaScript library for interactive maps. Leaflet provides map rendering, tile layers (OpenStreetMap), and interaction controls. The leaflet-draw plugin enables drawing and editing features on the map. Features are rendered as Leaflet layers (Marker, Polyline, Polygon) and synchronized with GeoJSON data structure.

🎨Real-time Synchronization

The editor maintains bidirectional synchronization between map visualization, JSON code, and table view. When features are drawn on the map, GeoJSON is updated. When JSON is edited, the map re-renders. Changes in table view update both map and JSON. This is achieved through event listeners and state management using React hooks.

💡Coordinate System and Validation

GeoJSON uses WGS84 (EPSG:4326) coordinate system. Longitude ranges from -180 to 180, latitude from -90 to 90. The editor validates coordinates, ensures polygons are closed (first and last coordinates match), and validates GeoJSON structure. Invalid geometries are rejected with error messages to prevent data corruption.

Frequently Asked Questions

What is GeoJSON and what is it used for?

GeoJSON is a JSON-based format for encoding geographic data structures. It's used for: 1) Web mapping applications (Leaflet, Mapbox, Google Maps); 2) GIS software data exchange; 3) Geographic APIs and services; 4) Data visualization and dashboards; 5) Location-based services; 6) Spatial analysis and geospatial databases. GeoJSON is human-readable, easy to parse, and widely supported across platforms.
💬

What coordinate system does GeoJSON use?

GeoJSON uses WGS84 (World Geodetic System 1984) coordinate reference system, also known as EPSG:4326. Coordinates are stored as [longitude, latitude] arrays. Longitude ranges from -180° (west) to 180° (east), latitude from -90° (south) to 90° (north). This is the same coordinate system used by GPS and most web mapping services.
🔍

How do I draw a polygon on the map?

Click the 'Draw Polygon' button, then click on the map to place vertices. Click the first point again or double-click to finish the polygon. You can edit the polygon by clicking 'Edit Mode' and dragging vertices. To delete, click 'Delete Mode' and click on the feature.
💡

Can I import existing GeoJSON files?

Yes, click 'Open' button and select a GeoJSON file from your computer. The file will be loaded and displayed on the map. Supported formats: .geojson, .json files containing valid GeoJSON data. The editor validates the file format before importing.
📚

Is my data stored on a server?

No, all processing happens locally in your browser. Your GeoJSON data is never uploaded to any server, ensuring complete privacy and data security. You can work offline after the initial page load.

💡How To & Tips

Best Practice: Always validate GeoJSON before exporting

Ensure your GeoJSON follows the specification and coordinates are within valid ranges.

Best Practice: Use meaningful property names

Add descriptive properties to features for better data organization and filtering.

Best Practice: Keep polygons closed

Ensure polygon coordinates form closed rings (first and last coordinates match).

🔗Related Documents

📖RFC 7946 - The GeoJSON Format-Official GeoJSON specification
🗺️Leaflet.js Documentation-Interactive maps library documentation

User Comments

0 / 2000
Loading...