Changing the selection and highlight colors

Differences between GeoMoose 2.X and 3.X

In GeoMoose 2.X there was a layer called highlight that was defined in the mapbook, occasionally users would remove this layer and services would cease to function. To prevent that from happening GeoMoose 3+ will automatically define a layer named results and results-hot. The results-hot layer is used when the user has selected a subset of results.

GeoMoose vector styles

All vector styles are styled using the Mapbox GL Styles format. It is Javascript/JSON friendly and well documented (here)[https://docs.mapbox.com/mapbox-gl-js/style-spec/].

Change the highlight color

Pass resultsStyle.highlight into the Application constructor options.

Example:

// use a pretty blue color instead of the default yellow
const highlightColor = '#008080';
const highlightStyle = {
    'circle-color': highlightColor,
    'circle-stroke-color': highlightColor,
    'line-color': highlightColor,
    'fill-color': highlightColor
};

var app = new gm3.Application({
    mapserver_url: CONFIG.mapserver_url,
    mapfile_root: CONFIG.mapfile_root,
    resultsStyle: {
        highlight: highlightStyle,
    }
});

Change the ‘hot’ style

This example include changing both the results-hot style and results/highlight color:

const highlightColor = '#008080';
const highlightStyle = {
    'circle-color': highlightColor,
    'circle-stroke-color': highlightColor,
    'line-color': highlightColor,
    'fill-color': highlightColor
};

const hotColor = '#FF9933';
const hotStyle = {
    'circle-color': hotColor,
    'circle-stroke-color': hotColor,
    'line-color': hotColor,
    'fill-color': hotColor
};

var app = new gm3.Application({
    mapserver_url: CONFIG.mapserver_url,
    mapfile_root: CONFIG.mapfile_root,
    resultsStyle: {
        highlight: highlightStyle,
        hot: hotStyle
    }
});

Change the selection style

It is also possible to change the styles for the selection layer in the same manner as the results and ‘hot’ layers.

const selectionColor = '#00FFFF';
const selectionStyle = {
    'circle-color': selectionColor,
    'circle-stroke-color': selectionColor,
    'line-color': selectionColor,
    'fill-color': selectionColor
};

var app = new gm3.Application({
    mapserver_url: CONFIG.mapserver_url,
    mapfile_root: CONFIG.mapfile_root,
    selectionStyle: selectionStyle
});