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

        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:

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. There are 4 element’s types: geometry.fill, geometry, geometry.stroke and labels
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.

Feature type covered by Woosmap Map:

root features

water: This category encompasses water-related features, such as rivers, lakes, or any other bodies of water.
landscape: It includes all types of landscapes, which could encompass natural terrains, topographical features, or any geographical characteristics.
road: This category encompasses all types of roads, including highways, streets, and other paved or unpaved roadways.
transit: It includes all transit-related elements, such as transit stations (bus, train, subway) and transit lines ( bus routes, train lines, subway routes).
administrative: This category represents administrative areas, which can include regions, districts, counties, states, or any political or administrative divisions.
point_of_interest: It encompasses various points of interest, which could be landmarks, attractions, businesses, or any location that is noteworthy or of interest to people.

`landscape`

landscape.natural: All natural landscapes
- landscape.natural.landcover.wood: Area covered with trees
- landscape.natural.landcover.bare_sparse_vegetation: Area with sparse vegetation, lacking significant plant cover
- landscape.natural.landcover.ice: Area covered with ice
- landscape.natural.landcover.grass: Area covered with grass
- landscape.natural.background: Natural background landscape
- landscape.natural.landcover: Land cover features, such as forests, grasslands, wetlands, and bare ground.
landscape.man_made: Man-made features, such as buildings or structures
- landscape.man_made.built_up: Built-up features, urban area

`road`

road.arterial: Major arterial roads
road.local: Local roads or streets
road.pedestrian: Pedestrian roads or walkways
road.bridge: Bridges
road.highway: Major highways or expressways
road.primary: Primary roads or streets

`transit`

transit.station: All transit stations such as airports, train stations or tramway stations
- transit.station.rail: Railway stations for trains
- transit.station.bus: Bus stations
- transit.station.airport: Airports
transit.line: Transit lines

`administrative`

administrative.neighborhood: Neighborhoods
administrative.locality: Localities
administrative.province: Provinces
administrative.country: Countries

`point_of_interest`

point_of_interest.business: Business point of interest
- point_of_interest.business.cinema
- point_of_interest.business.finance: All finance establishments like bank or ATM
  - point_of_interest.business.finance.atm
  - point_of_interest.business.finance.bank
- point_of_interest.business.food_and_drinks: All establishments related to the consumption of food and beverages.
  - point_of_interest.business.food_and_drinks.bar
  - point_of_interest.business.food_and_drinks.cafe
  - point_of_interest.business.food_and_drinks.fast_food
  - point_of_interest.business.food_and_drinks.pub
  - point_of_interest.business.food_and_drinks.restaurant
- point_of_interest.business.fuel
- point_of_interest.business.mall
- point_of_interest.business.parking
- point_of_interest.business.shop: All shops
  - point_of_interest.business.shop.bakery
  - point_of_interest.business.shop.butcher
  - point_of_interest.business.shop.clothes
  - point_of_interest.business.shop.electronics
  - point_of_interest.business.shop.furniture
  - point_of_interest.business.shop.grocery
  - point_of_interest.business.shop.library
  - point_of_interest.business.shop.sports
  - point_of_interest.business.shop.toys
point_of_interest.education: All establishments related to education like school or university
- point_of_interest.education.school
- point_of_interest.education.university
point_of_interest.government: Government buildings
point_of_interest.hospitality: A place or business that provides accommodations, services, and amenities to guests or travelers.
- point_of_interest.hospitality.hotels
point_of_interest.medical: All establishments related to medical like hospital, clinic or pharmacy
- point_of_interest.medical.hospital
- point_of_interest.medical.pharmacy
point_of_interest.park
point_of_interest.place_of_worship: Places of worship, including churches, temples, mosques, and others
point_of_interest.police
point_of_interest.post: Post office
point_of_interest.sports_complex: Sports complex like football fields or tennis court.
point_of_interest.tourism: All establishments relate to tourism
- point_of_interest.tourism.attraction
  - point_of_interest.tourism.attraction.zoo
- point_of_interest.tourism.monument
  - point_of_interest.tourism.monument.castle
- point_of_interest.tourism.museum

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 ›