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/\
Last updated