Map Controller

Map Controller provides an API for manipulate a map.

---

enableInspector

Enable MapGrab inspector

playwright

test("foo test", async ({ mapController }) => {
  await mapController('mainMap').enableInspector();
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.enableInspector();
  });
});

---

disableInspector

Disable MapGrab inspector

playwright

test("foo test", async ({ mapController }) => {
  await mapController('mainMap').disableInspector();
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.disableInspector();
  });
});

---

setView

Set map view based on lng/lat

Usage

playwright

test("foo test", async ({ mapController }) => {
  await mapController('mainMap').setView({ center: [11, 12] })
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.setView({ center: [11, 12] });
  });
});

---

setViewAbsolute

Set map view based on screen x/y

Usage

playwright

test("foo test", async ({ mapController }) => {
  await mapController('mainMap').setViewAbsolute({ center: [240, 321] });
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.setViewAbsolute({ center: [240, 321] });
  });
});

---

fitMapToBounds

Fit map to specified bounds by lng/lat

Usage

playwright

test("foo test", async ({ mapController }) => {
  await mapController('mainMap').fitMapToBounds([11, 11, 14, 14], { duration: 11 });
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.fitMapToBounds([11, 11, 14, 14], { duration: 11 });
  });
});

---

fitMapToBoundingBox

Fit map to specified bounds by screen x/y

Usage

playwright

test("foo test", async ({ mapController, mapLocator }) => {
  const controller = mapController('mainMap');
  const city = mapLocator('layer[id=cities]').first();
  const bbox = await locator.boundingBox();

  await controller.fitMapToBoundingBox(bbox, { padding: 5 });
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    const bbox = new MapRect(20, 20, 400, 400)

    controller.fitMapToBoundingBox(bbox, { padding: 5 });
  });
});

---

exposeLayers

Hides all layers on the map except the passed

Usage

playwright

test("foo test", async ({ mapController, mapLocator }) => {
  const controller = mapController('mainMap');

  await controller.exposeLayers(['cities-label']);

  await expect(await page.screenshot()).toMatchSnapshot('page-with-show-city-label.png');
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.exposeLayers(['cities-label']);
  });
});

revertExposeLayers

Restores the previous state of layer visibility

Usage

playwright

test("foo test", async ({ mapController, mapLocator }) => {
  const controller = mapController('mainMap');
  
  const exposeState = await controller.exposeLayers(['cities-label']);

  await expect(await page.screenshot()).toMatchSnapshot('page-with-show-city-label.png');

  await controller.revertExposeLayers(exposeState);
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.exposeLayers(['countries-label'], ['countries-fill']).then((state) => {
      controller.revertExposeLayers(state);
    });
  });
});

---

projectLngLatToScreenPoint

Return converted geographic coordinates to screen coordinates

Usage

playwright

test("foo test", async ({ mapController, mapLocator, page }) => {
  const controller = mapController('mainMap');
  
  const { x, y } = await controller.projectLngLatToScreenPoint({ lng: 12, lat: 11 });

  await page.mouse.click(x, y);
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.projectLngLatToScreenPoint({ lng: 12, lat: 11 }).then(({ x, y }) => {
      cy.click(x, y);
    });
  });
});

---

unprojectLngLatToScreenPoint

Return converted screen coordinates to geographic coordinates

Usage

playwright

test("foo test", async ({ mapController, mapLocator, page }) => {
  const controller = mapController('mainMap');
  
  const { lng, lat } = await controller.unprojectLngLatToScreenPoint({ x: 200, y: 200 });

  await expect(lng).toBe(22);
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    controller.unprojectLngLatToScreenPoint({ x: 200, y: 200 }).then(({ lat, lng }) => {
      ...
    });
  });
});

---

waitToMapLoaded

Waits until the map is loaded

Usage

playwright

test("foo test", async ({ mapController, mapLocator, page }) => {
  await mapController('mainMap').waitToMapLoaded();
  ...
});

cypress

it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    return controller.waitToMapLoaded();
  });
});

---

waitToMapStable

Waiting for the map to stop painting or moving

Usage

playwright

test("foo test", async ({ mapController, mapLocator, page }) => {
  await mapController('mainMap').waitToMapStable();
  await expect(await page.screenshot()).toMatchSnapshot('map-loaded.png');
  ...
});

cypress

 it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    return controller.waitToMapStable();
  });
});

---

waitToMapRepaint

Waiting for the map to repaint

Usage

playwright

test("foo test", async ({ mapController, mapLocator, page }) => {
  await Promise.all([
    page.locator('.show-cities').click(),
    mapController('mainMap').waitToMapRepaint()
  ]);
  ...
});

cypress

 it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    return controller.waitToMapRepaint();
  });
});

---

getMapInstance

Get map handle its Mapbox GL JS or Maplibre GL JS instance

Usage

playwright

test("foo test", async ({ mapController, mapLocator, page }) => {
  const map = await mapController('mainMap').getMapInstance();

  await map.evaluate((map) => map.jumpTo(...));
  ...
});

cypress

 it('foo test', () => {
  cy.mapController('mainMap').then((controller) => {
    return mapController('mainMap').getMapInstance().then((map) => {
      map.evaluate((map) => map.jumpTo(...));
    });
  });
});