Point layer modify min and max size. Apply transparency (point helper)

This example illustrates the process of adjusting the default point size values for a point layer by utilizing the point layer helper. To replicate this example, download the earthquake sample data.

Our objective is to modify the default point size values, making smaller points even smaller and larger points even larger. Given that there is often overlap among multiple points, it is necessary to introduce a slight level of transparency.


npm install --save @maptiler/sdk

main.js

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

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

map.on('load', async function () {
  await helpers.addPoint(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    property: "mag",
    pointColor: ColorRampCollection.VIRIDIS.scale(1, 5),
    minPointRadius: 2,
    maxPointRadius: 100,
    pointOpacity: 0.7,
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Point layer modify min and max size. Apply transparency (point helper) | 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>Point helper</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',
        zoom: 7.28,
        center: [-97.793, 36.504],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPoint(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE',
        property: "mag",
        pointColor: maptilersdk.ColorRampCollection.VIRIDIS.scale(1, 5),
        minPointRadius: 2,
        maxPointRadius: 100,
        pointOpacity: 0.7,
      });
    });

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