Skip to content

GitLab

H
hollandse-luchten-route-app
Commit dc0a68ca authored by alain's avatar alain 🐙
Browse files
Options

first bunch

parent a2c22b9f
Pipeline #280 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 3296 additions and 172 deletions
      .rescriptsrc.js 0 → 100644
      View file @ dc0a68ca
      const { editWebpackPlugin, appendWebpackPlugin } = require('@rescripts/utilities')
      module.exports = config => {
      if(config.mode === 'production') {
      // set css filename
      config = editWebpackPlugin(
      p => {
      p.options.filename = 'style.css'
      p.options.chunkFilename = 'style.css'
      p.options.moduleFilename = () => 'style.css'
      return p
      },
      'MiniCssExtractPlugin',
      config,
      )
      // set js filename
      config.output.filename = 'bundle.js'
      // disable sourcemap
      config.devtool = false
      // disable code splitting
      config.optimization.splitChunks = {
      cacheGroups: {
      default: false,
      }
      }
      config.optimization.runtimeChunk = false
      }
      return config
      }
      package.json
      View file @ dc0a68ca
      ......@@ -8,13 +8,18 @@
      "@testing-library/user-event": "^7.1.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-map-gl": "^5.2.8",
      "react-scripts": "3.4.3"
      },
      "devDependencies": {
      "@rescripts/cli": "0.0.14",
      "@rescripts/rescript-env": "0.0.12",
      "node-sass": "^4.14.1"
      },
      "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
      "start": "rescripts start",
      "build": "rescripts build",
      "eject": "rescripts eject"
      },
      "eslintConfig": {
      "extends": "react-app"
      ......
      public/index.html
      View file @ dc0a68ca
      ......@@ -5,39 +5,12 @@
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta
      name="description"
      content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      -->
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
      -->
      <title>React App</title>
      <title>Hollandse Luchten Route</title>
      </head>
      <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
      -->
      </body>
      </html>
      src/App.css deleted 100644 → 0
      View file @ a2c22b9f
      .App {
      text-align: center;
      }
      .App-logo {
      height: 40vmin;
      pointer-events: none;
      }
      @media (prefers-reduced-motion: no-preference) {
      .App-logo {
      animation: App-logo-spin infinite 20s linear;
      }
      }
      .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: calc(10px + 2vmin);
      color: white;
      }
      .App-link {
      color: #61dafb;
      }
      @keyframes App-logo-spin {
      from {
      transform: rotate(0deg);
      }
      to {
      transform: rotate(360deg);
      }
      }
      src/App.js
      View file @ dc0a68ca
      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      import React, { useState } from 'react';
      import ReactMapGL, { Marker, Source, Layer, GeolocateControl } from 'react-map-gl';
      import { mapStyle } from "./mapStyle"
      function App() {
      const [viewport, setViewport] = useState({
      latitude: 52.4934,
      longitude: 4.5969,
      zoom: 14,
      pitch: 60
      });
      const onViewportChange = viewport => {
      const {width, height, ...etc} = viewport
      setViewport({...etc})
      }
      const routeData = {
      "type": "FeatureCollection",
      "features": [{
      "type": "Feature",
      "properties": {
      "shape": "Line",
      },
      "geometry": {
      "type": "LineString",
      "coordinates": [
      [4.600461, 52.494056],
      [4.59368, 52.494657],
      [4.593487, 52.494304],
      [4.593573, 52.494082],
      [4.593701, 52.493834],
      [4.594238, 52.493521],
      [4.593294, 52.492528],
      [4.592843, 52.492306],
      [4.591985, 52.492462],
      [4.591277, 52.491992],
      [4.589539, 52.492253]
      ]
      }
      }]
      }
      const routeStyle = {
      paint: {
      'line-color': '#2FB6BC',
      'line-width': 3
      }
      };
      const points = [
      {
      title: "Meetstation",
      latitude: 52.493990,
      longitude: 4.602379
      },
      {
      title: "Moriaan",
      latitude: 52.4941078,
      longitude: 4.594586
      }
      ]
      return (
      <div className="App">
      <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
      Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
      >
      Learn React
      </a>
      </header>
      </div>
      <ReactMapGL width="100%" height="100%" {...viewport} onViewportChange={viewport => onViewportChange(viewport)} mapStyle={mapStyle}>
      <div key="5" className='mapboxgl-ctrl-top-left'>
      <GeolocateControl positionOptions={{enableHighAccuracy: true}} trackUserLocation={true} />
      </div>
      <Source type="geojson" data={routeData}>
      <Layer id="route" type="line" {...routeStyle} />
      </Source>
      { points.map(point => (
      <Marker key={point.title} latitude={point.latitude} longitude={point.longitude} offsetLeft={-10} offsetTop={-20}>
      <h3>{ point.title }</h3>
      </Marker>
      )) }
      </ReactMapGL>
      );
      }
      ......
      src/App.test.js deleted 100644 → 0
      View file @ a2c22b9f
      import React from 'react';
      import { render } from '@testing-library/react';
      import App from './App';
      test('renders learn react link', () => {
      const { getByText } = render(<App />);
      const linkElement = getByText(/learn react/i);
      expect(linkElement).toBeInTheDocument();
      });
      src/index.css
      View file @ dc0a68ca
      body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
      font-family: 'Maax', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      }
      code {
      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
      h3 {
      font-weight: 500;
      }
      #root {
      height: 100vh;
      }
      .mapboxgl-marker {
      background-color: #FFF;
      padding: 0.2em 0.4em;
      white-space: nowrap;
      box-shadow: 0 0 0.4rem 0.1rem rgba(0, 0, 0, 0.15);
      }
      .mapboxgl-marker:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 4px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #FFF;
      }
      .mapboxgl-marker h3 {
      margin: 0;
      }
      \ No newline at end of file
      src/logo.svg deleted 100644 → 0
      View file @ a2c22b9f
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
      <g fill="#61DAFB">
      <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
      <circle cx="420.9" cy="296.5" r="45.7"/>
      <path d="M520.5 78.1z"/>
      </g>
      </svg>
      src/mapStyle.js 0 → 100644
      View file @ dc0a68ca
      This diff is collapsed.
      src/setupTests.js deleted 100644 → 0
      View file @ a2c22b9f
      // jest-dom adds custom jest matchers for asserting on DOM nodes.
      // allows you to do things like:
      // expect(element).toHaveTextContent(/react/i)
      // learn more: https://github.com/testing-library/jest-dom
      import '@testing-library/jest-dom/extend-expect';
      yarn.lock
      View file @ dc0a68ca
      This diff is collapsed.
      Markdown is supported
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment