Summary

Data flow summarised via function names. The arrow shows the data flow. Bear in mind that this article will only focus on ‘spatial-vessel’ layer but it applies to all spatial types.

<MapCapability /> —> 
<DeckGL layers={spatialLayer} —> 
useLayer(layersId?: string) —> 
processSpatialLayer(layers: TLayers[]) —> 
resolveSpatialLayer(layerType: string) —> 
spatialVesselLayer(layerOptions: any, datasourceOptions: any) —> 
useDatasourceEncoder(datasourceOptions: any)

Bypassing the Auth (Optional)

At the time of writing this article, Neutrino service is currently down so in order to bypass Neutrino remove the code below. However, this only makes the Gis app an empty shell with no data or services.

FILE : gis/src/modules/App.tsx

export default function App({ ...rest }) {
	// Codes ....
	// Codes ...
	// Codes ..
  return (
    <CacheProvider store={store} isSsr={false} {...rest}>
      {/* <AuthWrapper /> Commented this to bypass auth */}
      <GisModule /> {/* Added this to bypass auth */}
    </CacheProvider>
  )
}

Component Prop Usage

FILE : gis/src/capabilities/MapCapability.tsx

This is where the entrypoint for the data from DB to be implemented in MapBox layer but using another 3rd party package called DeckGL as it is much faster for render in comparison to MapBox for large amounts of data to be render.

function MapCapability(){
	// Go to useLayer() definition
	const { spatialLayers } = useLayer() // Business logic for data fetching is in here 
	
	return (
		// Data is used in DeckGL component via prop
		<DeckGL layers={spatialLayer} ..etc />
	)
}

Layer Data Fetch Hook

FILE : gis/src/libs/utils/layer.ts

useLayer() is a custom hook to handle things regarding layers. The layer styling i.e color, width, height, etc and also where data is fetched is within this hook. P.S : “Hook” is a React term for a function that does something that requires some rerender of the component. Please read here.

export const useLayer = (layersId?: string[] ) => {
  // Some codes ...
	// Some codes ... 
	// Some codes ...
  // THIS IS WHAT WE WANT TO FOCUS ON
  const processSpatialLayer = (layers: TLayer[]) => {
	  // Some codes...
	  // Some codes...
	  // Go to resolveSpatialLayer() definition
	  const spatialLayer = resolveSpatialLayer(layerType)
  }
}

Resolving Layer Types