mobility-toolbox-js 2.3.10 → 2.4.0

package/doc/src/components/Example.js

@@ -1,200 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,39 +0,0 @@
-/* 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

@@ -1,117 +0,0 @@
-// 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',
-  },
-];