diff --git a/Noise_Complaint_React_App.png b/Noise_Complaint_React_App.png new file mode 100644 index 0000000..8c00137 Binary files /dev/null and b/Noise_Complaint_React_App.png differ diff --git a/README.md b/README.md index f93a487..998b5fb 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,19 @@ -Git Clone the repo +This app adds spatial data to the map from an open source, adds an event which accesses or changes the data being displayed. +and uses React component(s) such as react-leaflet and tools such as jquery and lifecycle methods that either display information about the data or update based on user events. -NPM install node modules +To run simply download/fork, then on your terminal -npm run start \ No newline at end of file +-> npm install + +-> npm run start + +Once completed, you will be able to interact with the app at http://localhost:3000/ + +When dealing with react, one introduces the constructor to then call super() to pass the props to React.Component. +That is proceeded by classes. We do not use classes directly in turn pushing one to leverage Javascript more inside each defined class. For this project I have three classes: + +Sidebar, Main, and App + +Within Sidebar, two buttons that reside within sidebar are included via html code. For every div defined, the styling is found in App.css +Within Main, div map is instantiated, proceeded by assigning baselayers and spatial data. The spatial data has been retrieved from an open source whereas polygons and points are simply made up. To add any geojson data, one leverages the leaflet library by populating geojson data as follows: L.geojson(geojson_data).addTo(map). Styling of the spatial data, therefore in geojson format, is done accordingly. +Within App, the container div, sidebar, as well as the calling of Main class is done. diff --git a/public/index.html b/public/index.html index 00743e2..89c4b47 100644 --- a/public/index.html +++ b/public/index.html @@ -26,12 +26,18 @@ + + + + +
+