Map Styles
Set your own style for different features and elements in a map
Overview
You can modify the presentation of the standard Woosmap base map behaviour, changing the visual display of roads, buildings, specific areas, and point of interest. You’re also able to hide these features. It lets you highlight specific components of the map and match your graphic style.
Woosmap Map supports the same stylers specifications as Google Maps, so you can use tools such as https://snazzymaps.com/ or https://mapstyle.withgoogle.com/ to build your own JSON base map style.
Feature styles
To apply styles to different features and elements in a map, create an array of MapStyleSpec objects that define how the map should be styled. Here is an example styling the water elements and hiding all POI:
const myMap = new window.woosmap.map.Map(document.getElementById("map"), {
center: { lat: 48.85, lng: 2.348 },
zoom: 15,
styles: [
{
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "water",
"stylers": [{
"lightness": -15
}]
}
]
});
MapStyleSpec object
A MapStyleSpec consists of the following elements:
featureType(optional) - the group of feature, to which stylers will be applied. default value:all. Features can be roads, water, etc.elementType(optional) - The group of elements, to which stylers will be applied. default value:all. Elements composed a feature, like labels and geometry.stylers- the rules to apply to the selected features and elements. Stylers indicate the color, visibility, and weight of the feature. You can apply one or more stylers to a feature.
To set a style, combine featureType and elementType selectors and your stylers into a style array.
Map Styles Examples
Transit By Night
Useful for giving directions in low-light conditions.
Retro
Clean map with colors inspired from old paper maps.
Light Grey
Useful to display overlays and highlight particular components.