# 9/29/2021

**9-29-2021**\\

***

***

**Learn ANT design - Frontend and UI/UX**

**Backend - Going over endpoints and caching**\\

***

**Meeting at 1 pm lambda time talk about technical objectives**\\

***

**Friday - github setup**\
\*\*\*\*\
\*\*\*\*\\

***

\*\*9-29-2021 \*\*

**Notes from call with Ryan Hamblin -**\\

***

**Map - Ant Design**\\

***

**Frontend:**

**Any changes to data gets a redraw of map markers**\\

***

**Backend:**\\

***

**Shape of data presenting exactly the way the front end needs it to speed up frontend load and streamline delivery**

**Pass Latitude and Longitude to front-end**\
\*\*\*\*\\

***

**React Map GL - github.com/visgl/react-map-gl**

**Map Plan - mapbox.com/blog/mapbox-gl-js-react**

**Zoom is important and rerender/react to zoom change**\\

***

**Const { long, lat } = map.getCenter() - centers markers on screen**\\

***

**Example:**\\

***

**import \* as React from 'react';**

**import ReactMapGL from 'react-map-gl';**\\

***

**function Map() {**

\*\* const \[viewport, setViewport] = React.useState({\*\*

\*\* latitude: 37.7577,\*\*

\*\* longitude: -122.4376,\*\*

\*\* zoom: 8\*\*

\*\* });\*\*\\

***

\*\* return (\*\*

\*\* \<ReactMapGL\*\*

\*\* {...viewport}\*\*

\*\* width="100%"\*\*

\*\* height="100%"\*\*

\*\* onViewportChange={(viewport) => setViewport(viewport)}\*\*

\*\* />\*\*

\*\* );\*\*

**}**\
\*\*\*\*\\

***

[**https://visgl.github.io/react-map-gl/docs**](https://visgl.github.io/react-map-gl/docs)\*\*\*\*\\

***

**<https://codesandbox.io/s/eager-fast-p3bfw>**

**<https://codesandbox.io/s/competent-ride-cxn8e>**

\*\*This one is closer to what we're doing... <https://codesandbox.io/s/boat-ramps-forked-6rs9p**\\>
\*\*\*\*\
\*\*\*\*\\

***

**Setup JSON sandbox to begin features**\
\*\*\*\*\\

***

**Frontend**

\*\*\<Marker \*\*

**key={dot.program}**

**longitude={dot.longitude}**

**latitude={dot.latitude}**

**>**\\

***

**\<img src={yellowPing} />**

**\</Marker>**\
\*\*\*\*\
\*\*\*\*\\

***

**Backend:**

**Database - latitude | longitude | service type | different color marker for each component | map clusters | function to return string - take in program type like .map - for eahc service type program - give only data that frontend needs**\\

***

**.map(service => \<Marker style = {stylingFunc(service.programType) => “”} />**\
\*\*\*\*\\

***

**stylingFunc(programType => {**

**if(type1) => style1**

**if(type2) => style2**

**if(type3) => style3**

**})**\
\*\*\*\*\\

***

**onUpdate | Restful architecture with react**

**PUT - full rest - update the app, update the truth data set - go to state - Storage**

**Rerender map after address input in search**

**Return new entire data set**

**Resets markers to reprint map - setup in state to trigger rerender**\
\*\*\*\*\\

***

**Swagger Docs**

\*\*<http://family-promise-dev.us-east-1.elasticbeanstalk.com/**\\\\>