added divs for styling

src/App.js

@@ -51,29 +51,33 @@ export class App extends React.Component{
       <div>
         <Router>
           <Navigation />
-          <Switch>
-            <Route path="/" exact component={Home} />
-            <Route path="/about" exact component={About} />
-
-            <Route exact path="/pigeon-map" render={() =>
-              <Pigeon
-                mapConfig={this.state.mapConfig}
-                updateMapState={this.updateMapState}
-                getDistance={this.getDistance}
-              />}
-            />
-            <Route path="/pigeon-map/test" exact component={Pigeons} />
-              
-            <Route path="/map-gl" exact component={MapGL} />
-              
-            <Route path="/leaflet" exact component={Leaflet} />
-            <Route path="/leaflet/test" exact component={Leaflets} />
-              
-            <Route path="/google-map" exact component={Google} />
-              
-            <Route path="/mapbox" exact component={Mapbox} />
-
-          </Switch>
+          <div className="wrapper">
+            <Switch>
+              <Route path="/" exact component={Home} />
+              <Route path="/about" exact component={About} />
+
+              <Route exact path="/pigeon-map" render={() =>
+                <Pigeon
+                  mapConfig={this.state.mapConfig}
+                  updateMapState={this.updateMapState}
+                  getDistance={this.getDistance}
+                />}
+              />
+              <Route path="/pigeon-map/test" exact component={Pigeons} />
+
+              <Route path="/map-gl" exact component={MapGL} />
+              <Route path="/map-gl/test" exact component={MapGLs} />
+
+              <Route path="/leaflet" exact component={Leaflet} />
+              <Route path="/leaflet/test" exact component={Leaflets} />
+
+              <Route path="/google-map" exact component={Google} />
+
+              <Route path="/mapbox" exact component={Mapbox} />
+              <Route path="/mapbox/test" exact component={Mapboxes} />
+
+            </Switch>
+          </div>
           <Footer />
         </Router>
       </div>

src/Google.js

@@ -16,22 +16,27 @@ export default class Google extends React.Component{
   render() {
     const position = [this.state.latitude, this.state.longitude]
     return (
-      <div style={{ height: mapHeight, width: mapWidth }}>
-        <GoogleMapReact
-          bootstrapURLKeys={{ key: apiKey }}
-          defaultCenter={position}
-          defaultZoom={this.state.zoom}
-          yesIWantToUseGoogleMapApiInternals
-          layerTypes={['TrafficLayer', 'TransitLayer']}
-        >
-        
-          <AnyReactComponent
-            lat={latitude}
-            lng={longitude}
-            text="My Marker"
-          />
+      <div>
+        <div style={{ height: mapHeight, width: mapWidth }}>
+          <GoogleMapReact
+            bootstrapURLKeys={{ key: apiKey }}
+            defaultCenter={position}
+            defaultZoom={this.state.zoom}
+            yesIWantToUseGoogleMapApiInternals
+            layerTypes={['TrafficLayer', 'TransitLayer']}
+          >
 
-        </GoogleMapReact>
+            <AnyReactComponent
+              lat={latitude}
+              lng={longitude}
+              text="My Marker"
+            />
+
+          </GoogleMapReact>
+        </div>
+
+        <div className="mapInfo">
+        </div>
       </div>
     );
   }

src/Leaflet.js

@@ -51,36 +51,38 @@ export default class Leaflet extends React.Component{
     const position = [this.state.latitude, this.state.longitude]
     return (
       <div>
-        <Map
-          center={position}
-          zoom={this.state.zoom}
-          zoomControl={false}
-          style={{width: mapWidth, height: mapHeight}}
-          onClick={this.newPathPoint}
-        >
-            <TileLayer
-              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <ZoomControl position="bottomright" />
+        <div className="map">
+          <Map
+            center={position}
+            zoom={this.state.zoom}
+            zoomControl={false}
+            style={{width: mapWidth, height: mapHeight}}
+            onClick={this.newPathPoint}
+          >
+              <TileLayer
+                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              />
+              <ZoomControl position="bottomright" />
 
-            {this.state.path.map((pos, idx) =>
-              <Marker
-                position={pos}
-                draggable
-                key={idx}
-                onDragend={(e) => this.updateMarker(idx, e)}
-              >
-                <Popup>
-                  {idx}
-                </Popup>
-              </Marker>
-            )}
+              {this.state.path.map((pos, idx) =>
+                <Marker
+                  position={pos}
+                  draggable
+                  key={idx}
+                  onDragend={(e) => this.updateMarker(idx, e)}
+                >
+                  <Popup>
+                    {idx}
+                  </Popup>
+                </Marker>
+              )}
 
-            <Polyline color="grey" positions={this.state.path} />
-        </Map>
+              <Polyline color="grey" positions={this.state.path} />
+          </Map>
+        </div>
 
-        <div>
+        <div className="mapInfo">
           <button onClick={this.clearPath}>Clear path</button>
           <button onClick={this.getDistance}>Calculate Distance</button>
           <p>

src/MapGL.js

@@ -59,41 +59,43 @@ export default class MapGL extends React.Component{
   render() {
     return (
       <div>
-        <ReactMapGL
-          {...this.state.viewport}
-          onViewportChange={(viewport) => this.setState({viewport})}
-          mapboxApiAccessToken={mapboxToken}
-          mapStyle="mapbox://styles/mapbox/streets-v11"
-          onClick={this.addMarker}
-        >
-        
-        {this.state.path.map((pos, idx) =>
-          <Marker
-            longitude={pos[1]}
-            latitude={pos[0]}
-            captureClick={false}
-            draggable={true}
-            offsetTop={-20}
-            offsetLeft={-8}
-            key={idx}
-            onDragEnd={(e) => this.updateMarker(idx, e)}
+        <div className="map">
+          <ReactMapGL
+            {...this.state.viewport}
+            onViewportChange={(viewport) => this.setState({viewport})}
+            mapboxApiAccessToken={mapboxToken}
+            mapStyle="mapbox://styles/mapbox/streets-v11"
+            onClick={this.addMarker}
           >
-            <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
-              <path d={markerIcon} />
-            </svg>
-          </Marker>
-        )}
 
-          <div className="controllers">
-            <GeolocateControl />
-            <FullscreenControl />
-            <NavigationControl />
-            <ScaleControl />
-            <small> {'\u00A9'} Mapbox {'\u00A9'} OpenStreetMap </small>
-          </div>
-        </ReactMapGL>
+          {this.state.path.map((pos, idx) =>
+            <Marker
+              longitude={pos[1]}
+              latitude={pos[0]}
+              captureClick={false}
+              draggable={true}
+              offsetTop={-20}
+              offsetLeft={-8}
+              key={idx}
+              onDragEnd={(e) => this.updateMarker(idx, e)}
+            >
+              <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
+                <path d={markerIcon} />
+              </svg>
+            </Marker>
+          )}
 
-        <div>
+            <div className="controllers">
+              <GeolocateControl />
+              <FullscreenControl />
+              <NavigationControl />
+              <ScaleControl />
+              <small> {'\u00A9'} Mapbox {'\u00A9'} OpenStreetMap </small>
+            </div>
+          </ReactMapGL>
+        </div>
+
+        <div className="mapInfo">
           <button onClick={this.clearPath}>Clear path</button>
           <button onClick={this.getDistance}>Calculate Distance</button>
           <p>

src/Mapbox.js

@@ -55,31 +55,32 @@ export default class Mapbox extends React.Component{
     const position = [this.state.longitude, this.state.latitude]
     return (
       <div>
-        <Map
-          style="mapbox://styles/mapbox/bright-v9"
-          containerStyle={{
-            height: mapHeight,
-            width: mapWidth
-          }}
-          center={this.state.center}
-          zoom={this.state.zoom}
-          onClick={(e, c) => this.addMarker(e, c)}
-        >
-          <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15" }}>
-            {this.state.path.map((pos, idx) =>
-              <Feature
-                coordinates={pos}
-                key={idx} draggable={true}
-                onDragEnd={(e) => this.updateMarker(idx, e)}
-              />
-            )}
-          </Layer>
-          <ZoomControl position={"top-right"}/>
-          <ScaleControl position={"bottom-right"}/>
-          <RotationControl position={"top-right"}/>
-        </Map>
-
-        <div>
+        <div className="map">
+          <Map
+            style="mapbox://styles/mapbox/bright-v9"
+            containerStyle={{
+              height: mapHeight,
+              width: mapWidth
+            }}
+            center={this.state.center}
+            zoom={this.state.zoom}
+            onClick={(e, c) => this.addMarker(e, c)}
+          >
+            <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15" }}>
+              {this.state.path.map((pos, idx) =>
+                <Feature
+                  coordinates={pos}
+                  key={idx} draggable={true}
+                  onDragEnd={(e) => this.updateMarker(idx, e)}
+                />
+              )}
+            </Layer>
+            <ZoomControl position={"top-right"}/>
+            <ScaleControl position={"bottom-right"}/>
+            <RotationControl position={"top-right"}/>
+          </Map>
+        </div>
+        <div className="mapInfo">
           <button onClick={this.clearPath}>Clear path</button>
           <button onClick={this.getDistance}>Calculate Distance</button>
           <p>

src/Pigeon.js

@@ -44,29 +44,31 @@ export default class Pigeon extends React.Component{
     const mapConfig = this.props.mapConfig;
     return (
       <div>
-        <Map
-          center={mapConfig.coords}
-          defaultZoom={mapConfig.defaultZoom}
-          zoom={mapConfig.zoom}
-          width={mapWidth}
-          height={mapHeight}
-          attribution="Pigeon Map"
-          attributionPrefix={false}
-          animation={true}
-          provider={this.providers["osm"]}
-          dprs={[1, 2]}
-          onClick={(event) => this.addMarker(event)}
-        >
-            {mapConfig.path.map((pos, idx) =>
-              <Marker anchor={pos} key={idx}/>
-            )}
+        <div className="map">
+          <Map
+            center={mapConfig.coords}
+            defaultZoom={mapConfig.defaultZoom}
+            zoom={mapConfig.zoom}
+            width={mapWidth}
+            height={mapHeight}
+            attribution="Pigeon Map"
+            attributionPrefix={false}
+            animation={true}
+            provider={this.providers["osm"]}
+            dprs={[1, 2]}
+            onClick={(event) => this.addMarker(event)}
+          >
+              {mapConfig.path.map((pos, idx) =>
+                <Marker anchor={pos} key={idx}/>
+              )}
 
-            <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>
-              {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}
-            </Overlay>
-        </Map>
+              <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>
+                {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}
+              </Overlay>
+          </Map>
+        </div>
 
-        <div>
+        <div className="mapInfo">
           <button onClick={this.zoomIn}>+</button>
           <button onClick={this.zoomOut}>-</button>
           <button onClick={this.removeMarkers}>Clear path</button>

src/css/maps.css

@@ -1,14 +1,28 @@
-  
+.wrapper{
+  padding: 20px;
+}
+
+.map{
+  float: left;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+
+.mapInfo{
+  float: left;
+}
+
 .controllers{  
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding: 5px 10px;
-    display: flex;
-    flex-direction: column;
-    place-items: flex-end;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: column;
+  place-items: flex-end;
 }
 
 .mapboxgl-ctrl-attrib.mapboxgl-compact{
-    display: none;
-}
+  display: none;
+}
+