GeoJSON editor

Use as a library

pnpm build:lib

export VITE_APP_MAPBOX_TOKEN=your_mapbox_token

<template>
  <GeoJsonEditor
    v-model="fc"
    :read-only="false"
    @change="onChange"
    @selection-change="onSelect"
  />
</template>

<script setup lang="ts">
import { createPinia } from "pinia";
import { createApp, ref } from "vue";
// If installed from a package: import { GeoJsonEditor } from 'geojson-editor'
// Local file import example:
import { GeoJsonEditor } from "./dist/geojson-editor.es.js";
import "mapbox-gl/dist/mapbox-gl.css";

const fc = ref({ type: "FeatureCollection", features: [] as any[] });
const onChange = (value: any) => {
  /* persist or react to updated features */
};
const onSelect = (ids: string[]) => {
  /* selection ids changed */
};

// In main.ts of the consumer app ensure Pinia is installed
// const app = createApp(App)
// app.use(createPinia())
// app.mount('#app')
</script>

Props

• modelValue: FeatureCollection – initial and controlled value (v-model)
• readOnly?: boolean – disables editing when true

Emits

• update:modelValue – new FeatureCollection (for v-model)
• change – same payload as above for side-effects
• selection-change – string[] of selected feature ids

Worth noticing

• To interactively edit geometry features the project uses @deck.gl-community/editable-layers that can be behind official deck.gl due to possible lack of maintenance, so keep eye on versions of both