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
-
Try adding a new dataset to the
stars.map
, for examplemw.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 themilkyway
layer is added to the OpenLayers map: