Display a satellite map

Display a satellite map in your web mapping application. Our built-in styles (streets, satellite, hybrid, outdoor, winter, dark, etc.) are designed to make it easier for you to create beautiful maps. No need for extra coding or worrying about outdated versions. Check out the available list of built-in styles.

MapTiler’s satellite map provides up-to-date satellite imagery for the whole world, high resolution detailed aerial imagery for many countries.


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 id
  style: MapStyle.SATELLITE, 
  center: [17.100917, 48.142691], // starting position [lng, lat]
  zoom: 15.71// starting zoom
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display a satellite map | 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>Display a satellite map</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 map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.MapStyle.SATELLITE, 
      center: [17.100917, 48.142691], // starting position [lng, lat]
      zoom: 15.71// starting zoom
    });
  </script>
</body>
</html>