Implemented map Viewer

package.json

@@ -75,6 +75,7 @@
     "react-vega": "^7.6.0",
     "reselect": "^4.1.5",
     "tmp-promise": "^3.0.3",
+    "topojson-client": "^3.1.0",
     "ts-essentials": "^9.0.0",
     "validator": "^13.9.0",
     "vega": "^5.24.0",
@@ -93,13 +94,15 @@
     "@types/file-saver": "^2.0.4",
     "@types/jest": "^27.0.2",
     "@types/js-yaml": "^4.0.4",
+    "@types/leaflet": "^1.9.3",
     "@types/lodash": "^4.14.176",
     "@types/marked": "^4.0.0",
     "@types/node": "^16.11.6",
     "@types/papaparse": "^5.3.1",
     "@types/react": "^18.0.2",
     "@types/react-dom": "^18.0.2",
     "@types/tmp": "^0.2.2",
+    "@types/topojson-client": "^3.1.1",
     "@types/validator": "^13.7.15",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",

src/components/Controllers/File/Viewer.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import Box from '@mui/material/Box'
+import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet'
 import { useStore } from './store'
+import * as topojson from 'topojson-client'
 import * as helpers from '../../../helpers'
 
 export default function Viewer() {
@@ -27,7 +29,21 @@ function ImageViewer() {
 function MapViewer() {
   const textSource = useStore((state) => state.textSource)
   if (!textSource) return null
-  return <Box sx={{ padding: 2 }}>{textSource}</Box>
+  let data = JSON.parse(textSource)
+  if (data?.type === 'Topology') {
+    data = topojson.feature(data, Object.keys(data.objects)[0] as any)
+  }
+  return (
+    <Box sx={{ padding: 2, width: '100%', height: '100%' }}>
+      <MapContainer center={[51.505, -0.09]} zoom={3} scrollWheelZoom={false}>
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <GeoJSON data={data} />
+      </MapContainer>
+    </Box>
+  )
 }
 
 function NonSupportedViewer() {