Point layer outline (point helper)

The following example demonstrates the process of including a point layer on the map along with an outline. This can be achieved by utilizing the point layer helper. To replicate this example, download the earthquake sample data.

In this example, the outline starts at zoom level 7. Additionally, the width and opacity of the outline can be gradually increased to create a visually appealing effect.


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.88,
    center: [151.401, -5.096],
    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,
    showLabel: true,
    labelSize: 10, // 12 by default
    outline: true,
    outlineWidth: [
      {zoom: 6, value: 0},
      {zoom: 7, value: 1},
      {zoom: 12, value: 5},
    ],
    outlineOpacity: [
      {zoom: 7, value: 0},
      {zoom: 10, value: 1},
    ],
    outlineColor: "#000",
    labelColor: "#000"
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Point layer outline (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.88,
        center: [151.401, -5.096],
        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,
        showLabel: true,
        labelSize: 10, // 12 by default
        outline: true,
        outlineWidth: [
          {zoom: 6, value: 0},
          {zoom: 7, value: 1},
          {zoom: 12, value: 5},
        ],
        outlineOpacity: [
          {zoom: 7, value: 0},
          {zoom: 10, value: 1},
        ],
        outlineColor: "#000",
        labelColor: "#000"
      });
    });

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