Add a pattern to a polygon | Mapbox GL JS

This example uses an image from an external URL as a repeating pattern that fills a polygon feature on the map.

It uses loadImage() to load the image from an external URL, then adds the loaded image to the style with addImage(). Then it uses addLayer() to create a new symbol layer that uses fill-pattern to fill a polygon with a pattern created by the repeating image.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a pattern to a polygon</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [-105.819711, 39.147614], // starting position
        zoom: 5 // starting zoom
    });

    map.on('load', () => {
        // Add the GeoJSON data.
        map.addSource('source', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [-108.977199, 40.975108],
                            [-102.105019, 40.995138],
                            [-102.078486, 37.017605],
                            [-109.083333, 37.017605],
                            [-108.977199, 40.975108]
                        ]
                    ]
                }
            }
        });

        // Load an image to use as the pattern from an external URL.
        map.loadImage(
            'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
            (err, image) => {
                // Throw an error if something goes wrong.
                if (err) throw err;

                // Add the image to the map style.
                map.addImage('pattern', image);

                // Create a new layer and style it using `fill-pattern`.
                map.addLayer({
                    'id': 'pattern-layer',
                    'type': 'fill',
                    'source': 'source',
                    'paint': {
                        'fill-pattern': 'pattern'
                    }
                });
            }
        );
    });
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [-105.819711, 39.147614],
      zoom: 5
    });

    mapRef.current.on('load', () => {
      mapRef.current.addSource('source', {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-108.977199, 40.975108],
                [-102.105019, 40.995138],
                [-102.078486, 37.017605],
                [-109.083333, 37.017605],
                [-108.977199, 40.975108]
              ]
            ]
          }
        }
      });

      mapRef.current.loadImage(
        'https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png',
        (err, image) => {
          if (err) throw err;
          mapRef.current.addImage('pattern', image);

          mapRef.current.addLayer({
            id: 'pattern-layer',
            type: 'fill',
            source: 'source',
            paint: {
              'fill-pattern': 'pattern'
            }
          });
        }
      );
    });
  }, []);

  return <div ref={mapContainerRef} id="map" style={{ height: '100%' }}></div>;
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

このexampleは役に立ちましたか？