405 Optional Map center, extended preview (#406)

kolebjak · Jan 8, 2022 · 85ea745 · 85ea745
1 parent 9c94545
commit 85ea745
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/home/App.tsx b/home/App.tsx
@@ -5,6 +5,7 @@ import DynamicRoute from "./DynamicRoute";
 import Polygons from "./Polygons";
 import Element from "./Element";
 import RouteInfo from './RouteInfo'
+import MapElement from './MapElement'
 
 declare global {
   interface Window {
@@ -17,6 +18,7 @@ const App = () => {
     <>
       <GlobalStyle />
       <Home />
+      <MapElement />
       <Element />
       <DynamicRoute />
       <Polygons />

diff --git a/home/Home.tsx b/home/Home.tsx
@@ -8,7 +8,7 @@ import GitHubButton from 'react-github-btn';
 import ScrollDown from "./components/ScrollDown";
 
 const code = `
-  <Map height="200px" center={{lat: 50.0755, lng: 14.4378}} />
+  <Map height="200px" />
 `
 
 const SHome = styled(Section)`
@@ -17,16 +17,31 @@ const SHome = styled(Section)`
   align-items: center;
 `;
 
+const SGettingStarted = styled.div`
+  margin-top: 1em;
+`
+
 const Home = () => {
   return (
     <SHome>
       <div style={{width: '40%'}}>
         <h1>react-mapycz</h1>
         <p>Easy-to-use integration of Mapy.cz into React using Mapy.cz API.</p>
         <GitHubButton href="https://github.com/flsy/react-mapycz" data-icon="octicon-star" data-size="large" data-show-count={true} aria-label="Star flsy/react-mapycz on GitHub">Star</GitHubButton>
+        <SGettingStarted>
+          <strong>Getting started</strong>
+          <p>Install library and peer dependencies</p>
+          <SyntaxHighlighter language="bash" style={githubGist}>
+            npm i react-mapycz react-dom@16.13.1 react@16.13.1
+          </SyntaxHighlighter>
+          <p>or</p>
+          <SyntaxHighlighter language="bash" style={githubGist}>
+            yarn add react-mapycz react-dom@16.13.1 react@16.13.1
+          </SyntaxHighlighter>
+        </SGettingStarted>
       </div>
       <div style={{ width: '40%' }}>
-        <Map height="200px" center={{lat: 50.0755, lng: 14.4378}} />
+        <Map height="200px" />
         <SyntaxHighlighter
           language="jsx"
           wrapLongLines={true}
@@ -35,9 +50,9 @@ const Home = () => {
           {code}
         </SyntaxHighlighter>
       </div>
-      <ScrollDown href="#section-element" />
+      <ScrollDown href="#section-map" />
     </SHome>
   )
 }
 
-export default Home;
+export default Home;
diff --git a/home/MapElement.tsx b/home/MapElement.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from "styled-components";
+import {Map} from "../src";
+import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import Section from "./components/Section";
+import ScrollDown from "./components/ScrollDown";
+
+const SMapElement = styled(Section)`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+const MapElement = () => {
+  const code = `
+    <Map height="200px" center={{lat: 50.0755, lng: 14.4378}} />
+  `
+  return (
+    <SMapElement id="section-map">
+      <div style={{width: '50%'}}>
+        <h2>Map</h2>
+        <p>Map is a main element of react-mapycz library.</p>
+        <p>Available properties:</p>
+        <ul>
+          <li>center: <i>optional</i> Center coords</li>
+          <li>width: <i>optional</i> Element width, defaults to 100%</li>
+          <li>height: <i>optional</i> Element height, defaults to 300px</li>
+          <li>zoom: <i>optional</i> Default map zoom, defaults to 13</li>
+          <li>minZoom: <i>optional</i> Minimal map zoom, defaults to 1</li>
+          <li>maxZoom: <i>optional</i> Max map zoom, defaults to 21</li>
+          <li>baseLayers: <i>optional</i> Map layers, array of values from <a target="_blank" href="https://github.com/flsy/react-mapycz/blob/master/src/BaseLayers.tsx">BaseLayers</a></li>
+        </ul>
+      </div>
+      <div style={{width: '40%'}}>
+        <Map height="300px" center={{lat: 50.0755, lng: 14.4378}} />
+        <SyntaxHighlighter
+          language="jsx"
+          wrapLongLines={true}
+          style={githubGist}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+      <ScrollDown href="#section-element" />
+    </SMapElement>
+  )
+}
+
+export default MapElement;
diff --git a/src/Map.tsx b/src/Map.tsx
@@ -9,7 +9,7 @@ export const MapContext = createContext(null)
 export type MapEventListener = (e: MapEvent, coordinates: Coordinates) => void
 
 export interface MapProps {
-  center: { lat: number, lng: number };
+  center?: { lat: number, lng: number };
   width?: string;
   height?: string;
   zoom?: number;
@@ -31,8 +31,8 @@ const StyledMap = styled.div`
 `
 
 const handleEventListener = (e: MapEvent, sMap: unknown, onEvent: MapEventListener) => {
-  const coordinates = (e?.data?.event) 
-    ? window.SMap.Coords.fromEvent(e.data.event, sMap) 
+  const coordinates = (e?.data?.event)
+    ? window.SMap.Coords.fromEvent(e.data.event, sMap)
     : null;
   onEvent(e, coordinates)
 }
@@ -44,7 +44,7 @@ const Map = (props: MapProps) => {
 
   useEffect(() => {
     if (!map && mapNode) {
-      const centerCoords = window.SMap.Coords.fromWGS84(center.lng, center.lat);
+      const centerCoords = center ? window.SMap.Coords.fromWGS84(center.lng, center.lat) : undefined;
       const sMap = new window.SMap(mapNode.current, centerCoords, zoom);
       const l = sMap.addDefaultLayer(BaseLayers.TURIST_NEW);
       l.enable();
@@ -61,7 +61,7 @@ const Map = (props: MapProps) => {
   }, []);
 
   useEffect(() => {
-    if (map) {
+    if (map && center) {
       const centerCoords = window.SMap.Coords.fromWGS84(center.lng, center.lat);
       map.setCenter(centerCoords, animateCenterZoom);
     }