react-icons/ri#RiRoadMapLine TypeScript Examples

Layout = ({
  title,
  icon,
  sidebarContents,
  children,
}: LayoutProps): JSX.Element => {
  const [settingsOpen, setSettingsOpen] = useState(false);

  const route = useRoute();

  const tabs: Omit<TabProps, 'activeLeft' | 'activeRight'>[] = [
    {
      title: 'Messages',
      icon: <FiMessageCircle />,
      link: routes.messages().link,
      active: route.name === 'messages',
    },
    {
      title: 'Map',
      icon: <RiRoadMapLine />,
      link: routes.map().link,
      active: route.name === 'map',
    },
    {
      title: 'Extensions',
      icon: <VscExtensions />,
      link: routes.extensions().link,
      active: route.name === 'extensions',
    },
  ];

  return (
    <div className="relative flex w-full overflow-hidden bg-white dark:bg-secondaryDark">
      <div className="flex flex-grow">
        <Sidebar settingsOpen={settingsOpen} setSettingsOpen={setSettingsOpen}>
          <div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
            <div className="flex h-10 gap-1">
              <div className="my-auto">
                <IconButton icon={icon} />
              </div>
              <div className="my-auto text-lg font-medium dark:text-white">
                {title}
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-2">{sidebarContents}</div>
        </Sidebar>
      </div>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark">
          <div className="flex w-full bg-white pt-1 dark:bg-primaryDark">
            <div className="z-10 -mr-2 h-8">
              <IconButton
                className="m-1"
                icon={<FiSettings />}
                onClick={(): void => {
                  setSettingsOpen(!settingsOpen);
                }}
                active={settingsOpen}
              />
            </div>
            <Tabs tabs={tabs} />
          </div>
          <div className="flex flex-grow">{children}</div>
        </div>
      </ErrorBoundary>
    </div>
  );
}

Map = (): JSX.Element => {
  const [selectedNode, setSelectedNode] = useState<Protobuf.NodeInfo>();

  const nodes = useAppSelector((state) => state.meshtastic.nodes);
  const myNodeNum = useAppSelector(
    (state) => state.meshtastic.radio.hardware.myNodeNum,
  );

  return (
    <MapboxProvider>
      {nodes.map((node) => {
        return (
          node.data.position && (
            <Marker
              key={node.data.num}
              center={
                new mapboxgl.LngLat(
                  node.data.position.longitudeI / 1e7,
                  node.data.position.latitudeI / 1e7,
                )
              }
            >
              <div
                onClick={(): void => {
                  setSelectedNode(node.data);
                }}
                className={`z-50 rounded-full  border-2 bg-opacity-30 ${
                  node.data.num === selectedNode?.num
                    ? 'border-green-500 bg-green-500'
                    : 'border-blue-500 bg-blue-500'
                }`}
              >
                <div className="m-4 ">
                  <FiMapPin className="h-5 w-5" />
                </div>
              </div>
            </Marker>
          )
        );
      })}
      <Layout
        title="Nodes"
        icon={<RiRoadMapLine />}
        sidebarContents={
          <div className="flex flex-col gap-2">
            {!nodes.length && (
              <span className="p-4 text-sm text-gray-400 dark:text-gray-600">
                No nodes found.
              </span>
            )}

            {nodes.map((node) => (
              <NodeCard
                key={node.data.num}
                node={node.data}
                isMyNode={node.data.num === myNodeNum}
                selected={selectedNode?.num === node.data.num}
                setSelected={(): void => {
                  setSelectedNode(node.data);
                }}
              />
            ))}
          </div>
        }
      >
        <MapContainer />
      </Layout>
    </MapboxProvider>
  );
}

MapPage = (): JSX.Element => {
  const ref = useRef<HTMLDivElement>(null);

  const labelClass = new LabelClass({
    labelExpressionInfo: {
      expression: '$feature.name',
    },
    symbol: new LabelSymbol3D({
      symbolLayers: [
        new TextSymbol3DLayer({
          text: '{name}',
          material: {
            color: 'black',
          },
          halo: {
            color: [255, 255, 255, 0.7],
            size: 2,
          },
          font: {
            size: 12,
            weight: 'bold',
          },
          size: 10,
        }),
      ],
      verticalOffset: {
        screenLength: 150,
        maxWorldLength: 2000,
        minWorldLength: 30,
      },
      callout: new LineCallout3D({
        size: 0.5,
        color: [0, 0, 0],
        border: {
          color: [255, 255, 255],
        },
      }),
    }),
  });

  const points: Graphic[] = nodes.map(
    (node, index) =>
      new Graphic({
        geometry: new Point({
          latitude: node.lat,
          longitude: node.lng,
        }),
        attributes: {
          ObjectID: index,
          name: node.name,
        },
      }),
  );

  useEffect(() => {
    if (ref.current) {
      const layer = new FeatureLayer({
        labelsVisible: true,
        labelingInfo: [labelClass],
        source: points,
        fields: [
          {
            name: 'ObjectID',
            alias: 'ObjectID',
            type: 'oid',
          },
          {
            name: 'name',
            alias: 'Name',
            type: 'string',
          },
        ],
      });

      const map = new Map({
        basemap: 'satellite',
        ground: 'world-elevation',
        layers: [layer],
      });

      const scene = new SceneView({
        container: ref.current,
        map: map,
        camera: {
          position: {
            y: -35.59, //Longitude
            x: 148, //Latitude
            z: 200, //Meters
          },
          tilt: 75,
        },
      });
    }
  }, []);

  return (
    <Layout
      title="Nodes"
      icon={<RiRoadMapLine />}
      sidebarContents={<div className="flex flex-col gap-2"></div>}
    >
      <div className="w-full" ref={ref}></div>
    </Layout>
  );

  // const [selectedNode, setSelectedNode] = useState<Protobuf.NodeInfo>();

  // const nodes = useAppSelector((state) => state.meshtastic.nodes);
  // const myNodeNum = useAppSelector(
  //   (state) => state.meshtastic.radio.hardware.myNodeNum,
  // );

  // return (
  //   <MapboxProvider>
  //     {nodes.map((node) => {
  //       return (
  //         node.data.position && (
  //           <Marker
  //             key={node.data.num}
  //             center={
  //               new mapboxgl.LngLat(
  //                 node.data.position.longitudeI / 1e7,
  //                 node.data.position.latitudeI / 1e7,
  //               )
  //             }
  //           >
  //             <div
  //               onClick={(): void => {
  //                 setSelectedNode(node.data);
  //               }}
  //               className={`z-50 rounded-full  border-2 bg-opacity-30 ${
  //                 node.data.num === selectedNode?.num
  //                   ? 'border-green-500 bg-green-500'
  //                   : 'border-blue-500 bg-blue-500'
  //               }`}
  //             >
  //               <div className="m-4 ">
  //                 <FiMapPin className="h-5 w-5" />
  //               </div>
  //             </div>
  //           </Marker>
  //         )
  //       );
  //     })}
  //     <Layout
  //       title="Nodes"
  //       icon={<RiRoadMapLine />}
  //       sidebarContents={
  //         <div className="flex flex-col gap-2">
  //           {!nodes.length && (
  //             <span className="p-4 text-sm text-gray-400 dark:text-gray-600">
  //               No nodes found.
  //             </span>
  //           )}

  //           {nodes.map((node) => (
  //             <NodeCard
  //               key={node.data.num}
  //               node={node.data}
  //               isMyNode={node.data.num === myNodeNum}
  //               selected={selectedNode?.num === node.data.num}
  //               setSelected={(): void => {
  //                 setSelectedNode(node.data);
  //               }}
  //             />
  //           ))}
  //         </div>
  //       }
  //     >
  //       <MapContainer />
  //     </Layout>
  //   </MapboxProvider>
  // );
}