Map Component Completed

src/components/Map/index.js

@@ -0,0 +1,39 @@
+import Mapir from "mapir-react-component";
+
+// import blueMark from '../../../assets/icons/marker-blue.png';
+
+// import './index.scss';
+
+const Map = Mapir.setToken({
+  transformRequest: (url) => {
+    return {
+      url: url,
+      headers: {
+        "x-api-key":
+          "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q", //Mapir api key
+        "Mapir-SDK": "reactjs",
+      },
+    };
+  },
+});
+
+export default function location() {
+  return (
+    <Mapir
+      userLocation={true}
+      Map={Map}
+      apiKey={
+        "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q"
+      }
+      center={[51.401464,35.700815 ]}
+    >
+      <Mapir.Marker
+        coordinates={[51.401464,35.700815 ]}
+        anchor="top"
+        // Image={blueMark}
+        style={{width:20, height: 20}}
+        className="marker"
+      ></Mapir.Marker>
+    </Mapir>
+  );
+}