Vuejs Leafletjs GeoJSON Map Editor

GeoJson map editor for Vue using Leafletjs.

Supports manual coordinate input and drawing modes.

Requires MapBox API to use drawing mode.

Able to determine:

Child GeoJSON is partially or fully out of parent GeoJSON
Intersection of GeoJSONs

A suggested usecase for the tool is to edit and create GeoJSON objects.

You may use this tool for charity or school projects, for commercial use, please contact me.

Demo

Go to demo.

Installation

Load Mapbox and Leafletjs via script tag

<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />

<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.4.10/leaflet.draw.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.4.10/leaflet.draw.js'></script>

Turf.js is required. Load the minified file via a script tag.

<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>

Git

git clone https://github.com/tej-kweku/vuejs-leafletjs-map-editor.git

Register

import Vue from 'vue'
import { GeofenceEditor } from 'GeofenceEditor'

Vue.use(GeofenceEditor)

Register manually

Global

import { GeofenceEditor } from 'GeofenceEditor';

Vue.component('geofence-editor', GeofenceEditor);

Local

import { GeofenceEditor } from 'GeofenceEditor';

Vue.extend({
  template: '...',
  components: {
    geofence-editor: GeofenceEditor
  }
});

Browser

Download GeofenceEditor.

<script src="vue.js"></script>
<script src="GeofenceEditor.js"></script>

Usage

Minimal

<geofence-editor v-model="geojson"></geofence-editor>

Setup

Parameters

Parameter	Type	Default	Description
mapbox-access-token	`String`	`null`	Mapbox Access Token.
min-features	`Number`	`1`	Minimum number of features.
max-features	`Numer`	`10`	Maximum number of features.
data-input-type	`String`	`"both"`	Data input type: manual, map or both
v-model (required)	ISO 8601 `String`	-	GeofenceEditor.
parentBBox	`Object`	`null`	A FeatureCollection geojson for parent bounding box.
siblingGeojson	`Object`	`null`	A FeatureCollection geojson of the sibling geojson.

Events

Component emits the input event to work with v-model. More info.

error event is emitted when an error is detected.

Also, input text inherits all component events.

License

The MIT License

tejkweku/vuejs-leafletjs-geojson-map-editor