maplibre/martin
1
1
Fork 0
mirror of https://github.com/maplibre/martin.git synced 2024-12-20 21:31:49 +03:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fix demo (#841)

Browse Source 
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
This commit is contained in:
Yuri Astrakhan 2023-08-26 09:52:43 -04:00 committed by GitHub
parent e7d3b53d8f
commit 1507625e57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 138 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/docker-compose.yml
View File

@ -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

4
demo/frontend/.dockerignore
View File

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

4
demo/frontend/Dockerfile
View File

@ -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

12
demo/frontend/dev.Dockerfile Normal file
View File

@ -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"]

93
demo/frontend/nginx.conf Normal file
View File

@ -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;
}
}
}

2
demo/frontend/src/Components/Map/Filters/Layers/Layers.jsx
View File

@ -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

22
demo/frontend/src/Components/Map/Map.tsx
View File

@ -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');

12
demo/frontend/src/config/layers.ts
View File

@ -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'

4
demo/justfile
View File

@ -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

2
docs/src/introduction.md
View File

@ -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)

81
nginx.conf
View File

@ -1,81 +0,0 @@
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
keepalive_timeout 65;
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=tiles_cache:10m;
upstream martin_upstream {
server martin:3000;
}
server {
listen 80;
resolver 127.0.0.11;
location ~ /tiles/(?<fwd_path>.*) {
proxy_set_header Host $host;
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 15m;
proxy_send_timeout 15m;
proxy_read_timeout 15m;
send_timeout 15m;
proxy_cache tiles_cache;
proxy_cache_lock on;
proxy_cache_revalidate on;
# Set caching time for responses
proxy_cache_valid 200 204 302 1h;
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://martin_upstream/$fwd_path$is_args$args;
}
}
}