MapStyle

The MapStyle object is used set styles for the different map layers.

info

This is based on the Google Maps MapTypeStyle interface, but is a little different. For example, we use styles instead of stylers.

Example usage

// Set the roads to be a different color
const styles = G.mapStyle({
    featureType: "road.arterial",
    elementType: "geometry",
    styles: [
        { color: "#9E006F" }
    ]
});

const map = G.map('map', {
    center: [40.7128, -74.0060],
    styles: styles
});

Creating the MapStyle object

G.mapStyle(options?: MapStyleValue): MapStyle

There are a few ways to setup the MapStyle object.

Pass no value.

G.mapStyle(): MapStyle

In this case you will need to set the styles value after you create the object or use addStyle to add a style.

const style = G.mapStyle();
style.styles = [{color: '#4447E8'}];

Pass an object of options.

G.mapStyle(options: MapStyleOptions): MapStyle

Parameter	Type	Required	Description
options	MapStyleOptions	Yes	The configuration options.

const mapStyle = G.mapStyle({
    featureType: "road.arterial",
    elementType: "geometry",
    styles: [
        { color: "#9E006F" }
    ]
});

Pass an existing MapStyle object.

G.mapStyle(value: MapStyle): MapStyle

Parameter	Type	Required	Description
value	MapStyle	Yes	The existing MapStyle object.

const style = G.mapStyle(existingMapStyleObject);

MapStyle Style value type

The individual styles follow this format:

{ [key: string]: string | number }

For example:

{color: '#ff0000'}

{ "saturation": -100 }

{ "visibility": "off" }

MapStyle value type

The MapStyleValue can be one of the following values:

• A Style value.
• A array of Style values.
• A MapStyleOptions value.
• A MapStyle object.

MapStyle options

Type MapStyleOptions.

MapStyleOptions is an object containing the configuration options for the MapStyle object.

Option	Type	Default	Description
elementType	string	'all'	The element type to which the styles should be applied to. If not set then the styles are applied to all elements. More information
featureType	string	'all'	The feature type to which the styles should be applied to. If not set then the styles are applied to all features. More information
styles	Style[]		An array of Style values.

Properties

Property	Type	Description
elementType	string	The element type to which the styles should be applied to. If not set then the styles are applied to all elements. More information
featureType	string	The feature type to which the styles should be applied to. If not set then the styles are applied to all features. More information
styles	Style[]	An array of Style values.

elementType

Get and set the element type to apply the styles to.

// Get the element type
const elementType = style.elementType;

Set the elementType value.

// Set the element type
style.elementType = 'labels';

featureType

Get and set the element type to apply the styles to.

// Get the element type
const featureType = style.featureType;

Set the featureType value.

// Set the element type
style.featureType = 'administrative.neighborhood';

styles

Get and set the styles.

When getting the styles an array is always returned.

// Get the styles
const styles = style.styles;

Set the styles value.

style.styles = styles: [
    { color: "#9E006F" },
    { saturation: -100 }
];

Methods

addStyle

addStyle(property: string, value: string | number): MapStyle

Add a single style to the list of styles.

style.addStyle('color', '#ff0000');

setElementType

setElementType(value: string): MapStyle

Set the element type that the styles should apply to.

style.setElementType('labels');

setFeatureType

setFeatureType(value: string): MapStyle

Set the feature type that the styles should apply to.

style.setFeatureType('road.local');

setStyles

setStyles(value: Style | Style[]): MapStyle

Set one or more styles. This will replace any existing styles in the object.

Parameter	Type	Required	Description
value	Style or Style[]	Yes	A single style object or an array of style objects.

// S3t a single style
style.setStyles({color: red});

// Set multiple styles.
style.setStyles([
    { color: "#9E006F" },
    { saturation: -100 }
]);

toGoogle

toGoogle(): google.maps.MapTypeStyle

Get the object to use to pass the MapStyle options to the Google Map instance.

const googleStyles = style.toGoogle();