Display a tiled, non-georeferenced image

The MapTiler’s SDK ImageViewer allows you to display tiled, non-georeferenced images while interacting with them similarly to how you would navigate a regular map. This functionality works well for zoomable non-georeferenced, geographically “inaccurate” maps such as hotel maps, golf courses, theme parks etc. Think in pixels instead of lattitudes and longtidues.

Check out the guide How to convert large images into zoomable tiles (no map) to learn how to upload your image to your MapTiler account.

^{Image: 1932 Japanese pictorial world map game board - World Adventure}


npm install --save @maptiler/sdk

main.js

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

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const imageViewer = new ImageViewer({
  container: 'map',
  imageUUID: 'YOUR_MAPTILER_TILESET_ID_HERE',
});

imageViewer.on('imageviewerready', () => {
  console.log('Image ready!');
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display a tiled, non-georeferenced image | NPM example</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%;}

<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>ImageViewer</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%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const imageViewer = new maptilersdk.ImageViewer({
      container: 'map',
      imageUUID: 'YOUR_MAPTILER_TILESET_ID_HERE',
    });

    imageViewer.on('imageviewerready', () => {
      console.log('Image ready!');
    });
  </script>
</body>

</html>