DOCSEARCHbyAlgolia
Submit Docs

geojson.io

repository·main·Indexed 24 days ago

https://github.com/mapbox/geojson.io

A browser-based tool for creating, editing, and visualizing spatial data. It provides a lightweight alternative to GIS software, supporting the creation of geometries (points, lines, polygons, rectangles, and circles) and attributes. The tool supports import and export for GeoJSON, KML, CSV, and Shapefile formats, and can be programmatically controlled via URL parameters or the window.api object (map, data, and draw).

Tokens
8.7K
Snippets
11
Records
74
Agent score
80%

What's inside geojson.io

  1. Overview of geojson.io

    main

    geojson.io is a browser-based, fast, and simple editor for spatial data. It allows users to create and edit geometries and attributes directly in the browser.

    Key capabilities include:

    • Data Editing: Create and edit spatial data (geometries and properties).
    • Drawing Tools: Draw points, lines, polygons, rectangles, and circles on an interactive map.
    • Import/Export: Support for multiple formats including GeoJSON, KML, CSV, and Shapefile.
    • Bulk Editing: Edit feature properties in bulk using the Feature Editor or Table Panel.
    • Data Preloading: Use query parameters to preload data from external sources.
    • Efficiency: Keyboard shortcuts for navigation and editing.

  2. Integrate a custom source or API with geojson.io

    main
    geojson.io supports external sources and APIs via a source implementation. Currently, it includes support for GitHub. To add a new source, you must implement a new source module within the src/source directory of the project.

  5. Deployment and Architecture of geojson.io

    main
    geojson.io is a static application. It does not require a dedicated backend server and is currently hosted on GitHub Pages. It can be hosted anywhere as a set of static files.

  8. Import data into geojson.io

    main

    You can bring spatial data into the editor using three primary methods:

    1. Import button: Click the button to select and upload a local file.
    2. Drag & Drop: Drag a data file directly onto the map interface.
    3. Paste GeoJSON: Paste raw GeoJSON text directly into the JSON panel.

    When importing GeoJSON, the tool supports Geometry, Feature, or FeatureCollection formats.

  9. Edit feature properties

    main

    Properties can be managed in two ways:

    1. Feature Editor panel: Appears when one or more features are selected. It provides a table for editing properties and supports bulk updates when multiple features are selected.
    2. Table Panel: A dedicated panel where you can browse and edit properties for all features in the dataset.

  10. Interact with geojson.io via URL parameters

    main
    You can programmatically control geojson.io by appending specific parameters to the URL hash. This allows you to control the map view, load specific GeoJSON data, or pull data from external hosting services like GitHub or GitHub Gists.

  11. Edit feature geometries

    main

    To reshape or move features, select a feature to reveal geometry editing tools:

    • Reshape: Drag vertices to move them. Drag the midpoint between vertices to add a new vertex.
    • Delete: Press <kbd>Delete</kbd> to remove a selected vertex.
    • Snapping:
      • Hold <kbd>Option</kbd> + drag a vertex to snap to the nearest edge of a nearby feature.
      • Hold <kbd>Shift</kbd> + <kbd>Option</kbd> + drag a vertex to snap specifically to nearby vertices (vertices will be highlighted).
    • Move: Hold <kbd>Space</kbd> and drag to move the entire feature.
    • Rotate: Hold <kbd>Option</kbd> + drag to rotate the feature.

  12. Run geojson.io locally

    main

    To run the geojson.io development environment on your local machine, follow these steps:

    1. Prerequisites: Ensure Node.js is installed.
    2. Clone and Install: Clone the repository and install the necessary dependencies using npm.
    3. Environment Configuration: Copy the .env.example file to a new file named .env. You must add your Mapbox public token to this file using the key VITE_PUBLIC_MAPBOX_TOKEN.
    4. Start Server: Run the development script to launch the application.

    The application will be available at http://localhost:5173.