Point layer scaled radius by property (point helper)
This example shows how to add a point layer to the map, where the size and color of each point are adjusted based on a specific attribute. The point layer helper is utilized to achieve this. To access the sample data, download the USA school’s sample data.
In this particular example, the size of the points is scaled proportionately to the number of students in each school. We aim to employ an ease-out resampling technique, albeit one that is not as rapidly increasing as the exponential method. Instead, we opt for the square-root approach, which proves to be quite effective.
NPM module setup
npm install --save @maptiler/sdk
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: 11.6,
center: [-119.807, 36.7828],
style: MapStyle.DATAVIZ.LIGHT
});
map.on('load', async function () {
await helpers.addPoint(map, {
data: 'schools.geojson',
property: "students",
pointColor: ColorRampCollection.PORTLAND.scale(300, 4000).resample("ease-out-sqrt"),
pointOpacity: 0.7,
minPointRadius: 1,
maxPointRadius: 100,
showLabel: true,
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<title>Point layer scaled radius by property (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>
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
