Source: https://developers.woosmap.com/products/map-api/concepts/map-types/

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



The Woosmap Map JS API lets you choose between different base map types. You can initialize your map with a specific type and switch between them at runtime, either programmatically or through a built-in UI control.

## Overview

There are two base map types available:

- **Roadmap** (`woosmap.map.MapTypeId.ROADMAP`) — the default vector street map with roads, labels, and buildings.
- **Hybrid** (`woosmap.map.MapTypeId.HYBRID`) — satellite imagery with road and label overlays.

You set the map type using the `mapTypeId` option in [MapOptions](/products/map-api/reference/1.4/#woosmap.map.MapOptions). If you don’t specify one, the map defaults to roadmap.

## Displaying a Hybrid Map

To initialize a map with the satellite view and display the map type toggle control, pass `mapTypeId` and `mapTypeControl` in your map options:

```javascript
function initMap() {
  const map = new woosmap.map.Map(document.getElementById("map"), {
    center: { lat: 48.8584, lng: 2.2945 },
    zoom: 16,
    mapTypeId: woosmap.map.MapTypeId.HYBRID,
    mapTypeControl: true, // displays the Map / Satellite toggle
  });
}
```

The `mapTypeControl` option is hidden by default. When enabled, a **Map / Satellite** toggle appears in the top-left corner of the map, letting users switch between views without any additional code.

https://demo.woosmap.com/js-samples/samples/map-type-hybrid/app/dist/
[](https://demo.woosmap.com/js-samples/samples/map-type-hybrid/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-type-hybrid/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-type-hybrid/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/map-type-hybrid)

## Switching Map Types Programmatically

You can change the map type at runtime using `setMapTypeId()` and read the current type with `getMapTypeId()`:

```javascript
// Switch to satellite
map.setMapTypeId(woosmap.map.MapTypeId.HYBRID);

// Switch back to roadmap
map.setMapTypeId(woosmap.map.MapTypeId.ROADMAP);
```

To react to map type changes — whether triggered by the user through the control or programmatically — listen for the `mapTypeId_changed` event:

```javascript
map.addListener("mapTypeId_changed", () => {
  console.log("Map type is now:", map.getMapTypeId());
});
```

Your custom [styles](/products/map-api/concepts/map-styles/) and overlays are preserved when switching between map types.

## To Go Further

- [Map Styles — Customize the visual presentation of your map](/products/map-api/concepts/map-styles/)
- [Handling Events — Learn about user and MVC events](/products/map-api/guides/events/)
- [Map API Reference — MapTypeId, setMapTypeId, getMapTypeId](/products/map-api/reference/1.4/#woosmap.map.MapTypeId)