react-icons/ri#RiRoadMapLine TypeScript Examples
The following examples show how to use
react-icons/ri#RiRoadMapLine.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From meshtastic-web with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #2
| Source File: index.tsx From meshtastic-web with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #3
| Source File: index.tsx From meshtastic-web with GNU General Public License v3.0 | 4 votes |
|
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>
// );
}
