Merge branch 'master' of https://github.com/smaranjitghose/doc2pen in…

…to bug-sketch-crosshair
anshika208 · Jun 4, 2021 · 010229a · 010229a
2 parents c90a199 + 54522cb
commit 010229a
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 164 deletions.
diff --git a/package.json b/package.json
@@ -1,83 +1,83 @@
-{
-  "private": true,
-  "name": "doc2pen",
-  "version": "0.1.0",
-  "homepage": ".",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --ext js,jsx src",
-    "lint:fix": "eslint --ext js,jsx src --fix"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.1.9",
-    "bootstrap": "^5.0.1",
-    "dom-to-image": "^2.6.0",
-    "file-saver": "^2.0.5",
-    "jspdf": "^2.3.1",
-    "jszip": "^3.6.0",
-    "leaflet": "^1.7.1",
-    "mousetrap": "^1.6.5",
-    "pdf-lib": "^1.16.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.6.0",
-    "react-color": "^2.19.3",
-    "react-dom": "^17.0.2",
-    "react-draggable": "^4.4.3",
-    "react-dropzone": "^11.3.2",
-    "react-easy-emoji": "^1.4.0",
-    "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0",
-    "react-js-snackbar": "^1.0.4",
-    "react-leaflet": "^3.2.0",
-    "react-progressbar-semicircle": "^1.2.1",
-    "react-reveal": "^1.2.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "react-scroll": "^1.8.2",
-    "react-useanimations": "^2.0.6",
-    "reactstrap": "^8.9.0",
-    "roughjs": "^4.4.1",
-    "sass": "^1.34.0",
-    "web-vitals": "^1.1.2"
-  },
-  "devDependencies": {
-    "eslint": "^7.27.0",
-    "eslint-plugin-react": "^7.24.0",
-    "gh-pages": "^3.2.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.0"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.json": "prettier-package-json --write",
-    "*./src/*.{js,jsx,ts,tsx}": [
-      "npx prettier --write",
-      "eslint --fix"
-    ],
-    "*.{md,mdx,json,css,scss,yaml,yml}": [
-      "npx prettier --write"
-    ]
-  }
-}
+{
+  "private": true,
+  "name": "doc2pen",
+  "version": "0.1.0",
+  "homepage": ".",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext js,jsx src",
+    "lint:fix": "eslint --ext js,jsx src --fix"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.1.9",
+    "bootstrap": "^5.0.1",
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
+    "jspdf": "^2.3.1",
+    "jszip": "^3.6.0",
+    "leaflet": "^1.7.1",
+    "mousetrap": "^1.6.5",
+    "pdf-lib": "^1.16.0",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.0",
+    "react-dom": "^17.0.2",
+    "react-draggable": "^4.4.3",
+    "react-dropzone": "^11.3.2",
+    "react-easy-emoji": "^1.4.0",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^4.2.0",
+    "react-js-snackbar": "^1.0.4",
+    "react-leaflet": "^3.2.0",
+    "react-progressbar-semicircle": "^1.2.1",
+    "react-reveal": "^1.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "react-scroll": "^1.8.2",
+    "react-useanimations": "^2.0.6",
+    "reactstrap": "^8.9.0",
+    "roughjs": "^4.4.1",
+    "sass": "^1.34.0",
+    "web-vitals": "^1.1.2",
+    "react-color": "^2.19.3"
+  },
+  "devDependencies": {
+    "eslint": "^7.27.0",
+    "eslint-plugin-react": "^7.24.0",
+    "gh-pages": "^3.2.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "prettier": "^2.3.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.json": "prettier-package-json --write",
+    "*./src/*.{js,jsx,ts,tsx}": [
+      "npx prettier --write",
+      "eslint --fix"
+    ],
+    "*.{md,mdx,json,css,scss,yaml,yml}": [
+      "npx prettier --write"
+    ]
+  }
+}
diff --git a/src/pages/Home/sections/Contact/components/Map/Map.jsx b/src/pages/Home/sections/Contact/components/Map/Map.jsx
@@ -6,62 +6,103 @@ import {
 	Popup,
 	useMap,
 	LayersControl,
+	useMapEvent,
 } from "react-leaflet";
 import "./map.scss";
 import { FiCrosshair } from "react-icons/fi";
 const position = [13.0827, 80.2707];
 
-function reCenter(map) {
-	map.flyTo(position, map.getZoom());
+function ReCenterButton() {
+	const map = useMap();
+
+	return (
+		<label title="Re Center">
+			<button
+				className="reCenter"
+				onClick={() => map.flyTo(position, map.getZoom())}
+			>
+				<FiCrosshair size={30} color="#cccccc" />
+			</button>
+		</label>
+	);
 }
 
-function Comp() {
-	const map = useMap();
+function SetViewOnClick() {
+	const map = useMapEvent("click", e => {
+		map.setView(e.latlng, map.getZoom(), {
+			animate: true,
+		});
+	});
+
+	return null;
+}
+
+const MapLayers = () => {
+	return (
+		<LayersControl position="topright">
+			<LayersControl.BaseLayer name="OSM Light">
+				<TileLayer
+					attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+					url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+				/>
+			</LayersControl.BaseLayer>
+			<LayersControl.BaseLayer checked name="Thunderfrost">
+				<TileLayer url="https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png" />
+			</LayersControl.BaseLayer>
+			<LayersControl.BaseLayer name="Alidade Dark">
+				<TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" />
+			</LayersControl.BaseLayer>
+			<LayersControl.BaseLayer name="Stamen Dark">
+				<TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png" />
+			</LayersControl.BaseLayer>
+			<LayersControl.BaseLayer name="Carto Dark">
+				<TileLayer url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" />
+			</LayersControl.BaseLayer>
+			<Marker position={position}>
+				<Popup>
+					<p>Doc2Pen</p>
+					<a href="mailto:[email protected]">[email protected]</a>
+				</Popup>
+			</Marker>
+		</LayersControl>
+	);
+};
+
+const MapTooltip = () => {
+	return (
+		<div className="mapToolTip">
+			<p>Doc2Pen</p>
+			<br />
+			<br />
+			<a href="mailto:[email protected]">[email protected]</a>
+		</div>
+	);
+};
 
+function MapPlaceholder() {
 	return (
-		<button className="reCenter" onClick={() => reCenter(map)}>
-			<FiCrosshair size={30} color="rgb(0, 153, 255)" />
-		</button>
+		<p>
+			Map of Chennai, India.
+			<noscript>You need to enable JavaScript to see this map.</noscript>
+		</p>
 	);
 }
 
 function Map() {
 	return (
-		<MapContainer center={position} zoom={15} scrollWheelZoom={false}>
-			<div className="mapToolTip">
-				<p>Doc2Pen</p>
-				<br />
-				<br />
-				<a href="mailto:[email protected]">[email protected]</a>
-			</div>
-			<LayersControl position="topright">
-				<LayersControl.BaseLayer name="OSM Light">
-					<TileLayer
-						attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-						url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-					/>
-				</LayersControl.BaseLayer>
-				<LayersControl.BaseLayer checked name="Thunderfrost">
-					<TileLayer url="https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png" />
-				</LayersControl.BaseLayer>
-				<LayersControl.BaseLayer name="Alidade Dark">
-					<TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" />
-				</LayersControl.BaseLayer>
-				<LayersControl.BaseLayer name="Stamen Dark">
-					<TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png" />
-				</LayersControl.BaseLayer>
-				<LayersControl.BaseLayer name="Carto Dark">
-					<TileLayer url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" />
-				</LayersControl.BaseLayer>
-				<Marker position={position}>
-					<Popup>
-						<p>Doc2Pen</p>
-						<a href="mailto:[email protected]">[email protected]</a>
-					</Popup>
-				</Marker>
-			</LayersControl>
-			<Comp />
-		</MapContainer>
+		<>
+			<MapContainer
+				center={position}
+				zoom={15}
+				scrollWheelZoom={false}
+				placeholder={<MapPlaceholder />}
+			>
+				<MapTooltip />
+				<MapLayers />
+				<ReCenterButton />
+				<SetViewOnClick />
+			</MapContainer>
+		</>
 	);
 }
 

diff --git a/src/pages/Home/sections/Contact/components/Map/map.scss b/src/pages/Home/sections/Contact/components/Map/map.scss
@@ -68,8 +68,8 @@
 .reCenter {
 	border-radius: 100%;
 	right: 10px;
-	background: colors.$light-grey;
+	background: colors.$dark-grey;
 	padding: 5px;
 	border: none;
-	box-shadow: 2px 2px 3px colors.$black-thick-tint;
+	box-shadow: 0px 0px 3px colors.$black-thick-tint;
 }