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: "[email protected]"
        }
      }
    },

    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: '[email protected]' // auth for large number of requests }

uploader: [Object, Boolean] - Set to false to hide geocoder tool

• accept: String - input accept, support: ".geojson, .json, .shp, .shx, .dbf, .prj, .cpg, .kml, .kmz"

downloader: [Object, Boolean] - Set to false to hide geocoder tool

• saveTypes: String[] - save types, support: "geojson", "shapefile", "csv", "kml"