For AI agents: a documentation index is available at /llms.txt. Markdown versions of all pages are available by appending .md to any URL.
Line outline glow blur symbol (polyline helper)
This example demonstrates the addition of an outline glow blur symbol to enhance the visual appeal of a line layer. To achieve this, the polyline layer helper is employed. To implement this feature, simply download the NY subway lines sample data.
NPM module setup
npm install --save @maptiler/sdk
import { Map, MapStyle, config, 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: 9.5,
center: [-73.8931, 40.7396],
style: MapStyle.DATAVIZ.DARK
});
map.on('load', async function () {
await helpers.addPolyline(map, {
data: 'YOUR_MAPTILER_DATASET_ID_HERE',
// --> Main line
lineColor: "#fff", // White
lineOpacity: 0.7, // Partially transparent to see the halo color through
// --> Halo line
outline: true, // To create the electric halo, the outline is
outlineColor: "#d83bff", // purple
outlineOpacity: 0.5, // half transparent
outlineWidth: 15, // quite large compared to the main line
outlineBlur: 15, // and blurry
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<title>Line outline glow blur symbol (polyline 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%;}
