How to display a map with custom projections

This example shows how to configure Equal Earth and Equirectangular projections using the SDK JS preview build.

Warning

The features demonstrated here rely on a preview build of the JS SDK.

You can choose between pure projections (applied at all zoom levels) and presets (which automatically transition to Mercator on deep zoom). Set the type property to "equal" or "geodetic" for the adaptive presets, or use "equal-earth" and "equirectangular" for the pure projections.


npm install --save @maptiler/sdk@4.0.3-projection.alpha.1

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',
  style: MapStyle.STREETS,
  center: [0, 20],
  zoom: 1.5
});

map.on("style.load", () => {
  // 'equal', 'equal-earth', 'geodetic', 'equirectangular'
  map.setProjection({ type: 'equal' });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Map projections</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <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%;
}


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map projections</title>
    <script src="./maptiler-sdk.umd.min.js"></script>
    <link href="./maptiler-sdk.css" rel="stylesheet" />
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.0.3-projection.alpha.1/maptiler-sdk.umd.min.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.0.3-projection.alpha.1/maptiler-sdk.css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="module">
      maptilersdk.config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
      const map = new maptilersdk.Map({
        container: "map",
        style: maptilersdk.MapStyle.STREETS,
        center: [0, 20],
        zoom: 1.5,
      });

      map.on("style.load", () => {
        // 'equal', 'equal-earth', 'geodetic', 'equirectangular'
        map.setProjection({ type: "equal" });
      });
    </script>
  </body>
</html>