Create, edit, and visualize GeoJSON data with an interactive map. Draw points, lines, and polygons, edit coordinates, and export your geographic data.
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.
Use Cases
- 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
- Draw Features: Click the draw buttons (Point, Line, Polygon) and click on the map to create features.
- Edit Features: Click 'Edit Mode' and drag vertices to modify feature shapes. Click 'Delete Mode' to remove features.
- Edit JSON: Switch to JSON Editor tab to edit GeoJSON code directly. Changes sync automatically with the map.
- Export Data: Click 'Save As' to download your GeoJSON file, or 'Copy GeoJSON' to copy to clipboard.
Technical Details
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.
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.
Related Documentation
- RFC 7946 - The GeoJSON Format - Official GeoJSON specification
- Leaflet.js Documentation - Interactive maps library documentation
- GeoJSON.io - Online GeoJSON editor reference
- OpenStreetMap - Free map tiles and geographic data