Set IMAGEPATH for all maps

Author: geographika

docker/.dockerignore

@@ -2,3 +2,5 @@
 !runtime
 !instantclient
 !templates
+workshop/exercises/mapfiles/tmp/*
+!workshop/exercises/mapfiles/tmp/.gitkeep

docker/Dockerfile

@@ -155,10 +155,12 @@ ENV MS_DEBUGLEVEL=0 \
     MAPSERVER_CONFIG_FILE=/etc/mapserver/mapserver.conf \
     MAPSERVER_BASE_PATH= \
     MAX_REQUESTS_PER_PROCESS=1000 \
-    MIN_PROCESSES=1 \
+    # Keep several MapServer processes running, so concurrent requests don't
+    # wait for one another (see the warm-up in start-server)
+    MIN_PROCESSES=2 \
     MAX_PROCESSES=5 \
     BUSY_TIMEOUT=300 \
-    IDLE_TIMEOUT=300 \
+    IDLE_TIMEOUT=3600 \
     IO_TIMEOUT=40 \
     APACHE_LIMIT_REQUEST_LINE=8190 \
     GET_ENV=env \

docker/Dockerfile.demo

@@ -2,3 +2,5 @@ FROM mapserver-workshop
 
 # Copy workshop files into the image
 COPY workshop/exercises/mapfiles /etc/mapserver/
+
+RUN chown -R www-data:www-data /etc/mapserver/tmp

docker/ReadMe.md

@@ -17,19 +17,26 @@ cd D:\GitHub\getting-started-with-mapserver\docker
 # MAPSERVER_BRANCH=branch-8-6
 
 # add --no-cache to the command below to force getting the latest code
+# it could be months old otherwise!
 
 docker build `
     --tag "mapserver-workshop" `
     --target=runner `
     --build-arg=MAPSERVER_BRANCH=main `
     --build-arg=MAPSERVER_REPO=https://github.com/mapserver/mapserver `
+    --no-cache `
     .
 
+# push the image for use in docker-compose and for workshop attendees to pull from DockerHub
+# https://mapserver.github.io/getting-started-with-mapserver-demo/ builds from this image
+# and needs to be updated if the image is rebuilt with a new MapServer version or branch
+# by pushing mapserver-workshop-demo (see below)
 docker tag mapserver-workshop geographika/mapserver-workshop
 # docker login
 # geographika
 # docker images
 docker push geographika/mapserver-workshop
+
 ```
 
 If there are connection issues, try running the following test from the host, and check proxy/DNS settings:
@@ -54,9 +61,12 @@ docker run -it --name mapserver-workshop geographika/mapserver-workshop:latest b
 
 ## Build the Demo Image
 
-This image contains both MapServer and all the MapServer workshop files so it can be deployed
+This image contains both MapServer (based on the image above) and all the MapServer workshop files so it can be deployed
 in the cloud. This is not required for the workshop itself, and users will use local files from the repository.
 
+The URL for the deployed MapServer is currently https://mapserver-workshop-k8hvw.ondigitalocean.app/
+and is used for the online demo at https://mapserver.github.io/getting-started-with-mapserver-demo/
+
 It first requires the `mapserver-workshop` Docker image above is built and available locally.
 
 ```
@@ -68,9 +78,6 @@ docker build -f docker/Dockerfile.demo `
     --tag "mapserver-workshop-demo" `
     .
 
-# docker run -it --name mapserver-workshop-demo -p 8080:8080 mapserver-workshop-demo
-# http://localhost:8080/
-
 docker tag mapserver-workshop-demo geographika/mapserver-workshop-demo
 
 # docker login
@@ -87,4 +94,11 @@ doctl auth init -t dop_v1_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 doctl registry login
 docker tag mapserver-workshop-demo registry.digitalocean.com/geographika/mapserver-workshop-demo:latest
 docker push registry.digitalocean.com/geographika/mapserver-workshop-demo:latest
+doctl registry repository list-tags mapserver-workshop-demo
+```
+
+To test demo locally:
+```
+docker run -it --rm --name mapserver-workshop-demo -p 8080:8080 mapserver-workshop-demo
+# http://localhost:8080/
 ```

docker/runtime/usr/local/bin/start-server

@@ -21,4 +21,25 @@ trap '' WINCH
 
 rm -f "${APACHE_PID_FILE}"
 
+# Warm up mod_fcgid. It only starts a new MapServer process without delay
+# when none is busy; otherwise a request waits 1 second for a busy process
+# to become free, so short concurrent requests (e.g. GetStyles + GetMap)
+# are slow. Sending MIN_PROCESSES requests at once, right after start-up,
+# starts that many processes, and FcgidMinProcessesPerClass keeps them alive.
+(
+    # Wait until Apache accepts connections (up to 30 seconds)
+    for _ in $(seq 30); do
+        (exec 3<>/dev/tcp/127.0.0.1/8080) 2>/dev/null && break
+        sleep 1
+    done
+    for _ in $(seq "${MIN_PROCESSES}"); do
+        (
+            exec 3<>/dev/tcp/127.0.0.1/8080 \
+                && printf 'GET / HTTP/1.0\r\nHost: localhost\r\n\r\n' >&3 \
+                && cat <&3 >/dev/null
+        ) &
+    done
+    wait
+) &
+
 exec apache2 -DFOREGROUND

workshop/content/docs/outputs/wcs.md

@@ -77,7 +77,6 @@ WEB
         "wcs_srs" "EPSG:4326 EPSG:3857"
         "wcs_title" "Example WCS Mapfile"
         "wcs_description" "Test description"
-        "wcs_onlineresource" "http://localhost:7000/"
     END
 END
 ```

workshop/content/zensical.toml

@@ -53,7 +53,8 @@ nav = [
         { "Clusters" = "advanced/clusters.md" },
         { "SLD" = "advanced/sld.md" },
         { "STAC" = "advanced/stac.md" },
-        { "Non-EPSG CRSs" = "advanced/other-projections.md" }
+        { "Non-EPSG CRSs" = "advanced/other-projections.md" },
+        { "GeoStyler" = "advanced/geostyler.md" }
     ]},
     { "Summary" = "summary.md" },
     { "Credits and Thanks" = "credits.md" }

workshop/exercises/app/css/geostyler.css

@@ -129,3 +129,30 @@ html, body {
     .code .cm-content {
         padding-bottom: 40px;
     }
+
+    /* `display: flex` on .code would otherwise override the hidden attribute */
+    .code[hidden] {
+        display: none;
+    }
+
+/* Tabs in the bottom-right panel title bar */
+.tabs {
+    display: flex;
+    gap: 4px;
+    padding-bottom: 0;
+}
+
+.tab {
+    font: inherit;
+    color: #777;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: 0 6px 3px;
+    cursor: pointer;
+}
+
+    .tab.active {
+        color: #444;
+        border-bottom-color: #444;
+    }

workshop/exercises/app/geostyler.html

@@ -38,8 +38,12 @@
                 </div>
             </div>
             <div class="panel">
-                <div class="panel-title">SLD (applied in OpenLayers)</div>
+                <div class="panel-title tabs" role="tablist">
+                    <button class="tab active" role="tab" data-tab="sld-text">SLD</button>
+                    <button class="tab" role="tab" data-tab="geostyler-text">GeoStyler style (used by OpenLayers)</button>
+                </div>
                 <div id="sld-text" class="code"></div>
+                <div id="geostyler-text" class="code" hidden></div>
             </div>
         </section>
     </main>

workshop/exercises/app/js/geostyler.js

@@ -14,6 +14,7 @@ import xmlFormat from 'xml-formatter';
 import { EditorView, basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { xml } from '@codemirror/lang-xml';
+import { json } from '@codemirror/lang-json';
 
 const mapserverUrl = import.meta.env.VITE_MAPSERVER_BASE_URL;
 const mapfilesPath = import.meta.env.VITE_MAPFILES_PATH;
@@ -33,6 +34,7 @@ const demoLayers = [
     { id: 'notched-rect', type: 'point' },
     { id: 'square-spaced', type: 'polygon' },
     { id: 'wave', type: 'polygon' },
+    { id: 'fills', type: 'polygon' },
 ];
 
 const sldParser = new SLDParser();
@@ -72,6 +74,7 @@ function setText(view, text) {
 const classView = createViewer('class-text', mapfileLanguage);
 const symView = createViewer('sym-text', mapfileLanguage);
 const sldView = createViewer('sld-text', xml());
+const geostylerView = createViewer('geostyler-text', json());
 
 function showSld(text) {
     let formatted = text;
@@ -124,6 +127,7 @@ async function fetchSld(layerConfig) {
 
 /**
  * Convert an SLD to an OpenLayers style with GeoStyler, and apply it.
+* Returns the GeoStyler style the OpenLayers style was created from.
  */
 async function applySld(sldXmlString, vectorLayer) {
     const gs = await sldParser.readStyle(sldXmlString);
@@ -148,6 +152,7 @@ async function applySld(sldXmlString, vectorLayer) {
     console.log(`OpenLayers style for layer ${vectorLayer.get('name')}:`, ol.output);
 
     vectorLayer.setStyle(ol.output);
+    return gs.output;
 }
 
 function createVectorLayer(layerConfig) {
@@ -206,19 +211,20 @@ function main() {
         const classFile = `${layerConfig.id}.class`;
         const symFile = `${layerConfig.id}.sym`;
 
-        const [classText, symText, sld] = await Promise.all([
+        const [classText, symText, { sld, geostylerStyle }] = await Promise.all([
             fetchText(`${includesUrl}${classFile}`)
                 .catch((error) => `# Could not load ${classFile}: ${error.message}`),
             fetchOptionalText(`${includesUrl}${symFile}`)
                 .catch(() => null),
             fetchSld(layerConfig)
                 .then(async (sldXmlString) => {
-                    await applySld(sldXmlString, vectorLayer);
-                    return sldXmlString;
+                    const style = await applySld(sldXmlString, vectorLayer);
+                    return { sld: sldXmlString, geostylerStyle: style };
                 })
                 .catch((error) => {
                     console.error(`Failed to style layer ${layerConfig.id}`, error);
-                    return `Could not load or apply the SLD: ${error.message}`;
+                    const message = `Could not load or apply the SLD: ${error.message}`;
+                    return { sld: message, geostylerStyle: null };
                 }),
         ]);
 
@@ -235,8 +241,24 @@ function main() {
         setText(symView, symText ?? '');
 
         showSld(sld);
+        setText(geostylerView, geostylerStyle
+            ? JSON.stringify(geostylerStyle, null, 2)
+            : '// No GeoStyler style: see the SLD tab for the error');
 
         mapRight.getLayers().clear();
+
+        // Tabs in the bottom-right panel: show one viewer at a time
+        const tabs = document.querySelectorAll('.tab');
+        tabs.forEach((tab) => {
+            tab.addEventListener('click', () => {
+                tabs.forEach((t) => {
+                    const active = t === tab;
+                    t.classList.toggle('active', active);
+                    document.getElementById(t.dataset.tab).hidden = !active;
+                });
+            });
+        });
+
         mapRight.addLayer(baseLayer());
         mapRight.addLayer(vectorLayer);
     }