Vector Data

Overview

We've already seen several examples of serving vector data using a Mapfile. MapServer has native support for many Vector formats. MapServer can also read data through OGR - the vector component of GDAL, which has support for over 80 vector drivers.

Native support means the code to read the data is a part of the MapServer codebase, which can make it more optimised. The OGR drivers however may be better maintained. For formats which have both native and OGR support, for example Shapefiles and FlatGeobuf it is not always a clear decision which to use.

More information can be found on the Vector Data Management & Optimization page in the MapServer documentation.

Remote Datasets using Virtual File Systems

GDAL's Virtual File Systems can be used to access data over stored on a network, for example on a server or Amazon S3 bucket.

CONNECTIONTYPE OGR
CONNECTION "/vsicurl/https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/constellations.lines.json"

• GeoParquet, GeoArrow - use range requests to access only the data needed. Cloud-Optimised - similar to raster data formats such as "Cloud-Optimized GeoTIFFs" - COGs.

Code

Example

• MapServer request: http://localhost:5000/?map=/etc/mapserver/stars.map&mode=map&layer=constellations
• OpenLayers example: http://localhost:5001/stars.html

Javascript

import '../css/style.css';
import ImageWMS from 'ol/source/ImageWMS.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { Image as ImageLayer } from 'ol/layer.js';
import { FullScreen, defaults as defaultControls } from 'ol/control.js';

const mapserverUrl = import.meta.env.VITE_MAPSERVER_BASE_URL;
const mapfilesPath = import.meta.env.VITE_MAPFILES_PATH;

const layers = [
    new ImageLayer({
        source: new ImageWMS({
            url: mapserverUrl + mapfilesPath + 'stars.map&',
            params: { 'LAYERS': 'constellations,stars,stars2'},
            ratio: 1
        }),
    }),
];
const map = new Map({
    layers: layers,
    target: 'map',
    controls: defaultControls().extend([
        new FullScreen()
    ]),
    view: new View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 4
    }),
});

Mapfile

MAP
    NAME "Stars!"
    EXTENT -42.33528830884047 -47.25854720678822 43.404846801027695 24.75957883214916
    PROJECTION
        "init=epsg:4326"
    END
    SIZE 400 400
    FONTSET "data/fonts/fontset.txt"      
    SYMBOL
        NAME "circle"
        TYPE ELLIPSE
        FILLED TRUE
        POINTS
            1 1
        END
    END
    WEB
        METADATA
            "ows_enable_request" "*" 
            "ows_srs" "EPSG:4326 EPSG:3857" 
        END
    END    
    IMAGECOLOR 0 0 0
    LAYER
        TYPE LINE
        PROJECTION
            AUTO
        END
        NAME "constellations"
        STATUS OFF
        CONNECTIONTYPE OGR
        CONNECTION "/vsicurl/https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/constellations.lines.json"
        LABELITEM "Id"
        CLASS
            LABEL
                COLOR "#15f4ee"
                FONT "LiberationMono"
                TYPE TRUETYPE
                SIZE 10
                POSITION AUTO
                PARTIALS FALSE
            END
            STYLE
                COLOR "#15f4ee"
                WIDTH 1
            END
        END
    END
    LAYER
        TYPE POINT
        NAME "stars"
        STATUS OFF
        CONNECTIONTYPE OGR
        CONNECTION "/vsicurl/https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/stars.14.json"
        PROCESSING "NATIVE_FILTER=mag>12"
        COMPOSITE
            COMPFILTER "blur(5)"
            OPACITY 90
        END
        CLASS
            STYLE
                SYMBOL "circle"
                COLOR "#ffcd3c"
                SIZE [mag]
            END
        END
    END
    LAYER
        TYPE POINT
        NAME "stars2"
        STATUS OFF
        CONNECTIONTYPE OGR
        CONNECTION "/vsicurl/https://raw.githubusercontent.com/ofrohn/d3-celestial/master/data/stars.14.json"
        PROCESSING "NATIVE_FILTER=mag>10"
        CLASS
            STYLE
                SYMBOL "circle"
                COLOR 255 255 255
                SIZE 2
            END
        END
    END
END

Exercises

1. Try adding a new dataset to the stars.map, for example mw.json which is at the same location as the other datasets:

   LAYER
       TYPE POLYGON
       NAME "milkyway"
       STATUS OFF
       # TODO add in the data connection
       COMPOSITE
           OPACITY 30
       END
       CLASS
           STYLE
               COLOR 230 230 230
               OUTLINECOLOR 50 50 50
           END
       END
   END
   

   In the stars.js you will need to ensure the milkyway layer is added to the OpenLayers map:

   params: { 'LAYERS': 'constellations,stars,stars2,milkyway'},