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://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/\