Line dash pattern symbol (polyline helper)

In this example, we will explore the process of incorporating a line layer with a dash pattern symbol into the map by utilizing the polyline layer helper. You can access the sample data by downloading the Amphitheater Lake trail sample data.

By following this approach, we can successfully incorporate a visually appealing dash pattern symbol into our line layer, enhancing its overall appearance and functionality on the map.


npm install --save @maptiler/sdk

main.js

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: 14,
    center: [-110.75926, 43.72683],
    style: MapStyle.OUTDOOR
});

map.on('load', async function () {
  await helpers.addPolyline(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    outline: true,
    lineDashArray: "___  _  ",
    lineColor: "#F1175D"
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Line dash pattern 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>

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>Polyline 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: 14,
        center: [-110.75926, 43.72683],
        style: maptilersdk.MapStyle.OUTDOOR
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPolyline(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE',
        outline: true,
        lineDashArray: "___  _  ",
        lineColor: "#F1175D"
      });
    });

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