Merge pull request #3 from cneben/m/#2-maintenance-vitejs

M/#2 maintenance update from CR to vitejs, update to latest maplibre
cneben · Jul 14, 2024 · da5db49 · da5db49
2 parents 74dda90 + 2718039
commit da5db49
Show file tree

Hide file tree

Showing 19 changed files with 252 additions and 12,789 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

diff --git a/README.md b/README.md
@@ -28,10 +28,10 @@ Our objective is to build a Maplibre web application with the following features
 git clone https://github.com/cneben/react-maplibre-standalone
 cd react-maplibre-standalone
 npm install
-npm start
+npm run dev
 ```
 
-Web application should then be available at: http://localhost:3000
+Web application should then be available at: http://localhost:3000  (Note: port 3000 is hardcoded in `style.json` it must be free)
 
 This README.md describe the process for generating your own GIS data:
 

diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Maplibre standalone sampl</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,47 +1,30 @@
 {
   "name": "react-maplibre-standalone",
-  "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "maplibre-gl": "^3.0.0-pre.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "devDependencies": {
-    "typescript": "^4.9.4",
-    "@types/react": "^18.0.26",
-    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.17",
-    "@types/react-dom": "^18.0.10"
-  },
+  "version": "0.3.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "tsc",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "maplibre-gl": "^4.5.0",
+    "@emotion/react": "^11.11.4"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,5 @@
+#root {
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import Map from './components/Map';
+import './App.css'
 
 function App() {
   return (

diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -1,97 +1,101 @@
 /** @jsxImportSource @emotion/react */
-import React, { useRef, useEffect, useState } from 'react'
-import maplibregl from 'maplibre-gl'
-import 'maplibre-gl/dist/maplibre-gl.css'
+import { useRef, useEffect, useState } from "react";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
 
 const Map = () => {
-    const mapContainer = useRef<HTMLDivElement | null>(null);
-    const map = useRef<maplibregl.Map | null>(null);
-    const [lat] = useState(45.92);
-    const [lng] = useState(6.87);
-    const [zoom] = useState(14);
+  const mapContainer = useRef<HTMLDivElement | null>(null);
+  const map = useRef<maplibregl.Map | null>(null);
+  const [lat] = useState(45.92);
+  const [lng] = useState(6.87);
+  const [zoom] = useState(14);
 
-    React.useEffect(() => {
-        if (map.current) return;
-        map.current = new maplibregl.Map({
-            container: mapContainer.current as HTMLElement,
-            style: `http://localhost:3000/style.json`,
-            center: [lng, lat],
-            zoom: zoom,
-            antialias: true,
-            maxPitch: 80,
-            maplibreLogo: true,
-            maxBounds: [6.540000, 45.770000, 7.160000, 46.040000]
-        });
+  useEffect(() => {
+    if (map.current) return;
+    map.current = new maplibregl.Map({
+      container: mapContainer.current as HTMLElement,
+      style: `/style.json`,
+      center: [lng, lat],
+      zoom: zoom,
+      antialias: true,
+      maxPitch: 80,
+      maplibreLogo: true,
+      maxBounds: [6.54, 45.77, 7.16, 46.04],
+    });
 
-        // 'building' layer in the streets vector source contains building-height
-        // data from OpenStreetMap.
-        map.current.on('load', function () {
-            var layers = map.current!.getStyle().layers;
-            map.current!.addLayer(
-                {
-                    id: 'building-3d',
-                    source: 'openmaptiles',
-                    'source-layer': "building",
-                    filter: ["all", ["!has", "hide_3d"]],
-                    type: 'fill-extrusion',
-                    minzoom: 13,
-                    layout: { visibility: "visible" },
-                    paint: {
-                        'fill-extrusion-color': '#aaa',
-                        // use an 'interpolate' expression to add a smooth transition effect to the
-                        // buildings as the user zooms in
-                        "fill-extrusion-height": {
-                            "property": "render_height",
-                            "type": "identity"
-                        },
-                        'fill-extrusion-base':  {
-                            "property": "min_height",
-                            "type": "identity"
-                        },
-                        'fill-extrusion-opacity': 0.6
-                    }
-                },
-                'waterway-name'
-            );
-        });
-
-        map.current.addControl(
-            new maplibregl.NavigationControl({
-                visualizePitch: true,
-                showZoom: true,
-                showCompass: true
-            }), 
-            'top-right')
-        map.current.addControl(
-            new maplibregl.TerrainControl({
-                source: 'terrain_source',
-                exaggeration: 1
-            })
-        );
-        map.current.addControl(
-            new maplibregl.ScaleControl({
-                maxWidth: 300,
-                unit: 'metric'
-            }))
+    // 'building' layer in the streets vector source contains building-height
+    // data from OpenStreetMap.
+    map.current.on("load", function () {
+      var layers = map.current!.getStyle().layers;
+      map.current!.addLayer(
+        {
+          id: "building-3d",
+          source: "openmaptiles",
+          "source-layer": "building",
+          filter: ["all", ["!has", "hide_3d"]],
+          type: "fill-extrusion",
+          minzoom: 13,
+          layout: { visibility: "visible" },
+          paint: {
+            "fill-extrusion-color": "#aaa",
+            // use an 'interpolate' expression to add a smooth transition effect to the
+            // buildings as the user zooms in
+            "fill-extrusion-height": {
+              property: "render_height",
+              type: "identity",
+            },
+            "fill-extrusion-base": {
+              property: "min_height",
+              type: "identity",
+            },
+            "fill-extrusion-opacity": 0.6,
+          },
+        },
+        "waterway-name"
+      );
     });
 
-    return (
-        <div css={{
-            position: 'relative',
-            width: '100%',
-            height: '100vh'
-        }}>
-            <div
-                ref={mapContainer}
-                css={{
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100vh',
-                    backgroundColor: '#c0ddfd'
-                }}
-            />
-        </div>
+    map.current.addControl(
+      new maplibregl.NavigationControl({
+        visualizePitch: true,
+        showZoom: true,
+        showCompass: true,
+      }),
+      "top-right"
+    );
+    map.current.addControl(
+      new maplibregl.TerrainControl({
+        source: "terrain_source",
+        exaggeration: 1,
+      })
     );
-}
+    map.current.addControl(
+      new maplibregl.ScaleControl({
+        maxWidth: 300,
+        unit: "metric",
+      })
+    );
+  });
+
+  return (
+    <div
+      css={{
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+      }}
+    >
+      <div
+        ref={mapContainer}
+        css={{
+          position: "absolute",
+          width: "100%",
+          height: "100vh",
+          backgroundColor: "#c0ddfd",
+        }}
+      />
+    </div>
+  );
+};
 
-export default Map;
+export default Map;