Add simple map

- Use maplibre-gl
- Basemap: Stamen/toner
- Create Redux store

package.json

@@ -4,11 +4,16 @@
   "homepage": "https://bannel.github.io/tm-welfare-map",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "mapbox-gl": "npm:empty-npm-package@^1.0.0",
+    "maplibre-gl": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-map-gl": "^7.0.19",
+    "react-redux": "^8.0.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,24 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { Fragment } from "react";
+import MapView from "./components/Map/MapView";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Fragment>
+      <MapView />
+    </Fragment>
   );
 }
 

src/components/Map/MapView.js

@@ -0,0 +1,52 @@
+import { useRef, useState, useCallback, Fragment } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { mapActions } from "../../store/map-slice";
+
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import Map, { NavigationControl, ScaleControl } from "react-map-gl";
+
+const MapView = () => {
+  const dispatch = useDispatch();
+  const mapRef = useRef();
+  const [cursor, setCursor] = useState("auto");
+  const viewState = useSelector((state) => state.map.viewState);
+  const mapStyle = useSelector((state) => state.map.mapStyle);
+
+  const onMapLoad = useCallback(() => {
+    mapRef.current.on("dragstart", () => {
+      setCursor("move");
+    });
+
+    mapRef.current.on("dragend", () => {
+      setCursor("auto");
+    });
+  }, []);
+
+  const onMove = useCallback(
+    (e) => {
+      dispatch(mapActions.setViewState(e.viewState));
+    },
+    [dispatch]
+  );
+
+  return (
+    <Fragment>
+      <Map
+        {...viewState}
+        mapStyle={mapStyle}
+        mapLib={maplibregl}
+        onLoad={onMapLoad}
+        onMove={onMove}
+        style={{ width: "100vw", height: "100vh" }}
+        ref={mapRef}
+        cursor={cursor}
+      >
+        <NavigationControl position="bottom-right" />
+        <ScaleControl />
+      </Map>
+    </Fragment>
+  );
+};
+
+export default MapView;

src/index.js

@@ -3,11 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import store from "./store/index";
+import { Provider } from "react-redux";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 

src/store/index.js

@@ -0,0 +1,14 @@
+import { configureStore } from "@reduxjs/toolkit";
+import mapSlice from "./map-slice";
+
+const store = configureStore({
+  reducer: {
+    map: mapSlice.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+});
+
+export default store;

src/store/map-slice.js

@@ -0,0 +1,59 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const defaultViewState = {
+  latitude: 25.02312941733473,
+  longitude: 121.54838821352193,
+  zoom: 14,
+  customAttribution:
+    '<a href="https://www.trendmicro.com/" target="_blank">&copy; Trend Micro Inc.</a> ',
+};
+
+const defaultMapStyle = {
+  version: 8,
+  sources: {
+    stamen_toner: {
+      type: "raster",
+      tiles: [
+        "https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
+      ],
+      tileSize: 256,
+      attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+    },
+  },
+  sprite: "",
+  glyphs: "https://yuchuntsao.github.io/fonts/{fontstack}/{range}.pbf",
+  layers: [
+    {
+      "id": "background",
+      "type": "background",
+      "minzoom": 0,
+      "paint": {
+        "background-color": "rgba(255, 255, 255, 1)"
+      }
+    },
+    {
+      id: "stamen_toner",
+      type: "raster",
+      source: "stamen_toner",
+      paint: {
+        'raster-opacity': 0.3
+      }
+    }
+  ],
+};
+
+const mapSlice = createSlice({
+  name: "map",
+  initialState: {
+    viewState: defaultViewState,
+    mapStyle: defaultMapStyle,
+  },
+  reducers: {
+    setViewState(state, action) {
+      state.viewState = action.payload;
+    }
+  },
+});
+
+export const mapActions = mapSlice.actions;
+export default mapSlice;