switch from mapbox-gl to maplibre-gl

(and from react-mapbox-gl to react-map-gl; fixes #128)
wq · Feb 20, 2023 · 31ad8b8 · 31ad8b8
1 parent 9f9515c
commit 31ad8b8
Show file tree

Hide file tree

Showing 37 changed files with 877 additions and 475 deletions.
diff --git a/Makefile b/Makefile
@@ -8,8 +8,9 @@ init:
 wq.js: init
 	npm run rollup -- -c
 	cp -p packages/app/css/wq.css static/app/css/wq.css
-	cp -p node_modules/mapbox-gl/dist/mapbox-gl.css static/app/css/mapbox-gl.css
-	cp -p node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css static/app/css/mapbox-gl-draw.css
+	cp -p node_modules/maplibre-gl/dist/maplibre-gl.js* static/app/js/
+	cp -p node_modules/maplibre-gl/dist/maplibre-gl.css* static/app/css/
+	cp -p node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css* static/app/css/
 
 clean:
 	rm -rf static
diff --git a/index.js b/index.js
@@ -3,6 +3,9 @@ import material from "@wq/material";
 import mapgl from "@wq/map-gl";
 import modules from "./modules";
 import version from "./version";
+import maplibre from "maplibre-gl";
+
+mapgl.setEngine(maplibre);
 
 app.use([material, mapgl]);
 

diff --git a/modules.js b/modules.js
@@ -3,16 +3,11 @@ import ReactDOM from "react-dom";
 import ReactIs from "react-is";
 import PropTypes from "prop-types";
 import * as formik from "formik";
-import * as muiUtils from "@material-ui/utils";
-import * as muiStyles from "@material-ui/styles";
-import ButtonBase from "@material-ui/core/ButtonBase";
-import Paper from "@material-ui/core/Paper";
-import withStyles from "@material-ui/core/styles/withStyles";
-import * as colorManipulator from "@material-ui/core/styles/colorManipulator";
-import mapboxgl from "mapbox-gl";
-import ReactMapboxGl, * as reactMapboxGlExports from "react-mapbox-gl";
+import * as muiUtils from "@mui/utils";
+import ButtonBase from "@mui/material/ButtonBase";
+import Paper from "@mui/material/Paper";
+import Map, * as reactMapGlExports from "react-map-gl";
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import DrawControl from "react-mapbox-gl-draw";
 
 import app from "@wq/app";
 import material, * as materialExports from "@wq/material";
@@ -27,19 +22,14 @@ export default {
     "react-is": ReactIs,
     "prop-types": PropTypes,
     formik: formik,
-    "@material-ui/utils": muiUtils,
-    "@material-ui/styles": muiStyles,
-    "@material-ui/core/ButtonBase": ButtonBase,
-    "@material-ui/core/Paper": Paper,
-    "@material-ui/core/styles/withStyles": withStyles,
-    "@material-ui/core/styles/colorManipulator": colorManipulator,
-    "mapbox-gl": mapboxgl,
-    "react-mapbox-gl": {
-        default: ReactMapboxGl,
-        ...reactMapboxGlExports,
+    "@mui/utils": muiUtils,
+    "@mui/material/ButtonBase": ButtonBase,
+    "@mui/material/Paper": Paper,
+    "react-map-gl": {
+        default: Map,
+        ...reactMapGlExports,
     },
     "@mapbox/mapbox-gl-draw": MapboxDraw,
-    "react-mapbox-gl-draw": DrawControl,
     "@wq/app": app,
     "@wq/react": {
         default: react,