How to switch map projection programmatically

This example shows how to switch between “mercator” and “globe” map projection programmatically.

The choice between Mercator and Globe can be done at different levels and moments in the lifecycle of the map, yet, unless stated otherwise, Mercator remains the default.


npm install --save @maptiler/sdk

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
  container: 'map', // container's id or the HTML element to render the map
  style:  MapStyle.SATELLITE,
  center: [-70.8, 0], // starting position [lng, lat]
  zoom: 1, // starting zoom
  projection: 'globe' //enable globe projection
});

document.getElementById('projection').addEventListener('click', function () {
  const projection = map.getProjection()
  if (projection.type === 'globe') {
    map.setProjection("mercator", { persist: true });
  } else {
    map.setProjection("globe", { persist: true });
  }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>How to switch map projection programmatically | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <button id="projection">Switch map projection</button>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#projection {
  display: block;
  position: relative;
  margin: 0px auto;
  width: 50%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #ee8a65;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapTiler Globe projection</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #projection {
      display: block;
      position: relative;
      margin: 0px auto;
      width: 50%;
      height: 40px;
      padding: 10px;
      border: none;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #ee8a65;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <button id="projection">Switch map projection</button>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element to render the map
      style: maptilersdk.MapStyle.SATELLITE,
      center: [-70.8, 0], // starting position [lng, lat]
      zoom: 1, // starting zoom
      projection: 'globe' //enable globe projection
    });

    document.getElementById('projection').addEventListener('click', function () {
      const projection = map.getProjection()
      if (projection.type === 'globe') {
        map.setProjection("mercator", { persist: true });
      } else {
        map.setProjection("globe", { persist: true });
      }
    });
  </script>
</body>

</html>