@rural-environmental-registry/map_component 1.1.0 → 1.2.0

package/dist/types/index.d.ts

@@ -211,6 +211,7 @@ export type CoordinatePanelTexts = {
     dragShapefileZip?: string;
     shapefileZipInfo?: string;
     shapefileAppliedSuccess?: string;
+    geometryImportUnsupportedFormat?: string;
     placeholderLongitude?: string;
     placeholderLatitude?: string;
     placeholderAzimuth?: string;

package/dist/utils/geometryFileParseResult.d.ts

@@ -0,0 +1,8 @@
+import type { Feature } from 'geojson';
+export type GeometryFileParseResult = {
+    ok: true;
+    features: Feature[];
+} | {
+    ok: false;
+    error: string;
+};

package/dist/utils/normalizeGeoJsonToFeatures.d.ts

@@ -0,0 +1,2 @@
+import type { Feature } from 'geojson';
+export declare function normalizeGeoJsonToFeatures(geojson: unknown): Feature[];

package/dist/utils/parseGeoJsonFile.d.ts

@@ -0,0 +1,2 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export declare function parseGeoJsonFile(file: File): Promise<GeometryFileParseResult>;

package/dist/utils/parseKmlFile.d.ts

@@ -0,0 +1,2 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export declare function parseKmlFile(file: File): Promise<GeometryFileParseResult>;

package/dist/utils/parseShapefileZip.d.ts

@@ -1,9 +1,3 @@
-import type { Feature } from 'geojson';
-export type ShapefileParseResult = {
-    ok: true;
-    features: Feature[];
-} | {
-    ok: false;
-    error: string;
-};
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export type ShapefileParseResult = GeometryFileParseResult;
 export declare function parseShapefileZip(file: File): Promise<ShapefileParseResult>;

package/dist/utils/{validateShapefileGeometry.d.ts → validateImportedPolygonGeometry.d.ts}

@@ -1,9 +1,9 @@
 import type { Feature, MultiPolygon, Polygon } from 'geojson';
-export type ShapefileValidationResult = {
+export type ImportedPolygonValidationResult = {
     ok: true;
     feature: Feature<Polygon | MultiPolygon>;
 } | {
     ok: false;
     error: string;
 };
-export declare function validateShapefileGeometry(features: Feature[]): ShapefileValidationResult;
+export declare function validateImportedPolygonGeometry(features: Feature[]): ImportedPolygonValidationResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rural-environmental-registry/map_component",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -47,7 +47,8 @@
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "papaparse": "5.5.3",
-    "shpjs": "6.1.0"
+    "shpjs": "6.1.0",
+    "@tmcw/togeojson": "7.1.2"
   },
   "devDependencies": {
     "@types/geojson": "7946.0.16",

package/src/components/coordinate/CoordinatePanel.vue

@@ -320,9 +320,9 @@
     <input
       ref="shapefileInputRef"
       type="file"
-      accept=".zip"
+      accept=".zip,.kml,.geojson,.json"
       class="shapefile-input-hidden"
-      @change="handleShapefileInputChange"
+      @change="handleGeometryFileInputChange"
     />
   </div>
 </template>
@@ -353,7 +353,10 @@
   import MemorialButtonControl from '../../handlers/memorialButtonControl'
   import type { DescriptiveMemorial } from '../../types'
   import { parseShapefileZip } from '../../utils/parseShapefileZip'
-  import { validateShapefileGeometry } from '../../utils/validateShapefileGeometry'
+  import { parseGeoJsonFile } from '../../utils/parseGeoJsonFile'
+  import { parseKmlFile } from '../../utils/parseKmlFile'
+  import { validateImportedPolygonGeometry } from '../../utils/validateImportedPolygonGeometry'
+  import type { GeometryFileParseResult } from '../../utils/geometryFileParseResult'
   import type { Feature, MultiPolygon, Polygon } from 'geojson'
 
   interface CSVRow {
@@ -669,18 +672,38 @@
     shapefileInputRef.value?.click()
   }
 
-  const processShapefile = async (file: File) => {
+  const getGeometryFileExtension = (fileName: string): 'zip' | 'kml' | 'geojson' | null => {
+    const lower = fileName.toLowerCase()
+
+    if (lower.endsWith('.zip')) return 'zip'
+    if (lower.endsWith('.kml')) return 'kml'
+    if (lower.endsWith('.geojson') || lower.endsWith('.json')) return 'geojson'
+
+    return null
+  }
+
+  const parseGeometryFile = async (file: File): Promise<GeometryFileParseResult> => {
+    const extension = getGeometryFileExtension(file.name)
+
+    if (extension === 'zip') return parseShapefileZip(file)
+    if (extension === 'kml') return parseKmlFile(file)
+    if (extension === 'geojson') return parseGeoJsonFile(file)
+
+    return { ok: false, error: texts.value.geometryImportUnsupportedFormat || 'Unsupported file format' }
+  }
+
+  const processGeometryFile = async (file: File) => {
     emit('geometryRemoved')
     csvData.value = []
     shapefileLoaded.value = false
 
-    const parseResult = await parseShapefileZip(file)
+    const parseResult = await parseGeometryFile(file)
     if (!parseResult.ok) {
       ElMessage.error(parseResult.error)
       return
     }
 
-    const validationResult = validateShapefileGeometry(parseResult.features)
+    const validationResult = validateImportedPolygonGeometry(parseResult.features)
     if (!validationResult.ok) {
       ElMessage.error(validationResult.error)
       return
@@ -691,12 +714,12 @@
     ElMessage.success(texts.value.shapefileAppliedSuccess)
   }
 
-  const handleShapefileInputChange = async (event: Event) => {
+  const handleGeometryFileInputChange = async (event: Event) => {
     const input = event.target as HTMLInputElement
     const file = input.files?.[0]
     if (!file) return
 
-    await processShapefile(file)
+    await processGeometryFile(file)
     input.value = ''
   }
 

package/src/constants/coordinatePanel.ts

@@ -45,12 +45,13 @@ export const COORDINATE_PANEL_TEXTS: CoordinatePanelTexts = {
   csvColumnsInfo: 'The file must contain the columns: X, Y, AZIMUTH, DISTANCE',
   applyCsvCoordinates: 'Apply CSV Coordinates',
 
-  shapefileUpload: 'Shapefile Upload',
-  shapefileFileUpload: 'Shapefile Upload',
-  dragShapefileZip: 'Drag ZIP file or click to upload',
+  shapefileUpload: 'Shapefile, KML and Geojson Upload',
+  shapefileFileUpload: 'Shapefile, KML and Geojson Upload',
+  dragShapefileZip: 'Drag file or click to upload',
   shapefileZipInfo:
-    'Upload a .zip with .shp, .shx and .dbf containing a single Polygon or MultiPolygon geometry',
-  shapefileAppliedSuccess: 'Shapefile applied successfully',
+    'Upload a .zip (shapefile), .kml, .geojson or .json with a single Polygon or MultiPolygon geometry',
+  shapefileAppliedSuccess: 'Geometry applied successfully',
+  geometryImportUnsupportedFormat: 'Unsupported file format. Use .zip, .kml, .geojson or .json',
 
   placeholderLongitude: 'e.g., -46.6333',
   placeholderLatitude: 'e.g., -23.5505',

package/src/types/index.ts

@@ -240,6 +240,7 @@ export type CoordinatePanelTexts = {
   dragShapefileZip?: string
   shapefileZipInfo?: string
   shapefileAppliedSuccess?: string
+  geometryImportUnsupportedFormat?: string
   placeholderLongitude?: string
   placeholderLatitude?: string
   placeholderAzimuth?: string

package/src/utils/geometryFileParseResult.ts

@@ -0,0 +1,5 @@
+import type { Feature } from 'geojson'
+
+export type GeometryFileParseResult =
+  | { ok: true; features: Feature[] }
+  | { ok: false; error: string }

package/src/utils/normalizeGeoJsonToFeatures.ts

@@ -0,0 +1,52 @@
+import type { Feature, FeatureCollection, Geometry } from 'geojson'
+
+function isFeatureCollection(value: unknown): value is FeatureCollection {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    (value as FeatureCollection).type === 'FeatureCollection' &&
+    'features' in value &&
+    Array.isArray(value.features)
+  )
+}
+
+function isFeature(value: unknown): value is Feature {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    (value as Feature).type === 'Feature' &&
+    'geometry' in value
+  )
+}
+
+function isGeometry(value: unknown): value is Geometry {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    !('features' in value) &&
+    (value as { type: string }).type !== 'Feature'
+  )
+}
+
+export function normalizeGeoJsonToFeatures(geojson: unknown): Feature[] {
+  if (Array.isArray(geojson)) {
+    return geojson.flatMap(item => normalizeGeoJsonToFeatures(item))
+  }
+
+  if (isFeatureCollection(geojson)) {
+    return geojson.features
+  }
+
+  if (isFeature(geojson)) {
+    return [geojson]
+  }
+
+  if (isGeometry(geojson)) {
+    return [{ type: 'Feature', properties: null, geometry: geojson }]
+  }
+
+  return []
+}

package/src/utils/parseGeoJsonFile.ts

@@ -0,0 +1,23 @@
+import { normalizeGeoJsonToFeatures } from './normalizeGeoJsonToFeatures'
+import type { GeometryFileParseResult } from './geometryFileParseResult'
+
+export async function parseGeoJsonFile(file: File): Promise<GeometryFileParseResult> {
+  const fileName = file.name.toLowerCase()
+  if (!fileName.endsWith('.geojson') && !fileName.endsWith('.json')) {
+    return { ok: false, error: 'The file must be a .geojson or .json file' }
+  }
+
+  try {
+    const content = await file.text()
+    const parsed = JSON.parse(content) as unknown
+    const features = normalizeGeoJsonToFeatures(parsed)
+
+    if (features.length === 0) {
+      return { ok: false, error: 'The GeoJSON file contains no geometries' }
+    }
+
+    return { ok: true, features }
+  } catch {
+    return { ok: false, error: 'Could not read the file. Check that it contains valid GeoJSON' }
+  }
+}

package/src/utils/parseKmlFile.ts

@@ -0,0 +1,31 @@
+import { kml } from '@tmcw/togeojson'
+import { normalizeGeoJsonToFeatures } from './normalizeGeoJsonToFeatures'
+import type { GeometryFileParseResult } from './geometryFileParseResult'
+
+export async function parseKmlFile(file: File): Promise<GeometryFileParseResult> {
+  const fileName = file.name.toLowerCase()
+  if (!fileName.endsWith('.kml')) {
+    return { ok: false, error: 'The file must be a .kml file' }
+  }
+
+  try {
+    const content = await file.text()
+    const xmlDoc = new DOMParser().parseFromString(content, 'text/xml')
+    const parserError = xmlDoc.querySelector('parsererror')
+
+    if (parserError) {
+      return { ok: false, error: 'Could not read the file. Check that it contains valid KML' }
+    }
+
+    const geojson = kml(xmlDoc)
+    const features = normalizeGeoJsonToFeatures(geojson)
+
+    if (features.length === 0) {
+      return { ok: false, error: 'The KML file contains no geometries' }
+    }
+
+    return { ok: true, features }
+  } catch {
+    return { ok: false, error: 'Could not read the file. Check that it contains valid KML' }
+  }
+}

package/src/utils/parseShapefileZip.ts

@@ -1,35 +1,8 @@
 import shp from 'shpjs'
-import type { Feature, FeatureCollection } from 'geojson'
+import { normalizeGeoJsonToFeatures } from './normalizeGeoJsonToFeatures'
+import type { GeometryFileParseResult } from './geometryFileParseResult'
 
-export type ShapefileParseResult =
-  | { ok: true; features: Feature[] }
-  | { ok: false; error: string }
-
-function isFeatureCollection(value: unknown): value is FeatureCollection {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'type' in value &&
-    (value as FeatureCollection).type === 'FeatureCollection'
-  )
-}
-
-function normalizeToFeatures(geojson: FeatureCollection | Feature | Feature[] | FeatureCollection[]): Feature[] {
-  if (Array.isArray(geojson)) {
-    return geojson.flatMap((item) => {
-      if (isFeatureCollection(item)) {
-        return item.features
-      }
-      return [item as Feature]
-    })
-  }
-
-  if (isFeatureCollection(geojson)) {
-    return geojson.features
-  }
-
-  return [geojson as Feature]
-}
+export type ShapefileParseResult = GeometryFileParseResult
 
 export async function parseShapefileZip(file: File): Promise<ShapefileParseResult> {
   const fileName = file.name.toLowerCase()
@@ -40,7 +13,7 @@ export async function parseShapefileZip(file: File): Promise<ShapefileParseResul
   try {
     const buffer = await file.arrayBuffer()
     const geojson = await shp(buffer)
-    const features = normalizeToFeatures(geojson as FeatureCollection | Feature | Feature[] | FeatureCollection[])
+    const features = normalizeGeoJsonToFeatures(geojson)
 
     if (features.length === 0) {
       return { ok: false, error: 'The shapefile contains no geometries' }

package/src/utils/validateImportedPolygonGeometry.ts

@@ -0,0 +1,62 @@
+import { area, booleanValid, kinks } from '@turf/turf'
+import type { Feature, MultiPolygon, Polygon, Position } from 'geojson'
+
+export type ImportedPolygonValidationResult =
+  | { ok: true; feature: Feature<Polygon | MultiPolygon> }
+  | { ok: false; error: string }
+
+const COORD_TOLERANCE = 1e-9
+
+function coordsEqual(a: Position, b: Position): boolean {
+  return Math.abs(a[0] - b[0]) <= COORD_TOLERANCE && Math.abs(a[1] - b[1]) <= COORD_TOLERANCE
+}
+
+function isRingClosed(ring: Position[]): boolean {
+  if (ring.length < 4) return false
+  return coordsEqual(ring[0], ring[ring.length - 1])
+}
+
+function validateRingsClosed(geometry: Polygon | MultiPolygon): boolean {
+  if (!Array.isArray(geometry?.coordinates)) return false
+  const polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates
+  return polygons.every(polygon => polygon.every(ring => isRingClosed(ring)))
+}
+
+export function validateImportedPolygonGeometry(features: Feature[]): ImportedPolygonValidationResult {
+  try {
+    if (features.length !== 1) {
+      return { ok: false, error: 'The file must contain exactly one geometry' }
+    }
+
+    const feature = features[0]
+    const geometry = feature.geometry
+
+    if (!geometry || (geometry.type !== 'Polygon' && geometry.type !== 'MultiPolygon')) {
+      return { ok: false, error: 'Geometry must be Polygon or MultiPolygon' }
+    }
+
+    if (!validateRingsClosed(geometry)) {
+      return { ok: false, error: 'Polygon ring is not closed or is invalid' }
+    }
+
+    if (!booleanValid(geometry)) {
+      return { ok: false, error: 'Invalid geometry' }
+    }
+
+    if (kinks(geometry).features.length > 0) {
+      return { ok: false, error: 'Geometry has self-intersection' }
+    }
+
+    if (area(geometry) <= 0) {
+      return { ok: false, error: 'Polygon has zero area' }
+    }
+
+    return { ok: true, feature: feature as Feature<Polygon | MultiPolygon> }
+  } catch {
+    return {
+      ok: false,
+      error:
+        'An error occurred while validating the geometry. Ensure the file contains valid coordinates.'
+    }
+  }
+}

package/src/utils/validateShapefileGeometry.ts

@@ -1,54 +0,0 @@
-import { area, booleanValid, kinks } from '@turf/turf'
-import type { Feature, MultiPolygon, Polygon, Position } from 'geojson'
-
-export type ShapefileValidationResult =
-  | { ok: true; feature: Feature<Polygon | MultiPolygon> }
-  | { ok: false; error: string }
-
-const COORD_TOLERANCE = 1e-9
-
-function coordsEqual(a: Position, b: Position): boolean {
-  return Math.abs(a[0] - b[0]) <= COORD_TOLERANCE && Math.abs(a[1] - b[1]) <= COORD_TOLERANCE
-}
-
-function isRingClosed(ring: Position[]): boolean {
-  if (ring.length < 4) return false
-  return coordsEqual(ring[0], ring[ring.length - 1])
-}
-
-function validateRingsClosed(geometry: Polygon | MultiPolygon): boolean {
-  if (!Array.isArray(geometry?.coordinates)) return false
-  const polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates
-  return polygons.every(polygon => polygon.every(ring => isRingClosed(ring)))
-}
-
-export function validateShapefileGeometry(features: Feature[]): ShapefileValidationResult {
-  if (features.length !== 1) {
-    return { ok: false, error: 'The shapefile must contain exactly one geometry' }
-  }
-
-  const feature = features[0]
-  const geometry = feature.geometry
-
-  if (!geometry || (geometry.type !== 'Polygon' && geometry.type !== 'MultiPolygon')) {
-    return { ok: false, error: 'Geometry must be Polygon or MultiPolygon' }
-  }
-
-  if (!validateRingsClosed(geometry)) {
-    return { ok: false, error: 'Polygon ring is not closed or is invalid' }
-  }
-
-  if (!booleanValid(geometry)) {
-    return { ok: false, error: 'Invalid geometry' }
-  }
-
-  if (kinks(geometry).features.length > 0) {
-    return { ok: false, error: 'Geometry has self-intersection' }
-  }
-
-  if (area(geometry) <= 0) {
-    return { ok: false, error: 'Polygon has zero area' }
-  }
-
-  return { ok: true, feature: feature as Feature<Polygon | MultiPolygon> }
-}