mirror
/
facilmap
kopia lustrzana https://github.com/FacilMap/facilmap
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Add option to include custom CSS (#185 #186)

pull/256/head
Candid Dauth 2024-02-19 14:27:04 +01:00
rodzic 54e5e9f00f
commit 04ce90720c
7 zmienionych plików z 40 dodań i 14 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

14
config.env.example
Wyświetl plik

@ -1,17 +1,9 @@
# Copy this file to config.env when running FacilMap standalone.
# Find all the available configuration options in the documentation: https://docs.facilmap.org/developers/server/config.html
# HTTP requests made by the backend will send this User-Agent header. Please adapt to your URL and e-mail address.
#USER_AGENT=FacilMap (https://facilmap.org/, cdauth@cdauth.eu)
# Whether to trust the X-Forwarded-* headers. Can be "true" or a comma-separated list of IP subnets.
# See https://expressjs.com/en/guide/behind-proxies.html for details.
#TRUST_PROXY=true
# Alternatively, manually set the base URL where FacilMap will be publicly reachable.
#BASE_URL=https://facilmap.org/
# The name of the app that should be displayed throughout the UI.
#APP_NAME=FacilMap
# On which IP the HTTP server will listen. Leave empty to listen to all IPs.
#HOST=
# On which port the HTTP server will listen.
#PORT=8080

17
docs/src/developers/server/config.md
Wyświetl plik

@ -23,9 +23,24 @@ The config of the FacilMap server can be set either by using environment variabl
| `MAXMIND_LICENSE_KEY` | | | MaxMind license key. |
| `LIMA_LABS_TOKEN` | | | [Lima Labs](https://maps.lima-labs.com/) API key |
| `HIDE_COMMERCIAL_MAP_LINKS` | | | Set to `1` to hide the links to Google/Bing Maps in the “Map style” menu. |
| `CUSTOM_CSS_FILE` | | | The path of a CSS file that should be included ([see more details below](#custom-css-file)).
FacilMap makes use of several third-party services that require you to register (for free) and generate an API key:
* Mapbox and OpenRouteService are used for calculating routes. Mapbox is used for basic routes, OpenRouteService is used when custom route mode settings are made. If these API keys are not defined, calculating routes will fail.
* Maxmind provides a free database that maps IP addresses to approximate locations. FacilMap downloads this database to decide the initial map view for users (IP addresses are looked up in FacilMap’s copy of the database, on IP addresses are sent to Maxmind). This API key is optional, if it is not set, the default view will be the whole world.
* Mapzen is used to look up the elevation info for search results. The API key is optional, if it is not set, no elevation info will be available for search results.
* Lima Labs is used for nicer and higher resolution map tiles than Mapnik. The API key is optional, if it is not set, Mapnik will be the default map style instead.
* Lima Labs is used for nicer and higher resolution map tiles than Mapnik. The API key is optional, if it is not set, Mapnik will be the default map style instead.
## Custom CSS file
To include a custom CSS file in the UI, set the `CUSTOM_CSS_FILE` environment variable to the file path.
When running FacilMap with docker, you can mount your CSS file as a volume into the container, for example with the following docker-compose configuration:
```yaml
environment:
CUSTOM_CSS_FILE: /opt/facilmap/custom.css
volumes:
- ./custom.css:/opt/facilmap/custom.css
```
Your custom CSS file will be included in the map UI and in the table export. You can distinguish between the two by using the `html.fm-facilmap-map` and `html.fm-facilmap-table` selectors.

5
frontend/src/map/map.ejs
Wyświetl plik

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="fm-facilmap-map">
<head>
<meta charset="utf-8">
<title><%= padData && padData.name ? `${padData.name} – ` : ''%><%=appName%></title>
@ -63,6 +63,9 @@
<style type="text/css">
<% for (const path of styles) { -%>
@import url("<%=paths.base%><%=path%>");
<% } -%>
<% if (hasCustomCssFile) { -%>
@import url("<%=paths.base%>custom.css");
<% } -%>
</style>
<% for (const path of scripts) { -%>

5
frontend/src/table/table.ejs
Wyświetl plik

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="fm-facilmap-table">
<head>
<meta charset="utf-8">
<title><%=normalizePadName(padData.name)%> – <%=appName%></title>
@ -25,6 +25,9 @@
<style type="text/css">
<% for (const path of styles) { -%>
@import url("<%=paths.base%><%=path%>");
<% } -%>
<% if (hasCustomCssFile) { -%>
@import url("<%=paths.base%>custom.css");
<% } -%>
</style>
<% for (const path of scripts) { -%>

3
server/src/config.ts
Wyświetl plik

@ -26,6 +26,7 @@ export interface Config {
limaLabsToken?: string;
/** Hide the "Open this on Google/Bing Maps" links in the map style menu */
hideCommercialMapLinks?: boolean;
customCssFile?: string;
}
const config: Config = {
@ -60,6 +61,8 @@ const config: Config = {
limaLabsToken: process.env.LIMA_LABS_TOKEN || "", // Get a token on https://maps.lima-labs.com/,
hideCommercialMapLinks: process.env.HIDE_COMMERCIAL_MAP_LINKS === "1",
customCssFile: process.env.CUSTOM_CSS_FILE || undefined,
};
export default config;

2
server/src/frontend.ts
Wyświetl plik

@ -84,6 +84,7 @@ export async function renderMap(params: RenderMapParams): Promise<string> {
return ejs.render(template, {
appName: config.appName,
config: getInjectedConfig(),
hasCustomCssFile: !!config.customCssFile,
...injections,
paths,
...params
@ -103,6 +104,7 @@ export async function renderTable(params: {
return ejs.render(template, {
...injections,
appName: config.appName,
hasCustomCssFile: !!config.customCssFile,
paths,
utils,
normalizeMarkerName,

8
server/src/webserver.ts
Wyświetl plik

@ -77,6 +77,14 @@ export async function initWebserver(database: Database, port: number, host?: str
res.send(await getOpensearchXml(getBaseUrl(req)));
});
app.get(`${paths.base}custom.css`, async (req, res, next) => {
if (config.customCssFile) {
res.sendFile(config.customCssFile);
} else {
next();
}
});
app.use("/_app/static/sw.js", (req, res, next) => {
res.setHeader("Service-Worker-Allowed", "/");
next();