move some variables to config file

.gitignore

@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-/src/config/*
+/src/config/googleApiKey.js
+/src/config/mapboxToken.js

src/App.js

@@ -14,6 +14,8 @@ import Google from './Google';
 import Mapbox from './Mapbox';
 
 import {calcDistance} from './helpers/distance';
+import {longitude, latitude} from "./config/variables";
+
 
 export class App extends React.Component{
     constructor(props) {
@@ -23,9 +25,7 @@ export class App extends React.Component{
             mapConfig: {
                 zoom: 15,
                 path: [],
-                coords: [48.336950, 14.320570],
-                width: 600,
-                height: 400,
+                coords: [latitude, longitude],
                 defaultZoom: 15,
                 distance: 0,
             }

src/Google.js

@@ -2,23 +2,21 @@ import React from "react";
 import GoogleMapReact from 'google-map-react';
 import "./css/maps.css";
 import apiKey from './config/googleApiKey.js';
-
-const LONGITUDE = 14.320570
-const LATITUDE = 48.336950
+import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
 
 const AnyReactComponent = ({ text }) => <div>{text}</div>;
 
 export default class Google extends React.Component{
   state = {
-    latitude: LATITUDE,
-    longitude: LONGITUDE,
+    latitude: latitude,
+    longitude: longitude,
     zoom: 15,
     }
   
   render() {
     const position = [this.state.latitude, this.state.longitude]
     return (
-      <div style={{ height: '450px', width: '600px' }}>
+      <div style={{ height: mapHeight, width: mapWidth }}>
         <GoogleMapReact
           bootstrapURLKeys={{ key: apiKey }}
           defaultCenter={position}
@@ -28,8 +26,8 @@ export default class Google extends React.Component{
         >
         
           <AnyReactComponent
-            lat={59.955413}
-            lng={30.337844}
+            lat={latitude}
+            lng={longitude}
             text="My Marker"
           />
 

src/Leaflet.js

@@ -8,16 +8,13 @@ import {
   Polyline
 } from "react-leaflet";
 import "./css/maps.css";
-import {calcDistance} from './helpers/distance';
-
-const LONGITUDE = 14.320570
-const LATITUDE = 48.336950
-
+import {calcDistance} from "./helpers/distance";
+import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
 
 export default class Leaflet extends React.Component{
   state = {
-    latitude: LATITUDE,
-    longitude: LONGITUDE,
+    latitude: latitude,
+    longitude: longitude,
     zoom: 15,
     path: [[48.295742, 14.286967], [48.328529, 14.322428]],
     distance: 0
@@ -58,7 +55,7 @@ export default class Leaflet extends React.Component{
           center={position}
           zoom={this.state.zoom}
           zoomControl={false}
-          style={{width: 600, height: 400}}
+          style={{width: mapWidth, height: mapHeight}}
           onClick={this.newPathPoint}
         >
             <TileLayer

src/MapGL.js

@@ -10,20 +10,15 @@ import {
 import "./css/maps.css";
 import mapboxToken from './config/mapboxToken.js';
 import {calcDistance} from './helpers/distance';
-
-const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
-  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
-  C20.1,15.8,20.2,15.8,20.2,15.7z`;
-const LONGITUDE = 14.320570
-const LATITUDE = 48.336950
+import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./config/variables";
   
 export default class MapGL extends React.Component{
   state = {
     viewport: {
-      width: 600,
-      height: 400,
-      latitude: LATITUDE,
-      longitude: LONGITUDE,
+      width: mapWidth,
+      height: mapHeight,
+      latitude: latitude,
+      longitude: longitude,
       zoom: 15,
       bearing: 0,
       pitch: 0
@@ -83,21 +78,21 @@ export default class MapGL extends React.Component{
             onDragEnd={(e) => this.updateMarker(idx, e)}
           >
             <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
-              <path d={ICON} />
+              <path d={markerIcon} />
             </svg>
           </Marker>
         )}
 
           <Marker
-            longitude={LONGITUDE}
-            latitude={LATITUDE}
+            longitude={longitude}
+            latitude={latitude}
             captureClick={false}
             draggable={false}
             offsetTop={-20}
             offsetLeft={-8}
           >
             <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
-              <path d={ICON} />
+              <path d={markerIcon} />
             </svg>
           </Marker>
 

src/Mapbox.js

@@ -8,21 +8,16 @@ import ReactMapboxGl, {
     Marker 
 } from 'react-mapbox-gl';
 import mapboxToken from './config/mapboxToken.js';
+import {longitude, latitude, testPath, mapWidth, mapHeight, markerIcon} from "./config/variables";
 
-const LONGITUDE = 14.320570
-const LATITUDE = 48.336950
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
-const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
-  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
-  C20.1,15.8,20.2,15.8,20.2,15.7z`;
-
 
 export default class Mapbox extends React.Component{
   state = {
-    latitude: LATITUDE,
-    longitude: LONGITUDE,
+    latitude: latitude,
+    longitude: longitude,
     zoom: [15],
-    path: [[48.295742, 14.286967], [48.328529, 14.322428]],
+    path: testPath,
     distance: 0
     }
 
@@ -32,8 +27,8 @@ export default class Mapbox extends React.Component{
         <Map
             style="mapbox://styles/mapbox/streets-v9"
             containerStyle={{
-                height: '400',
-                width: '600'
+                height: mapHeight,
+                width: mapWidth
             }}
             center={position}
             zoom={this.state.zoom}
@@ -47,7 +42,7 @@ export default class Mapbox extends React.Component{
                 anchor="bottom"
             >
                 <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
-                    <path d={ICON} />
+                    <path d={markerIcon} />
                 </svg>
             </Marker>
         

src/Pigeon.js

@@ -1,7 +1,8 @@
 import React from "react";
-import Map from 'pigeon-maps'
-import Marker from 'pigeon-marker'
-import Overlay from 'pigeon-overlay'
+import Map from "pigeon-maps";
+import Marker from "pigeon-marker";
+import Overlay from "pigeon-overlay";
+import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
 
 export default class Pigeon extends React.Component{
   providers = {
@@ -47,8 +48,8 @@ export default class Pigeon extends React.Component{
           center={mapConfig.coords}
           defaultZoom={mapConfig.defaultZoom}
           zoom={mapConfig.zoom}
-          width={mapConfig.width}
-          height={mapConfig.height}
+          width={mapWidth}
+          height={mapHeight}
           attribution="Pigeon Map"
           attributionPrefix={false}
           animation={true}
@@ -56,13 +57,13 @@ export default class Pigeon extends React.Component{
           dprs={[1, 2]}
           onClick={(event) => this.addMarker(event)}
         >
-           <Marker anchor={[48.336950, 14.320570]} payload={1} onClick={({ event, anchor, payload }) => {}} />
+           <Marker anchor={[latitude, longitude]} payload={1} onClick={({ event, anchor, payload }) => {}} />
 
             {mapConfig.path.map((pos, idx) =>
               <Marker anchor={pos} key={idx}/>
             )}
 
-            <Overlay anchor={[48.337069, 14.319570]} offset={[120, 79]}>
+            <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>
               {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}
             </Overlay>
         </Map>

src/config/variables.js

@@ -0,0 +1,10 @@
+export const latitude = 48.336950;
+export const longitude = 14.320570;
+export const testPath = [[48.295742, 14.286967], [48.328529, 14.322428]];
+
+export const mapWidth = 600;
+export const mapHeight = 400;
+
+export const markerIcon = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
+  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
+  C20.1,15.8,20.2,15.8,20.2,15.7z`;