Switch between contour lines heights in meters and feet.

Change the units for the altitude of the contour lines, converting from meters to feet. For additional technical information, refer to the Contours schema provided by MapTiler.

The Global Contours schema, created by MapTiler, contains contour lines for locations all around the globe in two widely used unit systems: meters and feet. With its global coverage, MapTiler’s contour lines can be utilized for various purposes, such as outdoor recreation planning, landscape analysis, and cartographic visualization.


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',
  style: MapStyle.OUTDOOR, 
  zoom: 13.42,
  center: [-148.63567, 62.03381],
});

// switching contours units
const changeLayerSource = function(layer_id, source) {
  // get layer definition, remove layer, add layer
  const oldLayers = map.getStyle().layers;
  const layerIndex =  oldLayers.findIndex(l => l.id === layer_id);
  const contourDef = oldLayers[layerIndex];
  const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex +1].id;
  contourDef['source-layer'] = source;
  map.removeLayer(layer_id);
  map.addLayer(contourDef, before);
};

// switch units handler
const units = document.getElementById('units');
units.addEventListener('change', function() {
  changeLayerSource('Contour', this.value);
  changeLayerSource('Contour index', this.value);
  changeLayerSource('Contour labels', this.value);
  changeLayerSource('Glacier contour', this.value);
  changeLayerSource('Glacier contour index', this.value);
  changeLayerSource('Glacier contour labels', this.value);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Switch between meters and feet</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <div class="map-overlay">
  <p for="units" class="form-label">Contour lines units:</p>
  <select id="units" class="form-select">
    <option value="contour">Meters</option>
    <option value="contour_ft">Feet</option>
  </select>
  </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%;}
.map-overlay {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px;
  border-radius: 4px;
}

<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>Switch between meters and feet</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%;}
  .map-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 8px;
    border-radius: 4px;
  }
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay">
  <p for="units" class="form-label">Contour lines units:</p>
  <select id="units" class="form-select">
    <option value="contour">Meters</option>
    <option value="contour_ft">Feet</option>
  </select>
</div>

<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map',
      style: maptilersdk.MapStyle.OUTDOOR, 
      zoom: 13.42,
      center: [-148.63567, 62.03381],
    });

    // switching contours units
    const changeLayerSource = function(layer_id, source) {
      // get layer definition, remove layer, add layer
      const oldLayers = map.getStyle().layers;
      const layerIndex =  oldLayers.findIndex(l => l.id === layer_id);
      const contourDef = oldLayers[layerIndex];
      const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex +1].id;
      contourDef['source-layer'] = source;
      map.removeLayer(layer_id);
      map.addLayer(contourDef, before);
    };
    
    // switch units handler
    const units = document.getElementById('units');
    units.addEventListener('change', function() {
      changeLayerSource('Contour', this.value);
      changeLayerSource('Contour index', this.value);
      changeLayerSource('Contour labels', this.value);
      changeLayerSource('Glacier contour', this.value);
      changeLayerSource('Glacier contour index', this.value);
      changeLayerSource('Glacier contour labels', this.value);
    });
</script>
</body>
</html>

Switch between contour lines heights in meters and feet.

main.js

index.html

style.css

3D terrain map

Start with AR maps

Add Contour Lines

Switch between contour lines heights in meters and feet.

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

3D terrain map

Start with AR maps

Add Contour Lines