Color ramp resampling (color ramp)

This example shows how to resample a color ramp and use it to visualize a point layer. Download the sample data here.

Select between different resampling methods or no resampling to compare point layer visualizations.


npm install --save @maptiler/sdk

main.js

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

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
    container: 'map',
    zoom: 11,
    center: [-73.97402, 40.73302],
    style: MapStyle.DATAVIZ.LIGHT
});

const ramp = ColorRampCollection.PORTLAND.scale(300, 4000);
const ramp_sqrt = ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-sqrt");
const ramp_exp = ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-exp");

let layers;

map.on('load', async function () {
  await createColorRampLayer(ramp_sqrt, 'sqrt');
});

document.getElementById('resample-method').addEventListener('change', function(evt) {
  const method = this.value;
  mapRemoveLayers();
  switch (method) {
    case 'lineal':
      createColorRampLayer(ramp, method);
      break;
    case 'sqrt':
      createColorRampLayer(ramp_sqrt, method);
      break;
    case 'exp':
      createColorRampLayer(ramp_exp, method);
      break;
    default:
      createColorRampLayer(ramp, "lineal");
      break;
  }
});

async function createColorRampLayer(colorRamp, name) { 
  const rampLayers = await maptilersdk.helpers.addPoint(map, {
    layerId: `school_color_ramp_${name}`,
    data: 'schools.geojson',
    property: "students",
    pointColor: colorRamp,
    pointOpacity: 0.7,
    minPointRadius: 15,
    showLabel: true,
  });
  layers = rampLayers;
}

function mapRemoveLayers() {
  Object.keys(layers).forEach(item => {
    if (layers[item] !== "") {
      if (map.getLayer(layers[item])) map.removeLayer(layers[item]);
    } 
  })
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Color ramp resampling (color ramp) | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <div>
  <select name="resample-method" id="resample-method" class="form-select">
    <option value="linear">No resample</option>
    <option value="sqrt" selected>Square root</option>
    <option value="exp">Exponential</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%;}
#resample-method {position: absolute; top: 10px; left: 10px; z-index: 1000;}

<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>Color ramp</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%;}
  #resample-method {position: absolute; top: 10px; left: 10px; z-index: 1000;}
</style>
</head>
<body>
<div id="map"></div>
<div>
  <select name="resample-method" id="resample-method" class="form-select">
    <option value="linear">No resample</option>
    <option value="sqrt" selected>Square root</option>
    <option value="exp">Exponential</option>
  </select>
</div>

<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
        container: 'map',
        zoom: 11,
        center: [-73.97402, 40.73302],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    const ramp = maptilersdk.ColorRampCollection.PORTLAND.scale(300, 4000);
    const ramp_sqrt = maptilersdk.ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-sqrt");
    const ramp_exp = maptilersdk.ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-exp");

    let layers;

    map.on('load', async function () {
      await createColorRampLayer(ramp_sqrt, 'sqrt');
    });

    document.getElementById('resample-method').addEventListener('change', function(evt) {
      const method = this.value;
      mapRemoveLayers();
      switch (method) {
        case 'lineal':
          createColorRampLayer(ramp, method);
          break;
        case 'sqrt':
          createColorRampLayer(ramp_sqrt, method);
          break;
        case 'exp':
          createColorRampLayer(ramp_exp, method);
          break;
        default:
          createColorRampLayer(ramp, "lineal");
          break;
      }
    });

    async function createColorRampLayer(colorRamp, name) { 
      const rampLayers = await maptilersdk.helpers.addPoint(map, {
        layerId: `school_color_ramp_${name}`,
        data: 'schools.geojson',
        property: "students",
        pointColor: colorRamp,
        pointOpacity: 0.7,
        minPointRadius: 15,
        showLabel: true,
      });
      layers = rampLayers;
    }

    function mapRemoveLayers() {
      Object.keys(layers).forEach(item => {
        if (layers[item] !== "") {
          if (map.getLayer(layers[item])) map.removeLayer(layers[item]);
        } 
      })
    }

</script>
</body>
</html>