trying to resolve leaflet

Author: KittyJose

package-lock.json

@@ -27,6 +27,7 @@
     "test": "jest"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/(?!react-dnd|dnd-core|@react-dnd)"
     ]
@@ -110,6 +111,7 @@
     "bootstrap": "^5.1.3",
     "chroma-js": "^2.4.2",
     "html-react-parser": "^3.0.4",
+    "jest-transform-css": "^6.0.1",
     "leaflet": "^1.9.4",
     "leaflet-arrowheads": "^1.4.0",
     "mermaid": "^9.3.0",
@@ -120,8 +122,9 @@
     "react-diff-viewer": "^3.1.1",
     "react-icons": "^4.3.1",
     "react-json-editor-ajrm": "^2.5.13",
-    "react-leaflet": "^3.2.5",
+    "react-leaflet": "^4.2.1",
     "react-leaflet-fullscreen": "^2.0.2",
+    "react-leaflet-universal": "^2.2.1",
     "react-select": "^5.2.2",
     "react-syntax-highlighter": "^15.5.0",
     "uuid": "^9.0.0"

packages/tdb-documents-ui/package.json

@@ -11,7 +11,6 @@ import { TDBLabel } from "../components/LabelComponent"
 import { getDisplay } from "../helpers/fieldDisplay"
 import { getPlaceholder } from "../helpers/placeholderHelper"
 import { TDBInput } from "../widgets/inputWidgets"
-import { Polygon } from "react-leaflet"
 
 // Move down button
 const MoveDownButton = ({ element, variant }) => {

packages/tdb-documents-ui/src/arrayHelpers/geoJSONTemplates.js

@@ -2,10 +2,20 @@
 // map icon component
 import L from "leaflet";
 
+
+
+export default L.icon({
+  iconSize: [25, 41],
+  iconAnchor: [10, 41],
+  popupAnchor: [2, -40],
+  iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
+  shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
+})
+
 // constants 
 export const TYPE="@type"
 export const CLASS="@class"
-export const INHERITS="@inherits"
+export const INHERITS="@inherits" 
 
 // info constanst to help with rjsf forms
 export const PLACEHOLDER="@placeholder"
@@ -145,14 +155,6 @@ export const GEOMETRY_ARRAY=[
 ]
 
 
-export default L.icon({
-    iconSize: [25, 41],
-    iconAnchor: [10, 41],
-    popupAnchor: [2, -40],
-    iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
-    shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
-})
-
 // MIN ITEMS PER DIMENSIONS
 export const BBOX_MIN_ITEMS=4
 export const POINT_MIN_ITEMS=2

packages/tdb-documents-ui/src/constants.js

@@ -9,7 +9,6 @@ import { TDBSubDocument, populateSubDocumentData } from "../widgets/subDocumentW
 import { TDBDocument } from "../widgets/documentWidget"
 import { TDBJSON } from "../widgets/JSONWidget"
 import * as CONST from "../constants"
-import { TDBGeoCollectionDocuments } from "../mapComponents/geoCollectionWidget"
 import { TDBFeatureCollectionDocuments } from "../mapComponents/featureCollectionWidget"
 import { TDBBBoxDocuments } from "../widgets/bboxGeoJSONWidget"
 import { extractPropertyDocumentation } from "./widgetHelper"
@@ -341,7 +340,6 @@ export function displayCollectionDocument (args, property, id) {
     bounds: bounds
   } 
   return <TDBFeatureCollectionDocuments config={config}/>
-  return <TDBGeoCollectionDocuments config={config}/>
 }
 
 export function displayFeatureCollectionDocument (args, property, id, featureData) {

packages/tdb-documents-ui/src/helpers/displayHelper.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import Stack from "react-bootstrap/Stack"
 import { FullscreenControl } from "react-leaflet-fullscreen";
-import "react-leaflet-fullscreen/dist/styles.css";
+import "react-leaflet-fullscreen/dist/styles.css"; 
 import { TDBLabel } from "../components/LabelComponent"
 import { v4 as uuidv4 } from 'uuid';
 import "leaflet-arrowheads"
@@ -12,11 +12,12 @@ import * as CONST from "../constants"
 import { customMapOptions, customMarkerOptions, getCenterFromData }  from "./markers"
 import * as util from "../utils"
 
+ 
 export const TDBFeatureCollectionDocuments = ({ config }) => {
   const mapRef = useRef(null);
 
   let mapID=uuidv4()
-  
+   
   const map = () => { 
     let zoom=MAP_OPTION.zoom
     //let bounds=util.setBounds(config.documents.hasOwnProperty(CONST.B_BOX) ? config.documents[CONST.B_BOX] : [])
@@ -57,7 +58,7 @@ export const TDBFeatureCollectionDocuments = ({ config }) => {
   return <Stack direction="horizontal"  className="mb-3">
     <TDBLabel name={config.label ? config.label : config.name} 
       required={config.required} 
-      id={config.id}/>
+      id={config.id}/> 
     <div ref={mapRef} id={`tdb__map__geojson__leaflet_${mapID}`} className="rounded" data-testid={`map-leaflet-id`}></div>
   </Stack>
 }

packages/tdb-documents-ui/src/mapComponents/featureCollectionWidget.js

@@ -7,7 +7,7 @@ import "leaflet-arrowheads"
 import L from "leaflet"
 import { v4 as uuidv4 } from 'uuid';
 import { MARKER_OPTION } from "./map.constants"
-
+ 
 export const lineStringMapViewer = (args) => {
 	let { documents, zoom, onMarkerClick, center, bounds }=args
 

packages/tdb-documents-ui/src/mapComponents/geoCollectionWidget.js

@@ -12,6 +12,7 @@ import {logRoles} from '@testing-library/dom';
  * @returns submitted data from <FrameViewer/>
 */
 const setupCreate = async(config) => {
+
   // submitted data via <FrameViewer/>
   let data=false