Add a new layer below labels

By utilizing the second parameter of the addLayer function in the SDK-JS API, you can enhance the accuracy of adding a new layer beneath the labels or any other desire layer. This allows for more precise placement and control over the layer’s position in relation to the rest of the map layers.


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.STREETS, 
  center: [-88.13734351262877, 35.137451890638886],
  zoom: 4
});

map.on('load', function () {
  const layers = map.getStyle().layers;
  // Find the index of the first symbol layer in the map style
  // This approach works with our simple map styles for more advanced styles, e.g., Outdoor.
  // We recommend directly inserting the name of the last layer above your data. 
  // See the Learn more section below.
  const firstSymbolId = layers.find(layer => layer.type === 'symbol').id;

  map.addSource('urban-areas', {
    'type': 'geojson',
    'data':
      'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'
  });
  map.addLayer(
    {
      'id': 'urban-areas-fill',
      'type': 'fill',
      'source': 'urban-areas',
      'layout': {},
      'paint': {
        'fill-color': '#f08',
        'fill-opacity': 0.4
      }
      // This is the important part of this example: the addLayer
      // method takes 2 arguments: the layer as an object, and a string
      // representing another layer's name. if the other layer
      // exists in the stylesheet already, the new layer will be positioned
      // right before that layer in the stack, making it possible to put
      // 'overlays' anywhere in the layer stack.
      // Insert the layer beneath the first symbol layer.
    },
    firstSymbolId
  );
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Add a new layer below labels | 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>Add a new layer below labels</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',
    style: maptilersdk.MapStyle.STREETS, 
    center: [-88.13734351262877, 35.137451890638886],
    zoom: 4
  });

  map.on('load', function () {
    const layers = map.getStyle().layers;
    // Find the index of the first symbol layer in the map style
    // This approach works with our simple map styles for more advanced styles, e.g., Outdoor.
    // We recommend directly inserting the name of the last layer above your data. 
    // See the Learn more section below.
    const firstSymbolId = layers.find(layer => layer.type === 'symbol').id;

    map.addSource('urban-areas', {
      'type': 'geojson',
      'data':
        'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'
    });
    map.addLayer(
      {
        'id': 'urban-areas-fill',
        'type': 'fill',
        'source': 'urban-areas',
        'layout': {},
        'paint': {
          'fill-color': '#f08',
          'fill-opacity': 0.4
        }
        // This is the important part of this example: the addLayer
        // method takes 2 arguments: the layer as an object, and a string
        // representing another layer's name. if the other layer
        // exists in the stylesheet already, the new layer will be positioned
        // right before that layer in the stack, making it possible to put
        // 'overlays' anywhere in the layer stack.
        // Insert the layer beneath the first symbol layer.
      },
      firstSymbolId
    );
  });
</script>
</body>
</html>

Learn more

In this example, we show how to find the Id of the first symbol layer in the map style.

Sometimes, we want to get the id of a layer other than the first symbol layer. For example, the Outdoor style has contour line labels below some polygons (intentionally cartographic hack), but we don’t want to add our layer before the contour line labels.

To find the id of the layer that will be used before my visualization layer you can search for it directly in the style json or more easily using the Map Designer tool.

Go to MapTiler
Select the map you are using in your application
Click the Customize button
Go to layer - Verticality and find the layer
Click at the layer and open JSON editor ( {} )
Copy layer id e.g. “River labels”

MapTiler Customize get layer ID

Add a new layer below labels

main.js

index.html

style.css

Learn more

Icon image URL inside a rich text format label

Raster layer

Add a video

Add a WMS source

Add a new layer below labels

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

Icon image URL inside a rich text format label

Raster layer

Add a video

Add a WMS source