Use @emotion for styling, remove Map.css.

cneben · Dec 24, 2022 · 74dda90 · 74dda90
1 parent 78be9e1
commit 74dda90
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "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",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,23 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "React Maplibre standalone sample",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

diff --git a/src/components/Map.css b/src/components/Map.css
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useState } from 'react';
-import maplibregl from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import './Map.css';
+/** @jsxImportSource @emotion/react */
+import React, { 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);
@@ -23,7 +23,7 @@ const Map = () => {
             maxBounds: [6.540000, 45.770000, 7.160000, 46.040000]
         });
 
-        // The 'building' layer in the streets vector source contains building-height
+        // 'building' layer in the streets vector source contains building-height
         // data from OpenStreetMap.
         map.current.on('load', function () {
             var layers = map.current!.getStyle().layers;
@@ -48,16 +48,6 @@ const Map = () => {
                             "property": "min_height",
                             "type": "identity"
                         },
-                        // FIXME
-                        /*[
-                            'interpolate',
-                            ['linear'],
-                            ['zoom'],
-                            15,
-                            0,
-                            15.05/*,
-                            ['get', 'min_height'] as unknown
-                        ],*/
                         'fill-extrusion-opacity': 0.6
                     }
                 },
@@ -86,8 +76,20 @@ const Map = () => {
     });
 
     return (
-        <div className="map-wrap">
-            <div ref={mapContainer} className="map" />
+        <div css={{
+            position: 'relative',
+            width: '100%',
+            height: '100vh'
+        }}>
+            <div
+                ref={mapContainer}
+                css={{
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100vh',
+                    backgroundColor: '#c0ddfd'
+                }}
+            />
         </div>
     );
 }

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,12 +13,12 @@
     /* Language and Environment */
     "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "react",                                /* Specify what JSX code is generated. */
+    "jsx": "react",                                      /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    "jsxImportSource": "@emotion/react",                 /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */