skatepark tutorial

Author: flabowski

package-lock.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-map-gl": "^5.2.3",
     "react-scripts": "3.4.1"
   },
   "scripts": {

package.json

@@ -1,24 +1,79 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState, useEffect } from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import ReactMapGL, { Marker, Popup } from "react-map-gl";
+import * as parkData from "./data/skateboard-parks.json";
 
 function App() {
+  const [viewport, setViewport] = useState({
+    width: "100vw",
+    height: "100vh",
+    latitude: 45.4211,
+    longitude: -75.6903,
+    zoom: 10,
+  });
+
+  let tkn = process.env.REACT_APP_MAPBOX_TOKEN;
+  console.log(tkn);
+  tkn =
+    "pk.eyJ1IjoiZmxvMDcxMSIsImEiOiJjazhyaHdpNm0wOTNhM2ZxYW00bmFpa3lzIn0.VaBR--gsZy_nTT4sv6AYdA";
+  console.log(tkn);
+
+  const [selectedPark, setSelectedPark] = useState(null);
+  useEffect(() => {
+    const listner = (e) => {
+      if (e.key === "Escape") {
+        setSelectedPark(null);
+      }
+    };
+    window.addEventListener("keydown", listner);
+
+    return () => {
+      window.removeEventListener("keydown", listner);
+    };
+  }, []);
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <ReactMapGL
+        {...viewport}
+        mapboxApiAccessToken={tkn}
+        mapStyle="mapbox://styles/flo0711/ck8q7a2oq15zc1ik75utoq6j7"
+        onViewportChange={(viewport) => {
+          setViewport(viewport);
+        }}
+      >
+        {parkData.features.map((park) => (
+          <Marker
+            key={park.properties.PARK_ID}
+            latitude={park.geometry.coordinates[1]}
+            longitude={park.geometry.coordinates[0]}
+          >
+            <button
+              className="marker-btn"
+              onClick={(e) => {
+                e.preventDefault();
+                setSelectedPark(park);
+              }}
+            >
+              <img src="/skateboarding.svg" alt="Skate Park Icon" />
+            </button>
+          </Marker>
+        ))}
+        {selectedPark ? (
+          <Popup
+            latitude={selectedPark.geometry.coordinates[1]}
+            longitude={selectedPark.geometry.coordinates[0]}
+            onClose={() => {
+              setSelectedPark(null);
+            }}
+          >
+            <div>
+              <h2>{selectedPark.properties.NAME}</h2>
+              <p>{selectedPark.properties.DESCRIPTIO}</p>
+            </div>
+          </Popup>
+        ) : null}
+      </ReactMapGL>
     </div>
   );
 }

public/skateboarding.svg

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+
+class Counter extends Component {
+  state = {
+    count: 10.123,
+    imgURL: "https://picsum.photos/200",
+  };
+  styles = { fontSize: 16 };
+  render() {
+    return (
+      <div>
+        {/*<img src={this.state.imgURL} alt="" />*/}
+        <span style={this.styles} className="badge badge-primary m-2">
+          {this.formatCount()}
+        </span>
+        <button className="btn btn-secondary btn-sm">Increment</button>
+      </div>
+    );
+  }
+  formatCount() {
+    const { count } = this.state;
+    return count === 0 ? <h1>nix</h1> : count;
+  }
+}
+
+export default Counter;