diff --git a/package.json b/package.json
index 8d87caf..70e3046 100644
--- a/package.json
+++ b/package.json
@@ -4,22 +4,27 @@
"description": "This plugin template uses Typescript. If you are familiar with Javascript, Typescript will look very familiar. In fact, valid Javascript code is already valid Typescript code.",
"license": "ISC",
"scripts": {
- "build": "webpack --mode=production",
- "build:watch": "webpack --mode=development --watch",
+ "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode=production",
+ "build:watch": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode=development --watch",
"prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' "
},
"dependencies": {
+ "@mapbox/mapbox-gl-geocoder": "^5.0.2",
+ "@math.gl/core": "^4.0.1",
+ "@math.gl/web-mercator": "^4.0.1",
"gpxparser": "^3.0.8",
+ "mapbox-gl": "^3.2.0",
"mixpanel-figma": "^2.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-dropzone": "^14.2.2",
- "react-map-gl-geocoder": "^2.1.5",
+ "react-map-gl-geocoder": "^2.2.0",
"viewport-mercator-project": "^7.0.1"
},
"devDependencies": {
"@figma/eslint-plugin-figma-plugins": "^0.15.0",
"@figma/plugin-typings": "^1.89.0",
+ "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^7.5.0",
@@ -33,7 +38,7 @@
"husky": "^3.0.2",
"lint-staged": "^9.2.1",
"prettier": "^1.18.2",
- "react-map-gl": "^5.2.9",
+ "react-map-gl": "^7.1.7",
"style-loader": "^0.23.1",
"ts-loader": "^6.0.4",
"typescript": "^5.4.3",
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
index 208b3da..627d0f4 100644
--- a/src/app/components/App.tsx
+++ b/src/app/components/App.tsx
@@ -3,11 +3,11 @@ import { useState, useRef } from "react";
import * as mixpanel from "mixpanel-figma";
import "mapbox-gl/dist/mapbox-gl.css";
-import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";
+// import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";
import "bootstrap/dist/css/bootstrap-grid.css";
import "../styles/ui.css";
-import Map from "./Map";
+import MyMap from "./MyMap";
import MapStylesForm from "./MapStylesForm";
import MapPropertiesForm from "./MapPropertiesForm";
import ImageSizeForm from "./ImageSizeForm";
@@ -29,7 +29,7 @@ const App = ({}) => {
const [stateMarkers, setStateMarkers] = useState([]);
const [markerImg, setMarkerImg] = useState(1);
- let [viewport, setViewport] = useState({
+ let [viewState, setviewState] = useState({
longitude: -77.03968,
latitude: 38.89744,
zoom: 8,
@@ -38,15 +38,15 @@ const App = ({}) => {
width: 560,
height: 560
});
- const handleViewportChange = (e, value) => {
- setViewport({
- ...viewport,
+ const handleviewStateChange = (e, value) => {
+ setviewState({
+ ...viewState,
[e.target.name]: Number(value)
});
};
- const handleViewportChangeFileLoaded = (lat, lon) => {
- setViewport({
- ...viewport,
+ const handleviewStateChangeFileLoaded = (lat, lon) => {
+ setviewState({
+ ...viewState,
latitude: Number(lat),
longitude: Number(lon)
});
@@ -152,14 +152,14 @@ const App = ({}) => {
return (
-