added mapbox with a marker

package.json

@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@terrestris/react-geo": "^14.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "antd": "^4.7.2",
     "bootstrap": "^4.5.2",
     "express": "^4.17.1",
     "google-map-react": "^2.1.8",
+    "jquery": "^3.5.1",
     "leaflet": "^1.7.1",
+    "mapbox-gl": "^1.12.0",
+    "ol": "^6.0.1",
     "pigeon-draggable": "^0.1.1",
     "pigeon-maps": "^0.16.1",
     "pigeon-marker": "^0.3.4",
@@ -18,6 +23,8 @@
     "react-dom": "^16.14.0",
     "react-leaflet": "^2.7.0",
     "react-map-gl": "^5.2.9",
+    "react-map-gl-draw": "^0.21.1",
+    "react-mapbox-gl": "^4.8.6",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
@@ -25,6 +32,9 @@
     "redux": "^4.0.5",
     "serve": "^11.3.2"
   },
+  "resolutions": {
+    "@turf/difference": "6.0.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

src/App.js

@@ -11,6 +11,7 @@ import Pigeon from './Pigeon';
 import MapGL from './MapGL';
 import Leaflet from './Leaflet';
 import Google from './Google';
+import Mapbox from './Mapbox';
 
 import {calcDistance} from './helpers/distance';
 
@@ -60,6 +61,7 @@ export class App extends React.Component{
                   <Route path="/map-gl" exact component={MapGL} />
                   <Route path="/leaflet" exact component={Leaflet} />
                   <Route path="/google-map" exact component={Google} />
+                    <Route path="/mapbox" exact component={Mapbox} />
                 </Switch>
                 <Footer />
               </Router>

src/Mapbox.js

@@ -0,0 +1,60 @@
+import React from "react";
+import ReactMapboxGl, { 
+    Layer, 
+    Feature, 
+    ZoomControl, 
+    ScaleControl, 
+    RotationControl, 
+    Marker 
+} from 'react-mapbox-gl';
+import mapboxToken from './config/mapboxToken.js';
+
+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,
+    zoom: [15],
+    path: [[48.295742, 14.286967], [48.328529, 14.322428]],
+    distance: 0
+    }
+
+  render() {
+    const position = [this.state.longitude, this.state.latitude]
+    return (
+        <Map
+            style="mapbox://styles/mapbox/streets-v9"
+            containerStyle={{
+                height: '400',
+                width: '600'
+            }}
+            center={position}
+            zoom={this.state.zoom}
+        >
+            <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
+                <Feature coordinates={position} />
+            </Layer>
+        
+            <Marker
+                coordinates={position}
+                anchor="bottom"
+            >
+                <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
+                    <path d={ICON} />
+                </svg>
+            </Marker>
+        
+            <ZoomControl position={"bottom-right"}/>
+            <ScaleControl position={"bottom-right"}/>
+            <RotationControl position={"bottom-right"}/>
+        </Map>
+    );
+  }
+}

src/Navigation.js

@@ -26,6 +26,9 @@ class Navigation extends React.Component{
                   <li className={`nav-item  ${this.props.location.pathname === "/google-map" ? "active" : ""}`}>
                     <Link className="nav-link" to="/google-map">Google Map</Link>
                   </li>
+                    <li className={`nav-item  ${this.props.location.pathname === "/mapbox" ? "active" : ""}`}>
+                    <Link className="nav-link" to="/mapbox">Mapbox</Link>
+                  </li>
                 </ul>
               </div>
             </nav>