Community Forum

Map Styles

Set your own style for different features and elements in a map
  1. Overview
  2. Feature styles
  3. MapStyleSpec object
  4. Map Styles Examples

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 all POI except Shops:

JavaScript
        const myMap = new window.woosmap.map.Map(document.getElementById("map"), {
    center: {lat: 48.85, lng: 2.348},
    zoom: 15,
    styles: [
        {
        "featureType": "point_of_interest",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "point_of_interest.business.shop",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
        {
            "featureType": "water",
            "stylers": [{
                "lightness": -15
            }]
        }
    ]
});

MapStyleSpec object

A MapStyleSpec consists of the following elements:

To set a style, combine featureType and elementType selectors and your stylers into a style array.

Feature type covered by Woosmap Map:

root features

landscape

road

transit

administrative

point_of_interest

Map Styles Examples

All POIs visible

Standard style with all Points of Interest set with "visibility": "on". A good start to choose which POIs you would keep for your own map.

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.

‹ Reference Using Typescript ›
Was this article helpful?
Have more questions? Submit a request