Fix demo (#841)

This fixes Demo https://martin.maplibre.org/ site (the new code is
already in production there). Main fixes:

* uses HTTPS again, just like the previous site
* uses nginx
* fixes all the relative paths, maplibre, minor other things

demo/docker-compose.yml

@@ -9,7 +9,10 @@ services:
     depends_on:
       - tiles
     ports:
-      - "80:8080"
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./certs:/etc/ssl/certs
 
   tiles:
     image: ghcr.io/maplibre/martin

demo/frontend/.dockerignore

@@ -1,3 +1,7 @@
+*Dockerfile
+.dockerignore
+.vscode
+
 ### Node template
 # Logs
 logs

demo/frontend/Dockerfile

@@ -9,4 +9,6 @@ RUN yarn install
 COPY . .
 RUN yarn run build
 
-CMD ["yarn", "run", "preview"]
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

demo/frontend/dev.Dockerfile

@@ -0,0 +1,12 @@
+FROM node:alpine as builder
+
+WORKDIR /usr/src/app
+
+COPY package.json .
+COPY yarn.lock .
+RUN yarn install
+
+COPY . .
+RUN yarn run build
+
+CMD ["yarn", "run", "preview"]

demo/frontend/nginx.conf

@@ -0,0 +1,93 @@
+user nginx;
+worker_processes auto;
+worker_cpu_affinity auto;
+pid /run/nginx.pid;
+
+events {
+    worker_connections 4086;
+    use epoll;
+    multi_accept on;
+}
+
+http {
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    keepalive_requests 1000;
+    types_hash_max_size 2048;
+
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    gzip              on;
+    gzip_vary         on;
+    gzip_proxied      any;
+    gzip_comp_level   6;
+    gzip_buffers      16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length   256;
+    gzip_types        text/plain text/css text/xml text/javascript application/x-javascript application/xml
+                      application/javascript application/json application/x-protobuf;
+
+    proxy_cache_path    /var/cache/nginx/
+                        levels=1:2
+                        max_size=10g
+                        inactive=60m
+                        use_temp_path=off
+                        keys_zone=backend_cache:10m;
+
+    upstream tiles_upstream {
+        server tiles:3000;
+    }
+
+    server {
+        # listen 80;
+        listen 443 ssl default_server;
+        listen [::]:443 ssl default_server;
+
+        ssl_certificate /etc/ssl/certs/cert.pem;
+        ssl_certificate_key /etc/ssl/certs/private.pem;
+
+        server_name localhost martin.maplibre.org maplibre.org cloudflare.com;
+        resolver 127.0.0.1;
+
+        location / {
+            root      /usr/share/nginx/html;
+            try_files $uri /index.html;
+        }
+
+        location ~ /tiles/(?<fwd_path>.*) {
+            proxy_set_header        Host $host;
+            proxy_set_header        X-Forwarded-Proto "https";
+            proxy_set_header        X-Real-IP $remote_addr;
+            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header        X-Forwarded-Host $host;
+            proxy_set_header        X-Rewrite-URL $uri;
+            proxy_redirect          off;
+
+            proxy_connect_timeout   5m;
+            proxy_send_timeout      5m;
+            proxy_read_timeout      5m;
+            send_timeout            5m;
+
+            proxy_cache             backend_cache;
+            proxy_cache_lock        on;
+            proxy_cache_revalidate  on;
+            proxy_cache_valid       200 204 302 1d;
+            proxy_cache_valid       404 1m;
+            proxy_cache_use_stale   error timeout http_500 http_502 http_503 http_504;
+            add_header              X-Cache-Status $upstream_cache_status;
+
+            proxy_pass              http://tiles_upstream/$fwd_path$is_args$args;
+        }
+
+        error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
+          root /usr/share/nginx/html;
+        }
+    }
+}

demo/frontend/src/Components/Map/Filters/Layers/Layers.jsx

@@ -18,7 +18,7 @@ class Layers extends PureComponent {
     return (
       layers.map((layer) => {
         const isLayerVisible = visibleLayer === layer.id;
-        const [fromColor, toColor] = getColorsFromLayer(layer.mapboxLayer, 'fill-extrusion-color');
+        const [fromColor, toColor] = getColorsFromLayer(layer.maplibreLayer, 'fill-extrusion-color');
 
         return (
           <Layer

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

@@ -11,12 +11,12 @@ import Filters from './Filters';
 
 const mapStyle = { height: '615px', marginLeft: '350px' };
 
-class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
+class Map extends PureComponent<{}, {visibleLayer: any, range: any, hour: any}> {
 
   map: any;
   nav: any;
 
-  constructor(props) {
+  constructor(props: {} | Readonly<{}>) {
     super(props);
     this.state = {
       visibleLayer: 'trips',
@@ -39,33 +39,29 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
     });
     this.nav = new maplibregl.NavigationControl();
 
-
     this.map.addControl(this.nav, 'top-right');
     this.map.on('load', this.mapOnLoad);
   }
 
   componentDidUpdate() {
-    const queryParams = this.getQueryParams();
-    const newStyleUrl = `http://localhost:3000/get_trips?${queryParams}`;
     const newStyle = this.map.getStyle();
-
-    newStyle.sources['public.get_trips'].url = newStyleUrl;
+    newStyle.sources['trips_source'].url = `/tiles/get_trips?${this.getQueryParams()}`;
     this.map.setStyle(newStyle);
   }
 
   mapOnLoad = () => {
     const queryParams = this.getQueryParams();
 
-    this.map.addSource('public.get_trips', {
+    this.map.addSource('trips_source', {
       type: 'vector',
-      url: `http://localhost:3000/get_trips?${queryParams}`
+      url: `/tiles/get_trips?${queryParams}`
     });
-    layers.forEach(({ mapboxLayer }) => {
-      this.map.addLayer(mapboxLayer, 'place_town');
+    layers.forEach(({ maplibreLayer }) => {
+      this.map.addLayer(maplibreLayer, 'place_town');
     });
   };
 
-  changeFilter = (filter, value) => {
+  changeFilter = (filter: string, value: any) => {
     this.setState(state => ({
       ...state,
       [filter]: value
@@ -81,7 +77,7 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
     return encodeURI(`date_from=${dateFrom}&date_to=${dateTo}&hour=${hour}`);
   };
 
-  toggleLayer = (layerId) => {
+  toggleLayer = (layerId: string) => {
     layers.forEach(({ id }) => {
       if (layerId === id) {
         this.map.setLayoutProperty(id, 'visibility', 'visible');

demo/frontend/src/config/layers.ts

@@ -1,10 +1,10 @@
 export default [
   {
     id: 'trips',
-    mapboxLayer: {
+    maplibreLayer: {
       id: 'trips',
       type: 'fill-extrusion',
-      source: 'public.get_trips',
+      source: 'trips_source',
       'source-layer': 'trips',
       layout: {
         visibility: 'visible'
@@ -78,10 +78,10 @@ export default [
   },
   {
     id: 'trips_price',
-    mapboxLayer: {
+    maplibreLayer: {
       id: 'trips_price',
       type: 'fill-extrusion',
-      source: 'public.get_trips',
+      source: 'trips_source',
       'source-layer': 'trips',
       layout: {
         visibility: 'none'
@@ -133,10 +133,10 @@ export default [
   },
   {
     id: 'trips_duration',
-    mapboxLayer: {
+    maplibreLayer: {
       id: 'trips_duration',
       type: 'fill-extrusion',
-      source: 'public.get_trips',
+      source: 'trips_source',
       'source-layer': 'trips',
       layout: {
         visibility: 'none'

demo/justfile

@@ -19,3 +19,7 @@ up-backend:
 
 frontend *ARGS:
     docker-compose up frontend {{ ARGS }}
+
+[no-exit-message]
+frontend-sh:
+    docker-compose run --interactive --entrypoint sh frontend

docs/src/introduction.md

@@ -2,6 +2,8 @@
 
 Martin is a tile server able to generate and serve [vector tiles](https://github.com/mapbox/vector-tile-spec) on the fly from large [PostGIS](https://github.com/postgis/postgis) databases, [PMTiles](https://protomaps.com/blog/pmtiles-v3-whats-new), and [MBTiles](https://github.com/mapbox/mbtiles-spec) files, allowing multiple tile sources to be dynamically combined into one. Martin optimizes for speed and heavy traffic, and is written in [Rust](https://github.com/rust-lang/rust).
 
+See also [Martin demo site](https://martin.maplibre.org/)
+
 ---
 
 [![Book](https://img.shields.io/badge/docs-Book-informational)](https://maplibre.org/martin)