Merge pull request #18 from 2308-Bread/feat/map

Feat/map

package.json

@@ -10,8 +10,10 @@
     "@types/node": "^16.18.78",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

src/components/App/App.tsx

@@ -5,6 +5,7 @@ import Main from '../Main/Main';
 import BreadList from '../BreadList/BreadList';
 import BreadDetail from '../BreadDetail/BreadDetail';
 import './App.css';
+import 'leaflet/dist/leaflet.css';
 
 function App() {
   return (

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1 @@
+export {};

src/components/Loading/Loading.tsx

@@ -0,0 +1 @@
+export {};

src/components/Main/Main.css

@@ -0,0 +1,18 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.main {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.map-container {
+    height: 60vh;
+    width: 100%;
+}

src/components/Main/Main.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Main.css';
+import MapComponent from '../Map/Map';
+
+const Main = () => {
+  return (
+    <div className="main">
+      <div className="map-container">
+        <MapComponent />
+      </div>
+    </div>
+  );
+};
+
+export default Main;

src/components/Map/Map.css

@@ -0,0 +1,24 @@
+.map-container {
+    margin: 20px auto;
+    margin-top: 100px;
+    margin-bottom: 100px;
+    width: 60%;
+    max-width: 600px;
+    overflow: hidden;
+}
+
+.leaflet-container {
+    height: calc(100vh - 100px);
+    width: 100%;
+}
+
+.country-label div {
+    color: rgba(41, 72, 51, 0.7);
+    font-size: 1rem;
+    text-align: center;
+    font-weight: bold;
+}
+
+.leaflet-control-attribution {
+    display: none;
+}

src/components/Map/Map.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react';
+import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import countriesGeoJson from '../../data/countries.json';
+import './Map.css';
+
+const MapComponent = () => {
+  return (
+    <MapContainer center={[0, 0]} zoom={2} style={{ height: '80vh', width: '100%' }}>
+      <TileLayer
+        url="https://tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey=a7eda3efcc6b40449d697372a8171c3b"
+        attribution='&copy; <a href="http://thunderforest.com">Thunderforest</a> contributors'
+        noWrap={true}
+      />
+      <GeoJSONLayer />
+    </MapContainer>
+  );
+};
+
+const GeoJSONLayer = () => {
+  const map = useMap();
+
+  useEffect(() => {
+    const geoJsonLayer = L.geoJSON(countriesGeoJson as any, {
+      style: () => ({
+        fillColor: "rgba(62, 109, 78, 0.5)",
+        color: '#3e6d4e',
+        weight: 1,
+        dashArray: '3',
+        fillOpacity: 0.5
+      }),
+      onEachFeature: (feature, layer) => {
+
+        layer.on({
+          mouseover: (e) => {
+            var layer = e.target;
+            layer.setStyle({
+              fillColor: "rgba(62, 109, 78, 0.5)",
+              weight: 3,
+              opacity: 1,
+              color: '#3e6d4e',
+              dashArray: '3',
+              fillOpacity: 0.7
+            });
+          },
+          mouseout: (e) => {
+            var layer = e.target;
+            geoJsonLayer.resetStyle(layer);
+          }
+        });
+
+        if (feature.properties && feature.properties.name) {
+          if (layer instanceof L.Polygon || layer instanceof L.Polyline) {
+            const center = layer.getBounds().getCenter();
+            const marker = L.marker(center, {
+              icon: new L.DivIcon({
+                className: 'country-label',
+                html: `<div>${feature.properties.name}</div>`,
+                iconSize: L.point(100, 40),
+                iconAnchor: [40, 20]
+              })
+            });
+            marker.addTo(map)
+          }
+        }
+      },
+    })
+
+    geoJsonLayer.addTo(map)
+  }, [map])
+
+  return null;
+}
+
+export default MapComponent

src/components/NoResults/NoResults.tsx

@@ -0,0 +1 @@
+export {};