Leaflet

8-0 · Jul 3, 2020 · 7b5ffc3 · 7b5ffc3
1 parent 942eeee
commit 7b5ffc3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -61,10 +61,12 @@
     "gatsby-plugin-typescript": "^2.1.27",
     "gatsby-transformer-sharp": "^2.3.14",
     "google-map-react": "^1.1.7",
+    "leaflet": "^1.6.0",
     "polished": "^3.4.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "react-leaflet": "^2.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -1,43 +1,29 @@
 import React from 'react';
 
-import GoogleMapReact from 'google-map-react';
-import { ReactComponent as Marker } from '~/icons/marker.svg';
-
+import { ReactComponent as Mrker } from '~/icons/marker.svg';
+import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
 
 const isClient = typeof window !== 'undefined';
 // import styled from '@emotion/styled';
 // import { css } from '@emotion/core';
-import {
-  IntlContextConsumer,
-  injectIntl,
-  IntlShape
-} from 'gatsby-plugin-intl';
+import { IntlContextConsumer, injectIntl, IntlShape } from 'gatsby-plugin-intl';
+const defaultCenter = [48.4691, 35.0235];
 
 import { Layout } from '~/components/Layout';
 import { SEO } from '~/components/SEO';
-const API_KEY = 'AIzaSyDHuRkzMtkC6tu8Mxvp8xmz7iR9QqkBSvk';
 
 const Contact: React.FC<{ intl: IntlShape }> = ({ intl: { formatMessage } }) => {
   return (
     <Layout>
       <SEO title={formatMessage({ id: 'contact.title' })} />
       <h1>{formatMessage({ id: 'contact.title' })}</h1>
-      {isClient && (
-        <div style={{ height: '100vh', width: '100%' }}>
-          <GoogleMapReact
-            bootstrapURLKeys={{ key: API_KEY }}
-            defaultCenter={[48.4691, 35.0235]}
-            defaultZoom={15}
-          >
-            <div style={{position: 'absolute', transform: 'translate(-50%, -50%)'}}>
-            <Marker/>
-            <IntlContextConsumer>
-              {({ language }) => <img src={`/logo_${language}.png`} alt='HSS logo' style={{ width: '3rem'}}/> }
-            </IntlContextConsumer>
-            </div>
-          </GoogleMapReact>
+        <div style={{  width: '300px', height: '300px'  }}>
+          <Map center={defaultCenter} zoom={14}>
+            <TileLayer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+          </Map>
         </div>
-      )}
     </Layout>
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -885,7 +885,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.10.0":
+"@babel/runtime@^7.10.0", "@babel/runtime@^7.9.2":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99"
   integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==
@@ -6992,6 +6992,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
@@ -10589,6 +10594,11 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"
+  integrity sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==
+
 left-pad@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
@@ -13791,6 +13801,16 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+react-leaflet@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-2.7.0.tgz#0e0e452a4903029f0bb564771eab8cf9db8e4517"
+  integrity sha512-pMf5eRyWU8RH9HohM2i0NZymcWHraJA1m6iMFYu94/01PAaBJpOyxORZJmN6cV9dBzkVWaLjAAHTNmxbwIpcfw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    fast-deep-equal "^3.1.1"
+    hoist-non-react-statics "^3.3.2"
+    warning "^4.0.3"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"