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 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:

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.

Was this article helpful?
Have more questions? Submit a request