@skymapglobal/geometry-input NPM

Geometry Input

Geometry Input component using Vuetify framework.

Features

Drawer
- Draw Rectangle (with buffer)
- Draw Polygon (with buffer)
- Draw Buffered Line
- Draw Buffered Point
Geocoding
- Support multiple provider
  - Free: Esri, Open Street Map
  - Commercial: Algolia, Bing, Google, Here, Location IQ, Open Cage
Upload
- Support format
  - GeoJSON (.json, .geojson)
  - Shapefiles (.dbf, .prj, .cpg, .shx)
  - GPX
  - KML, KMZ
  - CSV
  - GML
  - WKT
Edit
- Edit current Geometry as Polygon
Download
- Support format
  - GeoJSON
  - Shapefiles
  - GPX
  - KML
  - CSV
  - GML
  - WKT
Tools
- Simplify
- Convex
- Grid
- BBox
Settings
Translation using vue-i18n

Install Vuetify

vue add vuetify

Install vue-i18n

vue add i18n

Install

yarn add @skymapglobal/map-drawer @skymapglobal/geometry-input

Usage

Geometry Input Usage

<template>
  <v-app>
    <v-main>
      <Map>
        <BaseMapControl position="top-right" default-base-map="Dark" />

        <MouseCoordinatesControl position="bottom-right" />

        <DrawControl>
          <!-- Needed this GeometryDrawerMapModule for drawing on Map -->
          <GeometryDrawerMapModule />
        </DrawControl>
      </Map>

      <div style="position: absolute; top: 10px; left: 10px; padding: 10px 15px;">
        <GeometryInput
          v-model="myAOI"
          :drawer="geometryInputConfigs.drawer"
          :geocoder="geometryInputConfigs.geocoder"
          :uploader="geometryInputConfigs.uploader"
          :downloader="geometryInputConfigs.downloader"
          :transformer="geometryInputConfigs.transformer"
          :settings="geometryInputConfigs.settings"
          clearable
          filled
          persistent-tool-box
          hide-details
        >
          <template v-slot:tools>
            <v-btn title="Set Sample AOI" icon @click="setSampleAoi">
              <v-icon>{{ icons.mdiShapeRectanglePlus }}</v-icon>
            </v-btn>
          </template>
        </GeometryInput>
      </div>
    </v-main>
  </v-app>
</template>

<script>
import {
  Map,
  BaseMapControl,
  MouseCoordinatesControl
} from "@skymapglobal/map";
import { DrawControl } from "@skymapglobal/map-drawer";

import { GeometryInput, GeometryDrawerMapModule } from "@skymapglobal/geometry-input/GeometryInput.vue";

import { mdiShapeRectanglePlus } from "@mdi/js"

export default {
  name: "App",

  components: {
    Map,
    BaseMapControl,
    GeometryDrawerMapModule,
    DrawControl,
    MouseCoordinatesControl,
    GeometryInput
  },

  data: () => ({
    geometryInputConfigs: {
      drawer: {
        rectangle: true,
        polygon: true,
        line: true,
        point: true
      },
      geocoder: {
        esri: {},
        openStreetMap: {
          polygon_geojson: 1 // Get Polygon GeoJson
        }
      },
      uploader: {
        accept:
          ".geojson, .json, .shp, .shx, .dbf, .prj, .cpg, .kml, .kmz, .gpx, .csv, .gml, .wkt"
      },
      downloader: {
        saveTypes: ["geojson", "gpx", "kml", "shapefile", "csv", "gml", "wkt"]
      },
      transformer: {
        simplify: true,
        convex: true,
        grid: true,
        bbox: true
      },
      settings: {
        reverseGeocoder: {
          email: "my_email@gmail.com"
        }
      }
    },

    icons: {
      mdiShapeRectanglePlus
    }
  })
};
</script>

Geometry Geocoder Usage

<template>
  <GeometryGeocoderInput :config="geocoderConfig" @change="(geojson) => {}" />
</template>

<script>
import { GeometryGeocoderInput } from "@skymapglobal/geometry-input"

export default {
  components: {
    GeometryGeocoderInput
  }
}
</script>

Geometry Uploader Usage

<template>
  <GeometryUploaderDialog
    :config="uploaderConfig"
    :visible.sync="dialogVisible"
    @submit="(geojson) => {}"
  />
</template>

<script>
import { GeometryUploaderDialog } from "@skymapglobal/geometry-input"

export default {
  components: {
    GeometryUploaderDialog
  }
}
</script>

Geometry Downloader Usage

<template>
  <GeometryDownloaderDialog
    :geojson="geojson"
    :config="downloaderConfig"
    :visible.sync="dialogVisible"
    @submit="() => {}"
  />
</template>

<script>
import { GeometryDownloaderDialog } from "@skymapglobal/geometry-input"

export default {
  components: {
    GeometryDownloaderDialog
  }
}
</script>

Config

drawer: Object, Boolean - Set to false to hide drawer tool

rectangle: Boolean - Enable Rectangle Draw Tool
polygon: Boolean
line: Boolean
point: Boolean

NOTE: MUST import GeometryDrawerMapModule and register into the map that want to draw geometry on

geocoder: Object, Boolean - Set to false to hide geocoder tool

More detail configs: https://smeijer.github.io/leaflet-geosearch/#providers

algolia: Object
bing: { key: 'YOUR_BING_KEY', }
esri: Object
google: { key: 'YOUR_GOOGLE_KEY', }
here: { apiKey: 'YOUR_HERE_KEY' }
locationIQ: { key: 'YOUR_LOCATIONIQ_KEY' }
openCage: { key: 'YOUR_OPENCAGE_KEY', }
openStreetMap: { email: 'your-email@example.com' // auth for large number of requests }