Source: https://developers.woosmap.com/products/map-api/concepts/map-styles/ > For clean Markdown of any page, append `.md` to the page URL. > For a complete documentation index, see https://developers.woosmap.com/llms.txt # Map Styles ## 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/](https://snazzymaps.com/) or [https://mapstyle.withgoogle.com/](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](/products/map-api/reference/1.4/#woosmap.map.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](/products/map-api/reference/1.4/#woosmap.map.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.highway.motorway`: Motorways - `road.highway.trunk`: Trunk roads - `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. https://demo.woosmap.com/js-samples/samples/map-style-pois/app/dist/ [](https://demo.woosmap.com/js-samples/samples/map-style-pois/highlight/highlight.html "Open in new tab with highlighted code") Try sample - [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/map-style-pois/app?file=index.ts) - [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-style-pois/jsfiddle) - [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/map-style-pois) ### Transit By Night Useful for giving directions in low-light conditions. https://demo.woosmap.com/js-samples/samples/map-style-night/app/dist/ [](https://demo.woosmap.com/js-samples/samples/map-style-night/highlight/highlight.html "Open in new tab with highlighted code") Try sample - [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/map-style-night/app?file=index.ts) - [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-style-night/jsfiddle) - [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/map-style-night) ### Retro Clean map with colors inspired from old paper maps. https://demo.woosmap.com/js-samples/samples/map-style-retro/app/dist/ [](https://demo.woosmap.com/js-samples/samples/map-style-retro/highlight/highlight.html "Open in new tab with highlighted code") Try sample - [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/map-style-retro/app?file=index.ts) - [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-style-retro/jsfiddle) - [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/map-style-retro) ### Light Grey Useful to display overlays and highlight particular components. https://demo.woosmap.com/js-samples/samples/map-style-lightgrey/app/dist/ [](https://demo.woosmap.com/js-samples/samples/map-style-lightgrey/highlight/highlight.html "Open in new tab with highlighted code") Try sample - [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/map-style-lightgrey/app?file=index.ts) - [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-style-lightgrey/jsfiddle) - [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/map-style-lightgrey)