Simplify demo - remove nginx (#692)

This uses the webserver built into vitejs instead of configuring an
entirely new nginx server with an additional docker image.

demo/docker-compose.yml

@@ -6,14 +6,18 @@ services:
       context: ./frontend
       dockerfile: Dockerfile
     restart: unless-stopped
+    command: ["npm", "run", "preview"]
     depends_on:
       - tiles
     ports:
-      - "80:80"
+      - "80:8080"
 
   tiles:
-    image: urbica/martin
+    image: ghcr.io/maplibre/martin 
+    # For Arm64 - you have to build your own image from source https://github.com/maplibre/martin/issues/655#issuecomment-1540669505
     restart: unless-stopped
+    ports:
+      - "3000:3000"
     environment:
       - DATABASE_URL=postgres://postgres@db/db
     depends_on:

demo/frontend/Dockerfile

@@ -3,8 +3,4 @@ FROM node:18-alpine as builder
 WORKDIR /usr/src/app
 COPY . .
 RUN npm i
-RUN npm run build
-
-FROM nginx:alpine
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder "/usr/src/app/dist" /usr/share/nginx/html
+RUN npm run build

demo/frontend/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite --port 3000 --host",
+    "dev": "vite --port 8080 --host",
     "build": "tsc && vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --port 8080 --host",
     "lint": "eslint src"
   },
   "eslintConfig": {

demo/frontend/src/Components/Development/Development.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import Container from './Container';
 import Title from './Title';
 import GitHubButton from '../GitHubButton';
+import DocsButton from '../GitHubButton/DocsButton';
 
 const Development = () => (
   <Container>
     <Title>Start building with Martin!</Title>
-    <GitHubButton />
+    <GitHubButton />{' '}
+    <DocsButton />
   </Container>
 );
 

demo/frontend/src/Components/GitHubButton/DocsButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import octocat from './octocat.svg';
+import Container from './Container';
+
+const DocsButton = () => (
+  <Container href='https://maplibre.org/martin' target='_blank'>
+    <span>Documentation</span>
+  </Container>
+);
+
+export default DocsButton;

demo/frontend/src/Components/Intro/Intro.tsx

@@ -5,13 +5,15 @@ import Container from './Container'
 import Title from './Title'
 import Description from './Description'
 import GitHubButton from '../GitHubButton'
+import DocsButton from '../GitHubButton/DocsButton'
 
 const Intro = () => (
   <Container>
     <Parallax translateY={[100, -50]}>
-      <Title>Martin</Title>
+      <Title>Martin<br />Demo</Title>
       <Description>Vector Tiles from Large Databases on the Fly</Description>
-      <GitHubButton />
+      <GitHubButton />{' '}
+      <DocsButton />
     </Parallax>
   </Container>
 )

demo/frontend/src/Components/Map/Map.tsx

@@ -30,6 +30,7 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
 
   componentDidMount() {
     this.map = new maplibregl.Map({
+      cooperativeGestures: true,
       container: 'map',
       style: MAP_STYLE,
       center: [-74.005308, 40.713370],
@@ -38,14 +39,14 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
     });
     this.nav = new maplibregl.NavigationControl();
 
-    this.map.scrollZoom.disable();
+
     this.map.addControl(this.nav, 'top-right');
     this.map.on('load', this.mapOnLoad);
   }
 
   componentDidUpdate() {
     const queryParams = this.getQueryParams();
-    const newStyleUrl = `/tiles/rpc/public.get_trips.json?${queryParams}`;
+    const newStyleUrl = `http://localhost:3000/get_trips?${queryParams}`;
     const newStyle = this.map.getStyle();
 
     newStyle.sources['public.get_trips'].url = newStyleUrl;
@@ -57,7 +58,7 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
 
     this.map.addSource('public.get_trips', {
       type: 'vector',
-      url: `/tiles/rpc/public.get_trips.json?${queryParams}`
+      url: `http://localhost:3000/get_trips?${queryParams}`
     });
     layers.forEach(({ mapboxLayer }) => {
       this.map.addLayer(mapboxLayer, 'place_town');

demo/frontend/vite.config.ts

@@ -1,16 +1,18 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 import mkcert from 'vite-plugin-mkcert'
-import { resolve } from 'path'
-import viteTsConfigPaths from 'vite-tsconfig-paths';
+import viteTsConfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
-  plugins: [react(), viteTsConfigPaths({
-    root: './',
-  }), mkcert()],
+  plugins: [
+    react(),
+    viteTsConfigPaths({
+      root: './',
+    }),
+    mkcert(),
+  ],
   build: {
     target: 'esnext',
-
   },
-  server: { https: true },
-});
+  server: { https: false, host: true, port: 8080 },
+})