mobility-toolbox-js 2.3.9 → 2.3.10

package/doc/src/components/Example.js

@@ -0,0 +1,200 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Grid, Paper, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import Markdown from 'react-markdown';
+import CodeSandboxButton from './CodeSandboxButton';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: 12,
+  },
+  htmlContainer: {
+    height: 500,
+  },
+  noPointer: {
+    // Remove pointer events for mobile devices on load
+    [theme.breakpoints.down('sm')]: {
+      pointerEvents: 'none',
+    },
+  },
+  paper: {
+    position: 'relative',
+    margin: '20px 0',
+  },
+  fileName: {
+    padding: '10px 0 5px 15px',
+  },
+  editButton: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    paddingTop: 5,
+    paddingRight: 10,
+  },
+  readme: {
+    '& p': {
+      fontSize: 18,
+    },
+  },
+}));
+
+function Example({ example }) {
+  const classes = useStyles();
+  const [html, setHtml] = useState();
+  const [js, setJs] = useState();
+  const [isNavigable, setIsNavigable] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+
+  const htmlFileName = useMemo(() => {
+    const { key, files } = example || {};
+    return files?.html || (key && `${key}.html`) || '';
+  }, [example]);
+
+  const jsFileName = useMemo(() => {
+    const { key, files } = example || {};
+    return files?.js || (key && `${key}.js`) || '';
+  }, [example]);
+
+  useEffect(() => {
+    // Get the public api key
+    fetch('https://backend.developer.geops.io/publickey')
+      .then((response) => response.json())
+      .then((data) => {
+        if (data && data.success) {
+          window.apiKey = data.key;
+          setApiKey(data.key);
+        }
+      });
+  }, []);
+
+  useEffect(() => {
+    setHtml();
+
+    if (!htmlFileName) {
+      return () => {};
+    }
+
+    const abortController = new AbortController();
+
+    fetch(`/static/examples/${htmlFileName}`, {
+      signal: abortController.signal,
+    })
+      .then((res) => res.text())
+      .then((htmlAsText) => {
+        setHtml(htmlAsText);
+      })
+      .catch(() => setHtml());
+
+    return () => {
+      abortController.abort();
+    };
+  }, [htmlFileName]);
+
+  // Execute the content of the js file
+  useEffect(() => {
+    if (!jsFileName || !html || !apiKey) {
+      return;
+    }
+    import(`../../public/static/examples/${jsFileName}`).then((module) => {
+      module.default();
+    });
+  }, [html, apiKey, jsFileName]);
+
+  // Load the content of the js file
+  useEffect(() => {
+    if (!jsFileName) {
+      return () => {};
+    }
+
+    const abortController = new AbortController();
+    fetch(`/static/examples/${jsFileName}`, {
+      signal: abortController.signal,
+    })
+      .then((res) => res.text())
+      .then((jsCode) => {
+        // Replace relative import by library import
+        setJs(
+          jsCode
+            .replace(
+              /'\.\.\/\.\.\/\.\.\/\.\.\/src\//gm,
+              "'mobility-toolbox-js/",
+            )
+            .replace('export default () => {\n', '')
+            .replace(/^};\n$/gm, '')
+            .replace(/^ {2}/gm, ''),
+        );
+      })
+      .catch(() => setJs());
+    return () => {
+      abortController.abort();
+    };
+  }, [jsFileName]);
+
+  if (!example) {
+    return null;
+  }
+
+  return (
+    <div style={{ margin: 'auto', marginTop: 30 }}>
+      <Grid container direction="column" spacing={3}>
+        <Grid item xs={12}>
+          <Typography variant="h1" className="headline">
+            {example.name}
+          </Typography>
+          <Markdown className={classes.readme}>
+            {example.description || ''}
+          </Markdown>
+          <Markdown className={classes.readme}>{example.readme || ''}</Markdown>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.paper} onClick={() => setIsNavigable(true)}>
+            <div
+              className={`${classes.htmlContainer} ${
+                isNavigable ? '' : classes.noPointer
+              }`}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          </Paper>
+        </Grid>
+        {js && html && (
+          <>
+            <Grid item xs={12}>
+              <Paper className={classes.paper}>
+                <Typography className={classes.fileName}>
+                  {jsFileName}
+                </Typography>
+                <SyntaxHighlighter language="javascript">
+                  {js}
+                </SyntaxHighlighter>
+                <CodeSandboxButton
+                  className={classes.editButton}
+                  extraFiles={example.extraFiles || {}}
+                  html={html}
+                  js={js}
+                />
+              </Paper>
+            </Grid>
+            <Grid item xs={12}>
+              <Paper className={classes.paper}>
+                <Typography className={classes.fileName}>
+                  {htmlFileName}
+                </Typography>
+                <SyntaxHighlighter language="html">{html}</SyntaxHighlighter>
+                <CodeSandboxButton
+                  className={classes.editButton}
+                  html={html}
+                  js={js}
+                  extraFiles={{}}
+                />
+              </Paper>
+            </Grid>
+          </>
+        )}
+      </Grid>
+    </div>
+  );
+}
+
+export default React.memo(Example);

package/doc/src/components/ExampleCard.js

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import CardActionArea from '@mui/material/CardActionArea';
+import Icon from '@mui/material/Icon';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import { CgArrowRight } from 'react-icons/cg';
+import Markdown from 'react-markdown';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+const useStyles = makeStyles((theme) => ({
+  exampleLink: {
+    height: '100%',
+    width: '100%',
+    color: '#353535',
+  },
+  cardWrapper: {
+    position: 'relative',
+    height: '100%',
+    width: '100%',
+    '& .MuiIcon-root': {
+      width: 30,
+      height: 30,
+      '& svg': {
+        height: '100%',
+        width: '100%',
+      },
+      margin: 35,
+      transition: 'margin-left 500ms ease, color 800ms ease',
+    },
+    '&:hover': {
+      '& .MuiIcon-root': {
+        marginLeft: 60,
+        color: theme.colors.primaryGreen,
+      },
+    },
+  },
+  cardOverlay: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    width: '100%',
+    boxSizing: 'border-box',
+    boxShadow:
+      'inset 0px 1px 3px 0px rgba(0, 0, 0, 0.12), inset 0px -1px 1px 0px rgba(0, 0, 0, 0.14)',
+    border: '15px solid white',
+    transition: 'border 500ms ease',
+    '&:hover': {
+      border: '5px solid white',
+    },
+    cursor: 'pointer',
+    zIndex: 1,
+  },
+  cardOverlayHover: {
+    border: '5px solid white',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    boxShadow: 'none',
+    zIndex: 0,
+  },
+}));
+
+function ExampleCard({ example }) {
+  const classes = useStyles();
+  const [raisedExample, setRaisedExample] = useState(null);
+  const router = useRouter();
+
+  return (
+    <div className={classes.cardWrapper}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+      <div
+        className={
+          classes.cardOverlay +
+          (example === raisedExample ? ` ${classes.cardOverlayHover}` : '')
+        }
+        onClick={() => router.push(`/example/${example.key}`)}
+      />
+      <Card
+        classes={{
+          root: classes.card,
+        }}
+        raised={example === raisedExample}
+        onMouseOver={() => setRaisedExample(example)}
+        onMouseOut={() => setRaisedExample()}
+        onFocus={() => setRaisedExample(example)}
+        onBlur={() => setRaisedExample()}
+      >
+        <CardActionArea onClick={() => router.push(`/example/${example.key}`)}>
+          <CardMedia
+            image={example.img}
+            style={{
+              paddingTop: '56.25%',
+            }}
+          />
+          <CardContent className={classes.cardContent}>
+            <Link
+              href={`/example/${example.key}`}
+              className={classes.exampleLink}
+            >
+              <Typography variant="h3">{example.name}</Typography>
+            </Link>
+            {/* Use of typography as wrapper breaks hydration of nextjs */}
+            <Markdown className="MuiTypography-root MuiTypography-body1">
+              {example.description}
+            </Markdown>
+          </CardContent>
+          <CardActions>
+            <Icon>
+              <CgArrowRight />
+            </Icon>
+          </CardActions>
+        </CardActionArea>
+      </Card>
+    </div>
+  );
+}
+export default React.memo(ExampleCard);

package/doc/src/components/Examples.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import TextField from '@mui/material/TextField';
+import ExampleCard from './ExampleCard';
+
+const useStyles = makeStyles((theme) => ({
+  filterField: {
+    width: '100%',
+    marginBottom: 40,
+  },
+  example: {
+    '&.MuiGrid-item': {
+      padding: '0 !important',
+    },
+  },
+  header: {
+    marginBottom: 40,
+  },
+}));
+
+function Examples({ examples = [] }) {
+  const classes = useStyles();
+  const [filter, setFilter] = useState('');
+  const [filteredExamples, setFilteredExamples] = useState(examples);
+
+  useEffect(() => {
+    if (!filter) {
+      return () => {};
+    }
+    const qry = filter.toLowerCase();
+    setFilteredExamples(
+      examples.filter(
+        (example) =>
+          `${example.name}`.toLowerCase().includes(qry) ||
+          (example.tags || []).find((tag) => tag.toLowerCase().includes(qry)),
+      ),
+    );
+    return () => {};
+  }, [filter, examples]);
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} className={classes.filterField}>
+        <Typography variant="h1" className={classes.header}>
+          Examples
+        </Typography>
+        <TextField
+          variant="standard"
+          placeholder="Filter..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </Grid>
+      {!filteredExamples.length && (
+        <Grid item xs={12}>
+          Nothing found.
+        </Grid>
+      )}
+      {filteredExamples.map((example) => (
+        <Grid
+          item
+          xs={12}
+          sm={6}
+          lg={4}
+          container
+          className={classes.example}
+          key={example.key}
+        >
+          <ExampleCard example={example} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
+
+export default Examples;

package/doc/src/components/Home.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import Typography from '@mui/material/Typography';
+import Link from 'next/link';
+import TrackerExample from './TrackerExample';
+
+const codeHtmlPage = `
+<html>
+  <head>
+    <title>Realtime map</title>
+  </head>
+  <body>
+    <div id="map" style="height: 300px; width: 100%" />
+  </body>
+</html>
+`;
+
+const codeMapObject = `
+import { Map } from 'maplibre-gl;
+import { RealtimeLayer } from 'mobility-toolbox-js/mapbox';
+
+
+const map = new Map({
+  container: 'map',
+  style: 'https://maps.geops.io/styles/travic_v2/style.json?key=' + window.apiKey,
+  center: [7.4707, 46.95],
+  zoom: 12,
+});
+`;
+
+const codeTracker = `
+const tracker = new RealtimeLayer({
+  url: 'wss://api.geops.io/tracker-ws/v1/',
+  apiKey: window.apiKey,
+});
+
+tracker.attachToMap(map);
+`;
+
+function MarkdownHeading({ ...props }) {
+  // eslint-disable-next-line react/prop-types
+  const { node, children } = props;
+  return <Typography variant={node.tagName}>{children}</Typography>;
+}
+
+function Home() {
+  const [source, setSource] = useState(null);
+  const [apiKey, setApiKey] = useState('');
+
+  useEffect(() => {
+    // Get the public api key
+    fetch('https://backend.developer.geops.io/publickey')
+      .then((response) => response.json())
+      .then((data) => {
+        if (data && data.success) {
+          window.apiKey = data.key;
+          setApiKey(data.key);
+        }
+      });
+  }, []);
+
+  useEffect(() => {
+    fetch('/README.md')
+      .then((response) => response.text())
+      .then((text) => {
+        // only show the 'Documentation and examples' section on GitHub
+        const noDocText = text.split('## Documentation')[0];
+        setSource(noDocText);
+      });
+  }, []);
+
+  if (!source || !apiKey) {
+    return null;
+  }
+
+  const renderers = {
+    h1: MarkdownHeading,
+  };
+
+  return (
+    <>
+      <Markdown components={renderers}>{source}</Markdown>
+      <br />
+      <h2>Quick Start</h2>
+      <TrackerExample />
+      <p>
+        This example shows how to draw real time vehicle positions on a{' '}
+        <a
+          href="https://maplibre.org/maplibre-gl-js-docs/"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Maplibre GL JS
+        </a>{' '}
+        map. Check out the{' '}
+        <Link href="/examples/ol-tracker">Live Tracker with OpenLayers</Link>{' '}
+        example to see how to use{' '}
+        <a href="https://openlayers.org/" target="_blank" rel="noreferrer">
+          OpenLayers
+        </a>{' '}
+        instead.
+      </p>
+      <p>First, create a HTML page with an empty map container.</p>
+      <SyntaxHighlighter language="html" code={codeHtmlPage.trim()} />
+      <p>Create a Maplibre map.</p>
+      <SyntaxHighlighter language="js" code={codeMapObject.trim()} />
+      <p>
+        Finally, add the <i>RealtimeLayer</i> for rendering real time vehicle
+        positions from our Realtime API. For more information about the backend
+        and for obtaining the required API-Key, visit our Developer Portal at{' '}
+        <a target="_blank" rel="noreferrer" href="https://geops.io">
+          https://geops.io
+        </a>
+        .
+      </p>
+      <SyntaxHighlighter language="js" code={codeTracker.trim()} />
+    </>
+  );
+}
+export default Home;

package/doc/src/components/TrackerExample.js

@@ -0,0 +1,39 @@
+/* eslint-disable import/no-relative-packages */
+import React, { useEffect } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { Map } from 'maplibre-gl';
+import { RealtimeLayer, CopyrightControl } from 'mobility-toolbox-js/mapbox';
+
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+    height: 300,
+    pointerEvents: 'none',
+  },
+});
+
+function TrackerExample() {
+  const classes = useStyles();
+
+  useEffect(() => {
+    const map = new Map({
+      container: 'map',
+      style: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
+      center: [7.4707, 46.95],
+      zoom: 12,
+      attributionControl: false,
+    });
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+
+    const tracker = new RealtimeLayer({
+      apiKey: window.apiKey,
+    });
+
+    tracker.attachToMap(map);
+  }, []);
+
+  return <div id="map" className={classes.root} />;
+}
+
+export default TrackerExample;

package/doc/src/examples.js

@@ -0,0 +1,117 @@
+// We load statically the readme to have the content when the page use server side rendering.
+import olTrackerReadme from '../public/static/examples/ol-tracker.md';
+import mbTrackerReadme from '../public/static/examples/mb-tracker.md';
+import olRoutingReadme from '../public/static/examples/ol-routing.md';
+import olStopFinderReadme from '../public/static/examples/ol-stop-finder.md';
+import tralisLiveMapReadme from '../public/static/examples/tralis-live-map.md';
+
+// import munichAssets from '../public/static/examples/tralis-live-map';
+
+// To make redirect works properly on netlify it's important that the key
+// are differents from the name of js and html files.
+export default [
+  // {
+  //   name: 'Layers',
+  //   key: 'layers',
+  //   description:
+  //     'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Mapbox map.',
+  //   img: '/static/img/live_tracker_ol.jpg',
+  //   readme: olTrackerReadme,
+  // },
+  {
+    name: 'Live tracker with OpenLayers',
+    key: 'ol-tracker',
+    description:
+      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Mapbox map.',
+    img: '/static/img/live_tracker_ol.jpg',
+    readme: olTrackerReadme,
+  },
+  {
+    name: 'Live tracker with Mapbox',
+    key: 'mb-tracker',
+    description:
+      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Mapbox map.',
+    img: '/static/img/live_tracker_mb.jpg',
+    readme: mbTrackerReadme,
+  },
+  {
+    name: 'Stop finder',
+    key: 'ol-stop-finder',
+    description:
+      'Use the [geOps Stops API](https://developer.geops.io/apis/stops/) for finding public transport stops.',
+    img: '/static/img/stops.jpg',
+    readme: olStopFinderReadme,
+  },
+  {
+    name: 'Routing',
+    key: 'routing-control',
+    description:
+      'Use the [geOps Routing API](https://developer.geops.io/apis/routing/) to find the shortest route between 2 points.',
+    img: '/static/img/routing.jpg',
+    readme: olRoutingReadme,
+    files: {
+      html: 'ol-routing.html',
+      js: 'ol-routing.js',
+    },
+  },
+  // {
+  //   name: 'Live train positions for Munich',
+  //   key: 'tralis-live-map',
+  //   description:
+  //     'Realtime vehicle positions and prognosis data based on scheduled times, realtime updates and GPS locations.',
+  //   img: '/static/img/routing.jpg',
+  //   extraFiles: {
+  //     'assets/tralis-live-map/index.js': {
+  //       content: `export default ${JSON.stringify(munichAssets)};`,
+  //     },
+  //   },
+  //   readme: tralisLiveMapReadme,
+  // },
+  // These examples are used for the dbug of RealtimeLayer don't remove them pls.
+  // {
+  //   name: 'Tralis tracker with OpenLayers',
+  //   key: 'ol-tralis',
+  //   description: 'Show moving tramway in an OpenLayers map.',
+  //   img: '/static/img/routing.jpg',
+  // },
+  // {
+  //   name: 'Tralis tracker with Mapbox',
+  //   key: 'mapbox-tralis',
+  //   description: 'Show moving tramway in an Mapbox map.',
+  //   img: '/static/img/routing.jpg',
+  // },
+  {
+    name: 'Mapbox layer',
+    key: 'ol-mapbox-layer',
+    description: 'Display a Mapbox style on an OpenLayers map.',
+    img: '/static/img/mapbox.jpg',
+  },
+  {
+    name: 'Mapbox Style layer',
+    key: 'ol-mapbox-style-layer',
+    description:
+      'Display/hide a set of layers of a Mapbox style on an OpenLayers map.',
+    img: '/static/img/mapbox_style.jpg',
+  },
+  {
+    name: 'Querying objects',
+    key: 'ol-query',
+    description:
+      'This example shows how to query objects in different kinds of layers.',
+    img: '/static/img/query_objects.jpg',
+  },
+  {
+    name: 'Copyrights with OpenLayers',
+    key: 'ol-copyright',
+    description:
+      'This example shows how to use the CopyrightControl component.',
+    img: '/static/img/ol-copyright.png',
+  },
+  {
+    name: 'Copyrights with Mapbox',
+    key: 'mb-copyright',
+    description:
+      'This example shows how to use the CopyrightControl component.',
+    img: '/static/img/ol-copyright.png',
+  },
+];