Skip to content

Commit

Permalink
mapbox packages updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoseLuisGJ
JoseLuisGJ committed Apr 20, 2024
1 parent 06feebb commit dd6ae05
Show file tree
Hide file tree
Showing 10 changed files with 690 additions and 224 deletions.
13 changes: 9 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
34 changes: 17 additions & 17 deletions src/app/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand All @@ -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)
});
Expand Down Expand Up @@ -152,14 +152,14 @@ const App = ({}) => {
return (
<div className="main-wrapper">
<div className="map-wrapper">
<Map
<MyMap
styleMode={styleMode}
viewport={viewport}
viewState={viewState}
accessToken={accessToken}
username={username}
customStyleID={customStyleID}
mapboxStyle={mapboxStyle}
setViewport={setViewport}
setviewState={setviewState}
stateMarkers={stateMarkers}
setStateMarkers={setStateMarkers}
mapMode={mapMode}
Expand Down Expand Up @@ -207,8 +207,8 @@ const App = ({}) => {
/>
<hr />
<MapPropertiesForm
viewport={viewport}
handleViewportChange={handleViewportChange}
viewState={viewState}
handleviewStateChange={handleviewStateChange}
/>
<hr />
<ImageSizeForm
Expand All @@ -227,8 +227,8 @@ const App = ({}) => {
setMarkerImg={setMarkerImg}
stateMarkers={stateMarkers}
setStateMarkers={setStateMarkers}
viewport={viewport}
handleViewportChangeFileLoaded={handleViewportChangeFileLoaded}
viewState={viewState}
handleviewStateChangeFileLoaded={handleviewStateChangeFileLoaded}
/>
</>
)}
Expand All @@ -237,7 +237,7 @@ const App = ({}) => {
styleMode={styleMode}
customStyleID={customStyleID}
mapboxStyle={mapboxStyle}
viewport={viewport}
viewState={viewState}
mapExportWidth={mapExportWidth}
mapExportHeight={mapExportHeight}
isRetina={isRetina}
Expand Down
10 changes: 5 additions & 5 deletions src/app/components/DrawMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface IMap {
styleMode: any;
customStyleID: any;
mapboxStyle: any;
viewport: any;
viewState: any;
mapExportWidth: any;
mapExportHeight: any;
isRetina: any;
Expand All @@ -22,7 +22,7 @@ const DrawMap: React.FC<IMap> = ({
styleMode,
customStyleID,
mapboxStyle,
viewport,
viewState,
mapExportWidth,
mapExportHeight,
isRetina,
Expand All @@ -40,9 +40,9 @@ const DrawMap: React.FC<IMap> = ({
styleMode == "customMapboxStyle" ? username : "mapbox"
}/${
styleMode == "customMapboxStyle" ? customStyleID : mapboxStyle
}/static/${viewport.longitude},${viewport.latitude},${viewport.zoom},${
viewport.bearing
},${viewport.pitch}/${mapExportWidth}x${mapExportHeight}${
}/static/${viewState.longitude},${viewState.latitude},${viewState.zoom},${
viewState.bearing
},${viewState.pitch}/${mapExportWidth}x${mapExportHeight}${
isRetina ? "@2x" : ""
}?access_token=${accessToken}&attribution=false&logo=false`;
fetch(imurl)
Expand Down
50 changes: 25 additions & 25 deletions src/app/components/MapMarkersForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@ import * as React from "react";
import { useEffect } from "react";
import Dropzone from "react-dropzone";
import gpxParser from "gpxParser";
import { WebMercatorViewport } from "react-map-gl";
// import { WebMercatorViewport } from "react-map-gl";
import * as mixpanel from "mixpanel-figma";

interface IMap {
setMarkerImg: any;
figmaComponents: any;
stateMarkers: any;
setStateMarkers: any;
viewport: any;
handleViewportChangeFileLoaded: any;
viewState: any;
handleviewStateChangeFileLoaded: any;
}

const MapMarkerForm: React.FC<IMap> = ({
setMarkerImg,
stateMarkers,
setStateMarkers,
// stateMarkers,
// setStateMarkers,
figmaComponents,
viewport,
handleViewportChangeFileLoaded
viewState,
handleviewStateChangeFileLoaded
}) => {
useEffect(() => {
parent.postMessage(
Expand Down Expand Up @@ -48,25 +48,25 @@ const MapMarkerForm: React.FC<IMap> = ({
return;
}

let nextViewport = {
...viewport,
let nextviewState = {
...viewState,
latitude: Number(waypoints[0].lat),
longitude: Number(waypoints[0].lon)
};
const v = new WebMercatorViewport(nextViewport);
let newMarkers = waypoints.map(waypoint => {
const [x, y] = v.project([waypoint.lon, waypoint.lat]);
return {
longitude: waypoint.lon,
latitude: waypoint.lat,
x: x,
y: y,
name: waypoint.name,
icon: null
};
});
// const v = new WebMercatorviewState(nextviewState);
// let newMarkers = waypoints.map(waypoint => {
// const [x, y] = v.project([waypoint.lon, waypoint.lat]);
// return {
// longitude: waypoint.lon,
// latitude: waypoint.lat,
// x: x,
// y: y,
// name: waypoint.name,
// icon: null
// };
// });

setStateMarkers(stateMarkers.concat(newMarkers));
// setStateMarkers(stateMarkers.concat(newMarkers));
parent.postMessage(
{
pluginMessage: {
Expand All @@ -75,9 +75,9 @@ const MapMarkerForm: React.FC<IMap> = ({
},
"*"
);
handleViewportChangeFileLoaded(
nextViewport.latitude,
nextViewport.longitude
handleviewStateChangeFileLoaded(
nextviewState.latitude,
nextviewState.longitude
);
};

Expand Down
48 changes: 24 additions & 24 deletions src/app/components/MapPropertiesForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import * as React from "react";
import { useEffect } from "react";

interface IMap {
handleViewportChange: any;
viewport: any;
handleviewStateChange: any;
viewState: any;
}

const MapPropertiesForm: React.FC<IMap> = ({
viewport,
handleViewportChange
viewState,
handleviewStateChange
}) => {
useEffect(() => {});

Expand All @@ -27,14 +27,14 @@ const MapPropertiesForm: React.FC<IMap> = ({
max="85"
step="any"
name="latitude"
value={viewport.latitude}
value={viewState.latitude}
onChange={e => {
if (Number(e.target.value) > 85) {
handleViewportChange(e, 85);
handleviewStateChange(e, 85);
} else if (Number(e.target.value) < -85) {
handleViewportChange(e, -85);
handleviewStateChange(e, -85);
} else {
handleViewportChange(e, e.target.value);
handleviewStateChange(e, e.target.value);
}
}}
/>
Expand All @@ -48,14 +48,14 @@ const MapPropertiesForm: React.FC<IMap> = ({
max="180"
step="any"
name="longitude"
value={viewport.longitude}
value={viewState.longitude}
onChange={e => {
if (Number(e.target.value) > 180) {
handleViewportChange(e, 180);
handleviewStateChange(e, 180);
} else if (Number(e.target.value) < -180) {
handleViewportChange(e, -180);
handleviewStateChange(e, -180);
} else {
handleViewportChange(e, e.target.value);
handleviewStateChange(e, e.target.value);
}
}}
/>
Expand All @@ -76,14 +76,14 @@ const MapPropertiesForm: React.FC<IMap> = ({
max="22"
step="any"
name="zoom"
value={viewport.zoom}
value={viewState.zoom}
onChange={e => {
if (Number(e.target.value) > 22) {
handleViewportChange(e, 22);
handleviewStateChange(e, 22);
} else if (Number(e.target.value) < 0) {
handleViewportChange(e, 0);
handleviewStateChange(e, 0);
} else {
handleViewportChange(e, e.target.value);
handleviewStateChange(e, e.target.value);
}
}}
/>
Expand All @@ -97,14 +97,14 @@ const MapPropertiesForm: React.FC<IMap> = ({
max="60"
step="any"
name="pitch"
value={viewport.pitch}
value={viewState.pitch}
onChange={e => {
if (Number(e.target.value) > 60) {
handleViewportChange(e, 60);
handleviewStateChange(e, 60);
} else if (Number(e.target.value) < 0) {
handleViewportChange(e, 0);
handleviewStateChange(e, 0);
} else {
handleViewportChange(e, e.target.value);
handleviewStateChange(e, e.target.value);
}
}}
/>
Expand All @@ -118,14 +118,14 @@ const MapPropertiesForm: React.FC<IMap> = ({
max="180"
step="any"
name="bearing"
value={viewport.bearing}
value={viewState.bearing}
onChange={e => {
if (Number(e.target.value) > 180) {
handleViewportChange(e, 180);
handleviewStateChange(e, 180);
} else if (Number(e.target.value) < -180) {
handleViewportChange(e, -180);
handleviewStateChange(e, -180);
} else {
handleViewportChange(e, e.target.value);
handleviewStateChange(e, e.target.value);
}
}}
/>
Expand Down
Loading

0 comments on commit dd6ae05

Please sign in to comment.