Skip to main content

Add geogirafe to an existing GeoMapFish project

warning

This page is a work in progress

tip

This guide suggests a method for installation, yet it may not be the exclusive plan, and there are likely numerous other procedures for implementing Geogirafe in conjunction within your existing geoportal.

Get geogirafe code​

At the root of your GMF project, run:

npm create @geogirafe/template@latest front

This will create a /front folder. Add this to your .gitignore

/.gitignore
# Front
front/node_modules
front/dist

At this point, if you want to run it without docker, you can follow the instructions here: https://gitlab.com/geogirafe/gg-sample

Build Geogirafe with Docker​

In your existing Dockerfile, before the last image (usually called gmf_config), add a step with the build of Geogirafe and copy the resulting assets in the config image. Lines that must be added are highlighted below.

/Dockerfile
...
FROM node:22-slim AS front-build

WORKDIR /app
COPY front/package.json front/package-lock.json ./

RUN npm install --ignore-scripts

COPY front/ ./
ARG VISIBLE_ENTRY_POINT="/"
RUN npm run build -- --base=${VISIBLE_ENTRY_POINT}static-frontend/

###############################################################################

FROM camptocamp/geomapfish-config:${GEOMAPFISH_MAIN_MINOR_VERSION} AS gmf_config

ARG PGSCHEMA
ENV PGSCHEMA=$PGSCHEMA

COPY --from=builder /tmp/config/ /tmp/config/
COPY --from=front-build /app/dist/app /etc/static-frontend
...

A little below still in the same Dockerfile, grant permissions on that new folder and modify de last line to expose the volume:

/Dockerfile
    ...
    && chmod g+w -R \
        /etc/geomapfish \
        /etc/mapserver \
        /etc/qgisserver \
        /etc/tilegeneration \
        /usr/local/tomcat/webapps/ROOT/print-apps \
        /etc/haproxy_dev \
        /etc/haproxy \
        /etc/static-frontend \
    && sed 's#bind :80#bind *:443 ssl crt /etc/haproxy_dev/localhost.pem#g' /etc/haproxy/haproxy.cfg.tmpl \
        > /etc/haproxy_dev/haproxy.cfg.tmpl \
    && echo '    http-request set-header X-Forwarded-Proto https' >> /etc/haproxy_dev/haproxy.cfg.tmpl

VOLUME /etc/geomapfish \
    /etc/mapserver \
    /etc/qgisserver \
    /etc/tilegeneration \
    /usr/local/tomcat/webapps/ROOT/print-apps \
    /etc/haproxy_dev \
    /etc/haproxy \
    /etc/static-frontend

Add this to your .dockerignore:

/.dockerignore

!front/public
!front/src
!front/custom.css
!front/*.html
!front/package*.json
!front/tsconfig.json
!front/vite.config.js

To be able to use your new interface, you have to add it to your vars.yaml

/geoportal/vars.yaml
  interfaces:
    - name: desktop
      default: True
    - name: mobile
    - name: iframe_api
    - name: geogirafe
      type: custom
      html_filename: index.html

By default, a GeoMapFish project will serve custom static files in a pre-configured route: /static-frontend/, that's why you can see that base url passed as an argument in the Dockerfile when we build.

We need to modify our front/index.html so all static files will be rewritten to /static-frontend/, add this in the <head> section:

front/index.html
    <base href="%BASE_URL%">
    <meta name="configs" content="main,mobile">
    <link rel="config-main-url" href="config.json" />
    <link rel="config-mobile-url" href="config.mobile.json" />

Then recompile all the schmilblick:

./build
docker compose down
docker compose up -d

Here you go! Navigate to https://<your.geoportal>/geogirafe, you should see geogirafe running yet still empty.

Configure geogirafe​

Coming soon...

Make it default​

To be done...