Point layer disabled zoom compensation (point helper)

This example demonstrates the process of incorporating a layer of points onto the map by utilizing the point layer helper while keeping zoom compensation disabled. Obtain the USA school’s sample data.

In this particular example, the size of the points is adjusted based on the quantity of students enrolled in each school. It is advisable to view this map at zoom level 12 since zoom compensation has been deactivated.


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: 12,
    center: [-73.99807, 40.71265],
    style: MapStyle.DATAVIZ.DARK
});

map.on('load', async function () {
  await helpers.addPoint(map, {
    data: 'schools.geojson',
    property: "students",
    pointColor: ColorRampCollection.PORTLAND.scale(200, 2000).resample("ease-out-sqrt"),
    pointOpacity: 0.8,
    minPointRadius: 6,
    maxPointRadius: 30,
    showLabel: true,
    zoomCompensation: false,
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Point layer disabled zoom compensation (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: 12,
        center: [-73.99807, 40.71265],
        style: maptilersdk.MapStyle.DATAVIZ.DARK
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPoint(map, {
        data: 'schools.geojson',
        property: "students",
        pointColor: maptilersdk.ColorRampCollection.PORTLAND.scale(200, 2000).resample("ease-out-sqrt"),
        pointOpacity: 0.8,
        minPointRadius: 6,
        maxPointRadius: 30,
        showLabel: true,
        zoomCompensation: false,
      });
    });

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