Map Types

Switch between roadmap and satellite views using the mapTypeId property of the Woosmap Map JS API.

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

        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.

Switching Map Types Programmatically

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

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

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

Your custom styles and overlays are preserved when switching between map types.

To Go Further

‹ Reference Map Styles ›