Polygon fill pattern (polygon helper)

This example shows how to add a polygon layer with a fill pattern to the map using the polygon layer helper. To replicate this example, download the Swiss sample data and the cheese image.

By following this example, users can successfully integrate the desired polygon layer, complete with a unique fill pattern, into their maps using the polygon layer helper tool.


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: 6.62,
    center: [8.224, 46.823],
    style: MapStyle.DATAVIZ.DARK
});

map.on('load', async function () {
  await helpers.addPolygon(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE',
    pattern: "cheese512.png",
    outline: true,
    outlineWidth: 3,
    outlineColor: "white",
    outlineDashArray: "_ ",
    fillOpacity: 0.7,
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Polygon fill pattern (polygon 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>Polygon 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: 6.62,
        center: [8.224, 46.823],
        style: maptilersdk.MapStyle.DATAVIZ.DARK
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPolygon(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE',
        pattern: "cheese512.webp",
        outline: true,
        outlineWidth: 3,
        outlineColor: "white",
        outlineDashArray: "_ ",
        fillOpacity: 0.7,
      });
    });

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