SVG generate function testing

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.13.5",
         "@mui/material": "^6.1.9",
         "@reduxjs/toolkit": "^2.2.3",
+        "@svgdotjs/svg.js": "^3.2.4",
         "export-to-csv": "^1.3.0",
         "leaflet": "^1.9.4",
         "lodash-es": "^4.17.21",
@@ -2938,6 +2939,16 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@svgdotjs/svg.js": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz",
+      "integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Fuzzyma"
+      }
+    },
     "node_modules/@tanstack/match-sorter-utils": {
       "version": "8.19.4",
       "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",

frontend/package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.13.5",
     "@mui/material": "^6.1.9",
     "@reduxjs/toolkit": "^2.2.3",
+    "@svgdotjs/svg.js": "^3.2.4",
     "export-to-csv": "^1.3.0",
     "leaflet": "^1.9.4",
     "lodash-es": "^4.17.21",
@@ -60,4 +61,4 @@
     "vite": "^5.2.5",
     "vite-plugin-istanbul": "^6.0.2"
   }
-}
+}

frontend/src/components/Map/generateSvg.ts

@@ -0,0 +1,29 @@
+import { SVG } from '@svgdotjs/svg.js'
+
+type CoordinateConversion = 'web_mercanter'
+interface PixelCoordinates {
+  x: number
+  y: number
+}
+
+const webMercanterConvert = (lat: number, long: number): PixelCoordinates => {
+  const zoomLevel = 2
+  const pi = 3.141592653589793
+  return {
+    x: (1 / (pi * 2)) * (2 ^ zoomLevel) * (pi + long),
+    y: (1 / (pi * 2)) * (2 ^ zoomLevel) * (pi - Math.log(Math.tan(pi / 4 + lat / 2))),
+  }
+}
+
+export const generateSvg = (conversion: CoordinateConversion) => {
+  const draw = SVG()
+  const polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
+
+  const dataString = draw.svg()
+  const blob = new Blob([dataString], { type: 'text/kml' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'map.svg'
+  a.click()
+}