Add region map component

Author: balthild

.env.example

@@ -0,0 +1,2 @@
+GOOGLE_CLIENT_ID=
+GOOGLE_MAP_KEY=

.gitignore

@@ -11,6 +11,7 @@
 .idea
 *.iml
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

config/webpack.config.dev.js

@@ -255,6 +255,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
+      env: process.env,
     }),
     // Add module names to factory functions so they appear in browser profiler.
     new webpack.NamedModulesPlugin(),

config/webpack.config.prod.js

@@ -287,6 +287,7 @@ module.exports = {
         minifyCSS: true,
         minifyURLs: true,
       },
+      env: process.env,
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.

package.json

@@ -55,6 +55,7 @@
         "test": "node scripts/test.js --env=jsdom"
     },
     "devDependencies": {
+        "@types/googlemaps": "^3.30.0",
         "@types/jest": "^21.1.5",
         "@types/node": "^8.0.50",
         "@types/react": "^16.0.22",

public/index.html

@@ -37,5 +37,8 @@
             To begin the development, run `npm start` or `yarn start`.
             To create a production bundle, use `npm run build` or `yarn build`.
         -->
+
+        <script src="https://apis.google.com/js/platform.js"></script>
+        <script src="https://maps.googleapis.com/maps/api/js?key=<%= htmlWebpackPlugin.options.env.GOOGLE_MAP_KEY %>"></script>
     </body>
 </html>

src/components/Join.tsx

@@ -3,6 +3,7 @@ import './Join.scss';
 import { Button, Card, Col, Form, Icon, Input, Layout, Row } from 'antd';
 import { Link } from 'react-router-dom';
 import Sidebar from './Sidebar';
+import RegionMap from './RegionMap';
 
 interface State {
     //
@@ -46,7 +47,10 @@ export default class Article extends React.Component {
                                         <Input prefix={<Icon type="user" />} placeholder="Telegram Username (不带 @)" />
                                     </Form.Item>
 
-                                    // Map Here
+                                    <Form.Item label="主要活动区域">
+                                        <p>如你发现战区与现实的行政区矛盾，还是请按照此地图中的战区选择</p>
+                                        <RegionMap />
+                                    </Form.Item>
 
                                     <Form.Item label="其他说明">
                                         <p>可以在此简述一下你是怎么入坑的、你的入坑时间、是否认识其他特工等</p>

src/components/RegionMap.css

@@ -0,0 +1,19 @@
+#region-map-container {
+    position: relative;
+}
+
+#region-map {
+    height: 300px;
+}
+
+#region-map-hint {
+    background: #ffffff;
+    padding: 8px;
+    font-size: 11px;
+    line-height: 14px;
+    position: absolute;
+    top: 10px;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
+    display: none;
+}

src/components/RegionMap.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import './RegionMap.css';
+import regions from './regions';
+
+export default class RegionMap extends React.Component {
+    state = {
+        hint: '',
+        hintStyle: {}
+    };
+
+    setHint(hint: string) {
+        const rel = document.querySelector('.gm-style-mtc') as HTMLElement;
+
+        this.setState({
+            hint,
+            hintStyle: {
+                left: rel.parentElement !== null ? rel.parentElement!.offsetWidth + 20 : 0,
+                display: hint === '' ? 'none' : 'block'
+            }
+        });
+    }
+
+    componentDidMount() {
+        if (typeof google === 'undefined') {
+            throw new Error('Google Maps SDK not loaded');
+        }
+
+        let map = new google.maps.Map(document.getElementById('region-map'), {
+            center: new google.maps.LatLng(23.1, 113.3),
+            zoom: 9,
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+        });
+
+        map.data.addGeoJson(regions);
+
+        map.data.setStyle((feature: google.maps.Data.Feature) => {
+            let color = feature.getProperty('color');
+            return {
+                fillColor: color,
+                strokeColor: color,
+                strokeWeight: 2
+            };
+        });
+
+        map.data.addListener('mouseover', (event: google.maps.Data.MouseEvent) => {
+            map.data.revertStyle();
+            map.data.overrideStyle(event.feature, {
+                strokeColor: 'white',
+                strokeWeight: 3,
+                zIndex: google.maps.Marker.MAX_ZINDEX
+            });
+            this.setHint(event.feature.getProperty('name'));
+        });
+
+        map.data.addListener('mouseout', (event: google.maps.Data.MouseEvent) => {
+            map.data.revertStyle();
+            this.setHint('');
+        });
+
+        map.data.addListener('click', (event: google.maps.Data.MouseEvent) => {
+            // this.$emit('select', event);
+        });
+    }
+
+    render() {
+        return (
+            <div id="region-map-container">
+                <div id="region-map" />
+                <div id="region-map-hint" style={this.state.hintStyle}>{this.state.hint}</div>
+            </div>
+        );
+    }
+}