MapServer CGI

Example of a MapServer CGI map.

Example of a map generated using the MapServer CGI Controls. The CGI interface allows testing a Mapfile without having to configure WMS services. The Mapfile used in this example can be seen here. It is strongly recommended to configure MapServer to serve WMS and use the OpenLayers WMS loader, rather than this older CGI approach.

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageSource from 'ol/source/Image.js';
import {createLoader} from 'ol/source/mapserver.js';

const mapserverUrl = 'https://demo.mapserver.org/cgi-bin/mapserv?';
const bounds = [388039, 5234969, 500964, 5295764];
const mapServerLayer = new ImageLayer({
  extent: bounds,
  source: new ImageSource({
    loader: createLoader({
      url: mapserverUrl,
      params: {
        'map': '/mapserver/apps/itasca_legend/map/itasca3.map',
        'layers': 'boundaries water roads other cities',
      },
    }),
  }),
});

const map = new Map({
  layers: [mapServerLayer],
  target: 'map',
  view: new View({
    center: getCenter(bounds),
    zoom: 10,
  }),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>MapServer CGI</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "mapserver-cgi",
  "dependencies": {
    "ol": "10.4.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}